এটি একটি ধারাবাহিক টিউন। পড়ুন, সব গুলো পর্ব

• HTML হাতেখড়ি [পর্ব- ১] প্রাথমিক আলোচনা
• HTML হাতেখড়ি [পর্ব-২] হেডিং(Heading), প্যারাগ্রাফ( Paragraph), লিংক( Link)
• HTML হাতেখড়ি [পর্ব-৩] HTML ফরমেটিং (Formatting), লিস্টিং (Listing) এবং কমেন্ট(Comment)
• HTML হাতেখড়ি [পর্ব-4] HTML টেবিল (Table) এবং ইনটিটিস (Entities)
• HTML হাতেখড়ি [পর্ব- ৫] এইচ.টি.এম.এল  ফ্রেম (HTML Frame)
• HTML হাতেখড়ি [পর্ব- ৬] এইচ.টি.এম.এল ফর্মের উপাদান (HTML Forms Element)

আজ আমরা HTML Forms এর উপাদান তৈরি করা শিখব। প্রথমেই আমাদের জানতে হবে একটা Form এ কি কি জিনিস থাকতে পারে। একটা Form যা থাকতে পারে তা নিম্নরূপ:

• Text Field – এখানে ব্যবহারকারীর নাম, বয়স অথবা অন্য কোন তথ্য লেখা হয়।
• Password Field – এখানে ব্যবহারকারীর পাসওয়ার্ড লেখা হয়।
• Radio Button – গোলাকৃতির টিক বাটন।
• Check Box – বর্গাকার টিক বাট।
• Dropdown List – ইনফরমেশন লিস্ট।
• Text Area – বড় কোন ইনফরমেশন লেখার জায়গা।
• Button – বাটন।
• Submit Button – ইনফরমেশন সেন্ড করার বাটন।

এখন এইগুলো কিভাবে দ্বারা তৈরি করতে হয় আমরা তা শিখব।

Text Field:

টেক্সট ফিল্ড তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form>
নাম: <input type="text" name="name" /><br />
পেশা: <input type="text" name="profession" />
</form>
এখানে আমরা Text Field তৈরি করেছি বলে input type এ text দিয়েছি।

Password Field:

পাসওয়ার্ড ফিল্ড তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form>
গোপন সংখ্যা: <input type="password" name="pwd" />
</form>

এখানে আমরা Password Field তৈরি করেছি বলে input type এ password  দিয়েছি।

Radio Button:

Radio Button তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form>
<input type="radio" name="sex" value="male" /> পুরুষ<br />
<input type="radio" name="sex" value="female" /> নারী
</form>

এখানে আমরা Radio Button তৈরি করেছি বলে input type এ radio  দিয়েছি।

Check Box:

Check Box তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form>
<input type="checkbox " name="sex" value="male" /> পুরুষ<br />
<input type="checkbox" name="sex" value="female" /> নারী
</form>

এখানে আমরা Check Box তৈরি করেছি বলে input type এ  checkbox  দিয়েছি।

Dropdown List:

Dropdown List তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form action="">

<p>কে বাড়ি যাবে???</p>

<select name="go_home">

<option value="i"> আমি </option>

<option value="you">তুমি</option>

<option value="he_she">সে</option>

</select>

</form>

Text Area:

Text Area তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<textarea rows="10" cols="30">

এখানে ‍তুমি তোমার ভালবাসার কথা লিখ।

</textarea>

Button:

Button তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form action="">
<input type="button" value="চাপ দাও">
</form>

এখানে আমরা Button তৈরি করেছি বলে input type এ button দিয়েছি।

Submit Button:

Submit Button তৈরি করার জন্য নিচের কোডটি টাইপ করুন।

<form name="input" action=" " method=" ">
<input type="submit" value="Submit" />
</form>

এখানে আমরা Submit Button তৈরি করেছি বলে input type=" submit " দিয়েছি।