# HTML ফর্ম এর বিস্তারিত Part-02

<s>Post No:08</s>

আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:  
[**https://hashnode.com/@Labib**](https://hashnode.com/@Labib)

Previous Part Link:  
[https://blog.shikhun.net/html-part-01](https://blog.shikhun.net/html-part-01)

**&lt;input type="number"&gt; এর ব্যবহার -**

ইউজারের কাছ থেকে যদি সংখ্যা সংগ্রহ করতে চান সে ক্ষেত্রে আপনি &lt;input type="number"&gt; ব্যবহার করতে পারেন |

**&lt;input type="reset"&gt; এর ব্যবহার -**

একটি ফর্মে ইউজার তার সকল তথ্য লেখার পর যদি মনে হয় যে কোথাও সে ভুল করেছে সে ক্ষেত্রে &lt;input type="reset"&gt; বক্সটি থাকলে সে সহজেই ওই বাটনে ক্লিক করে নতুন করে আবার সব কিছু লিখতে পারবে, অন্যথায় তাকে নতুন করে ওই ওয়েবসাইট ভিজিট করতে হবে|

**&lt;input type="search"&gt; এর ব্যবহার -**

এই ইনপুট ব্যবহার করলে আপনি যা চাচ্ছেন তা একটা একটা করে খুঁজে খুঁজে দেখতে হবে না শুধুমাত্র আপনি সেই নামটা লিখে এন্টার প্রেস করলে আপনার প্রয়োজনীয় তথ্য সহজে খুজে পাবেন |

**&lt;input type="text"&gt; (default value) এর ব্যবহার -** এই ইনপুটে সাধারণত নাম লেখা হয় |

**&lt;input type="time"&gt; এর ব্যবহার -**

এই ইনপুট ব্যবহার করলে ইউজার খুব সহজেই ঘন্টা মিনিট সেকেন্ড লিখতে পারে |

**&lt;input type="url"&gt; এর ব্যবহার -**

এই ইনপুট ব্যবহার করার মাধ্যমে ইউজারের কাছ থেকে ওয়েবসাইটের লিংক সংগ্রহ করতে পারি |

**&lt;input type="submit"&gt; এর ব্যবহার -**

যা ব্যবহারকারীর দ্বারা সমস্ত ডাটা লেখার পরে যে বাটনে ক্লিক করলে ডাটা গুলো ডাটাবেজে জমা হবে, এ সকল কাজে submit ব্যবহার করা হয় | যেমন একটি ফর্ম জমা দেওয়ার কাজে ব্যবহার করা হয় |

**&lt;input type="tel"&gt; এর ব্যবহার -**

এই ইনপুট ব্যবহার করে ইউজারের কাছ থেকে ফোন নাম্বার সংগ্রহ করতে পারি |

**&lt;input type="week"&gt; এর ব্যবহার -**

ইহা একটি সপ্তাহ এবং বছরের নিয়ন্ত্রণকে সংজ্ঞায়িত করে৷

**Textarea  ট্যাগের ব্যবহার এবং আউটপুট**:

&lt;form action="#"&gt;

&lt;label for="coderlabib"&gt;Review of coderlabib:&lt;/label&gt;

&lt;textarea id="coderlabib" name="coderlabib" rows="4" cols="50"&gt;

[coderlabib.com](http://coderlabib.com) এ আপনি একটি ওয়েবসাইট তৈরি করতে শিখবেন। তারা সমস্ত ওয়েব ডেভেলপমেন্ট প্রযুক্তিতে বিনামূল্যে টিউটোরিয়াল অফার করে।

&lt;/textarea&gt;

&lt;br&gt;&lt;br&gt;

&lt;input type="submit" value="Submit"&gt;

&lt;/form&gt;

![](https://lh4.googleusercontent.com/MM_z7HsfFPY3wHw_R6JSdsa_ETt1oJC_0Ki2arlKqjl6zfzWYLpyvq-QWrSDEJ-cqpNcaPtqxkb_AzzEVqECHKycUwsN-Txzkh0_MDRNjOCM8jKKseMvj8PD0XR9xIFPCuKECMs71kxDabtFmwTv-701FGhXUxBs0ZpdfZUQryTpQ3goOZZqNEy3cKGA align="left")

আপনি যদি ইউজারের কাছ থেকে বিস্তারিত তথ্য সংগ্রহ করতে চান সেক্ষেত্রে Textarea tag ব্যবহার করবেন |

**Select  ট্যাগের ব্যবহার এবং আউটপুট**:

&lt;form action="#"&gt;

&lt;label for="cars"&gt;Choose a car:&lt;/label&gt;

&lt;select name="cars" id="cars"&gt;

&lt;option value="volvo"&gt;Volvo&lt;/option&gt;

&lt;option value="saab"&gt;Saab&lt;/option&gt;

&lt;option value="opel"&gt;Opel&lt;/option&gt;

&lt;option value="audi"&gt;Audi&lt;/option&gt;

&lt;/select&gt;

&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;input type="submit" value="Submit"&gt;

&lt;/form&gt;

![](https://lh3.googleusercontent.com/CNSUJqJAlekn6C0FOjPsdkm1TNRLOV7VKmjcaU3Ey8iKx03uBJ80AOERyEqwgge2vXZbE1Ufjpthm1-X9rk3zXlqESZFG5Q8B3uTYEllPcuKkb5tZdLFGUWHfNqeqYrMjLHwrmPsLdYSr7VmKBlzQM-dGZzI38XXRL6E37GzN16kIvLgtT-s2Jj8-_0_ align="left")

মনে করেন আপনার দোকানে অনেক কোম্পানির ফোন আছে | এখন ইউজার তো সব কোম্পানির ফোন কিনবে না, সে যেন একটি কোম্পানি সিলেক্ট করে এই টাইপের অপশন গুলো তৈরি করতে আমরা select tag  ব্যবহার করব |

**optgroup  ট্যাগের ব্যবহার এবং আউটপুট**:

&lt;form action="#"&gt;

&lt;label for="cars"&gt;Choose a car:&lt;/label&gt;

&lt;select name="cars" id="cars"&gt;

&lt;optgroup label="Swedish Cars"&gt;

&lt;option value="volvo"&gt;Volvo&lt;/option&gt;

&lt;option value="saab"&gt;Saab&lt;/option&gt;

&lt;/optgroup&gt;

&lt;optgroup label="German Cars"&gt;

&lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;

&lt;option value="audi"&gt;Audi&lt;/option&gt;

&lt;/optgroup&gt;

&lt;/select&gt;

&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;input type="submit" value="Submit"&gt;

&lt;/form&gt;

![](https://lh6.googleusercontent.com/bYq_dLPlz4epDaZuXwpLOZvn7BApQKvue8iWHYkS7mV4M-xS3fGxSVj-pMgs6fKAsifRdP3FfpPe5zok5nbDwO60lVhkb67fZO34hYcP93oxER57Uas3Ssjr2kSxP1qU1LzdMMgp7t3tYWSuNu8QFl_qnD6iMt9BPyv4jQpydzsQltD5lLhJ_2rky-ax align="left")

**fieldset  ট্যাগের ব্যবহার এবং আউটপুট**:

&lt;form action="#"&gt;

&lt;fieldset&gt;

&lt;legend&gt;Personal Information:&lt;/legend&gt;

&lt;label for="fname"&gt;First name:&lt;/label&gt;

&lt;input type="text" id="fname" name="fname"&gt;&lt;br&gt;&lt;br&gt;

&lt;label for="lname"&gt;Last name:&lt;/label&gt;

&lt;input type="text" id="lname" name="lname"&gt;&lt;br&gt;&lt;br&gt;

&lt;label for="email"&gt;Email:&lt;/label&gt;

&lt;input type="email" id="email" name="email"&gt;&lt;br&gt;&lt;br&gt;

&lt;label for="birthday"&gt;Birthday:&lt;/label&gt;

&lt;input type="date" id="birthday" name="birthday"&gt;&lt;br&gt;&lt;br&gt;

&lt;input type="submit" value="Submit"&gt;

&lt;/fieldset&gt;

&lt;/form&gt;

![](https://lh5.googleusercontent.com/iX-YxgUqbDntc3DmEqdNGyQyDuCzZ0aMz1RKkaIJSAD8bqnygoWAlI7BFCMfZsENu7gd60_OMj3GxW8IvlpW-V3fOYQtNg3Y3NSyvTa0DmTncMvzGZVwlqABt0udmU-hF8On0OpGtky0lDcS1NglnfJQjdTKIJzRwc4Ngt9jv81EkMUme-HavQkBAIqz align="left")

Fieldset tag ব্যবহার করে আমরা চারিদিকে দাগ নিয়ে আসতে পারি এবং ওই দাগের উপর লেখা রাখতে পারে শিরোনাম হিসেবে |

**ব্রাউজার সমর্থন:**

![](https://lh3.googleusercontent.com/SjDAt4Sx_uu08KtYtTl3Y1NV0P_Xt6SsgaZka65JStzxpfrVuEtK9cStBr1XP8PzzRq8gAm4vy61wWAWoMhr9tz4Ba4NAspt-Dc-DL6GqAONMiMr__l3gQ-XxFy3XBODrvRRUW4IMwsKwHyDqoaWMvb-IG8ufU5XechE_bRLA-gL6FGw0O1wRQ_f2KU- align="left")

**HTML এ অ্যাট্রিবিউট ট্যাগ কি?**

এইচটিএমএল অ্যাট্রিবিউট হলো একটি এইচটিএমএল এলিমেন্ট টাইপের একটি পরিবর্তনকারী। একটি অ্যাট্রিবিউট হয় একটি উপাদান প্রকারের ডিফল্ট কার্যকারিতা পরিবর্তন করে বা নির্দিষ্ট উপাদানের প্রকারগুলিকে কার্যকারিতা প্রদান করে যা সেগুলি ছাড়া সঠিকভাবে কাজ করতে অক্ষম৷ HTML সিনট্যাক্সে, একটি HTML স্টার্ট ট্যাগে একটি বৈশিষ্ট্য যোগ করা হয়।

**ফর্ম ট্যাগ এট্রিবিউট :**

<table><tbody><tr><td colspan="1" rowspan="1"><p><strong>Attribute</strong></p></td><td colspan="1" rowspan="1"><p><strong>Value</strong></p></td><td colspan="1" rowspan="1"><p><strong>Description</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_accept_charset.asp" style="pointer-events: none">accept-charset</a></p></td><td colspan="1" rowspan="1"><p>character_set</p></td><td colspan="1" rowspan="1"><p>ফর্ম জমা দেওয়ার জন্য ব্যবহার করা অক্ষর এনকোডিংগুলি নির্দিষ্ট করে৷</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_action.asp" style="pointer-events: none">action</a></p></td><td colspan="1" rowspan="1"><p>URL</p></td><td colspan="1" rowspan="1"><p>একটি ফর্ম জমা দেওয়ার সময় ফর্ম-ডেটা কোথায় পাঠাতে হবে তা নির্দিষ্ট করে৷</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_autocomplete.asp" style="pointer-events: none">autocomplete</a></p></td><td colspan="1" rowspan="1"><p>on, off</p></td><td colspan="1" rowspan="1"><p>একটি ফর্ম স্বয়ংসম্পূর্ণ চালু বা বন্ধ থাকা উচিত কিনা তা নির্দিষ্ট করে৷</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_enctype.asp" style="pointer-events: none">enctype</a></p></td><td colspan="1" rowspan="1"><p>application/x-www-form-urlencoded</p></td><td colspan="1" rowspan="1"><p>সার্ভারে জমা দেওয়ার সময় ফর্ম-ডেটা কীভাবে এনকোড করা উচিত তা নির্দিষ্ট করে (শুধু পদ্ধতি="পোস্ট" এর জন্য)</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_method.asp" style="pointer-events: none">method</a></p></td><td colspan="1" rowspan="1"><p>get, post</p></td><td colspan="1" rowspan="1"><p>ফর্ম-ডেটা পাঠানোর সময় ব্যবহার করার জন্য HTTP পদ্ধতি নির্দিষ্ট করে</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_name.asp" style="pointer-events: none">name</a></p></td><td colspan="1" rowspan="1"><p>text</p></td><td colspan="1" rowspan="1"><p>একটি ফর্মের নাম নির্দিষ্ট করে</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_target.asp" style="pointer-events: none">target</a></p></td><td colspan="1" rowspan="1"><p>_blank</p></td><td colspan="1" rowspan="1"><p>ফর্ম জমা দেওয়ার পরে প্রাপ্ত প্রতিক্রিয়াটি কোথায় প্রদর্শন করতে হবে তা নির্দিষ্ট করে</p></td></tr><tr><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/tags/att_form_novalidate.asp" style="pointer-events: none">novalidate</a></p></td><td colspan="1" rowspan="1"><p>novalidate</p></td><td colspan="1" rowspan="1"><p>এই বুলিয়ান অ্যাট্রিবিউটটি উল্লেখ করে যে জমা দেওয়ার সময় ফর্মটি যাচাই করা হবে না।</p></td></tr></tbody></table>

**এই ছিল আজকের পোস্টটি ভাল লাগলে অবশ্যই জানাবেন তাহলে পরবর্তীতে আবারও পোস্ট নিয়ে  উপস্থিত হব আপনাদের মাঝে…**
