এইচটিএমএল ফরম উপাদানসমূহ (HTML Form Elements)

শরিফুল ইসলাম
Job category-Php Coder

<input>Element:

ফর্ম element এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ element হল <input> element. এই element টি বিভিন্ন বিষয়ের উপর ভিক্তি করে বিভিন্ন রকম হয়ে থাকে।

<select> Element (drop-down-list):

উদাহরনঃ


 <select name="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
 </select>

 

 

ফলাফল



 

<option> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।

উদাহরণ


<option value=”fiat” selected>Fiat</option>


 

 

ফলাফল



 

<textarea> Element

ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।

উদাহরণ


<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>


 

 

ফলাফল



 

<button> element

কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।

উদাহরণ


<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>


 

 

ফলাফল



 

এইচটিএমএল ৫ <datalist> element

Pre-defined অপশন্‌স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্‌স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে।

উদাহরণ


<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
</form>

 

ফলাফল





 

এইচটিএমএল ৫ <keygen> element

ইউজার রা নিরাপদ ভাবে বৈধতা ঘোষণা করার জন্য এই element ব্যবহার করা হয় । এই element এর মাধ্যমে একজোড়া ফিল্ড তৈরি হয় ফর্ম এর মধ্যে। যখন ফর্ম সাবমিট করা হয় দুই ধরনের key তৈরি হয়। একটি প্রাইভেট এবং পাবলিক। প্রাইভেট key লোকাল ভাবে জমা হয় এবং পাবলিক key সার্ভার এ পাঠানো হয়। client কে certify করার ক্ষেত্রে এই প্রাইভেট key ব্যবহার করা হয় যাতে ভবিষ্যতে এই ইউজার কে অথিনটিকেত করা যায়।

উদাহরণ


<form action=”action_page.php”>
Username: <input type=”text” name=”user”>
Encryption: <keygen name=”security”>
<input type=”submit”>
form>


 

 

ফলাফল


Username:Encryption:


 

এইচটিএমএল ৫ <output> element

কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়

উদাহরণ


<form action="action_page.asp"
 oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 0
 <input type="range"  id="a" name="a" value="50">
 100 +
 <input type="number" id="b" name="b" value="50">
 =
 <output name="x" for="a b"></output>
 <br><br>
 <input type="submit">
 </form>

 

 

ফলাফল


0

100 +

=


 

এইচটিএমএল ফর্ম elements

ট্যাগ বর্ণনা
<form> ইউজার দের ইনপুট দেওয়ার জন্য ফর্ম
<input> ইনপুট কে নিয়ন্ত্রণ করার জন্য
<textarea> একের অধিক লাইন কে ইনপুট দেওয়ার জন্য
<lable> একটি ইনপুট এর লেবেল ডিফাইন করার জন্য
<fieldset> একটি ফর্মের মধ্যে গ্রুপ সম্পর্কিত উপাদান ডিফাইন করার জন্য
<legend> <fieldset> element এর নাম দেওয়ার জন্য (caption)
<select> ড্রপ ডাউন তালিকা ডিফাইন করার জন্য
<optgroup> গ্রুপ সম্পর্কিত অপশন ড্রপ ডাউন তালিকা থেকে পাওয়ার জন্য
<option> ড্রপ ডাউন লিস্ট থেকে অপশন সিলেক্ট করার জন্য
<button> বাটন কে ক্লিক করার ক্ষেত্রে
<datalist> pre-defined অপশন্‌স এর একটি তালিকা যা থেকে ইনপুট কে নিয়ন্ত্রণ করা যাবে।
<keygen> ফর্মের একজোড়া key ফিল্ড তৈরি করার জন্য
<optput> calculation এর ফলাফল পাওয়ার জন্য।