---
title: HTML forms guide
slug: Learn/Forms
tags:
- NeedsReview
translation_of: Learn/Forms
original_slug: Web/Guide/HTML/Forms
---
<p>এই সহায়িকা হচ্ছে একটি সামগ্রিক নির্দেশিকা যা আপনাকে মাষ্টার<span style="background-color: #40e0d0;"> HTML</span> form তৈরি করতে সাহায্য করবে । <span id="result_box" lang="bn"><span class="hps"><span style="background-color: #00ffff;">HTML</span> from</span> <span class="hps">ব্যবহারকারীদের সাথে</span> <span class="hps">আলাপচারিতার</span> <span class="hps">জন্য খুব</span> <span class="hps">শক্তিশালী হাতিয়ার</span> <span class="hps">হয়</span></span> না । <span id="result_box" lang="bn"><span class="hps">এই সহায়িকার মধ্যে,<span style="background-color: #00ffff;"> </span></span><span id="result_box" lang="bn"><span class="hps"><span style="background-color: #00ffff;">HTML</span></span> from <span class="hps">হতে </span></span><span class="hps">আমরা</span> <span class="hps">কাস্টম উইজেট</span> <span class="hps">করার</span> <span class="hps">পরিচালনার</span> <span class="hps">তথ্য</span> <span class="hps">থেকে</span> <span class="hps">কাঠামো</span> <span class="hps">থেকে</span> <span class="hps">স্টাইলিং</span> <span class="hps">করার</span></span>। তুমি এই শক্তিশালি অফার শিখতে এবং উপভোগে পারবে।</p>
<h2 id="বর্ন_মালা">বর্ন মালা</h2>
<ol>
<li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">আমার প্রথম HTML form</a></li>
<li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>HTML form </span></a>কি ভাবে গঠন করতে হয় </li>
<li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>নেটিভ form <span id="result_box" lang="bn"><span class="hps">উইজেট</span></span></span></a></li>
<li>CSS সাথে HTML forms
<ol>
<li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>HTML forms</span></a> এর উন্নতি</li>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms"> HTML forms উন্নতির ধরন</a></li>
<li> উইজেট এর টেবিল হতে <a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property </a>শামাযশ্যতা</li>
</ol>
</li>
<li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>তথ্য হতে </span></a>পাঠাতে এবং চেষ্টা করতে</li>
<li> তথ্য হতে বৈধতা</li>
<li> উইজেট হতে কিভাবে coustom তৈরি করতে হয়</li>
<li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript"> JavaScript কি ভাবে নিক্ষেপ করতে হয়</a>
<ol>
<li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">ডাটা অবজে</a>কট কিভাবে ব্যাবহার করতে হয়</li>
</ol>
</li>
<li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML হতে <span id="result_box" lang="bn"><span class="hps">ব্রাউজারে </span></span></a></li>
</ol>
<h2 id="HTML_Documentation">HTML Documentation</h2>
<h3 id="HTML_Elements">HTML Elements</h3>
<table>
<thead>
<tr>
<th scope="col">Element</th>
<th scope="col">Related DOM interface</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top;">{{HTMLElement("button")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
<td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
<td style="vertical-align: top;">The <span style="font-family: Courier New;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
<td style="vertical-align: top;">The <span style="font-family: Courier New;">fieldset</span> is used to group several form elements within a form.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("form")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
<td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enable a user to submit information to a web server.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("input")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
<td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
<td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("label")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
<td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
<td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
<td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
<td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("option")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
<td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("output")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
<td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
<td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("select")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
<td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td>
</tr>
<tr>
<td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
<td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
<td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p>
</div>
<h3 id="HTML_Attributes">HTML Attributes</h3>
<table class="standard-table">
<thead>
<tr>
<th>Attribute Name</th>
<th>Elements</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>accept</td>
<td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
<td>List of types the server accepts, typically a file type.</td>
</tr>
<tr>
<td style="white-space: nowrap;">accept-charset</td>
<td>{{ HTMLElement("form") }}</td>
<td>List of supported charsets.</td>
</tr>
<tr>
<td>action</td>
<td>{{ HTMLElement("form") }}</td>
<td>The URI of a program that processes the information submitted via the form.</td>
</tr>
<tr>
<td>autocomplete</td>
<td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
<td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td>
</tr>
<tr>
<td>autofocus</td>
<td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
<td>The element should be automatically focused after the page loaded.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>challenge</td>
<td>{{ HTMLElement("keygen") }}</td>
<td>A challenge string that is submitted along with the public key.</td>
</tr>
<tr>
<td>checked</td>
<td>{{ HTMLElement("input") }}</td>
<td>Indicates whether the element should be checked on page load.</td>
</tr>
<tr>
<td>cols</td>
<td>{{ HTMLElement("textarea") }}</td>
<td>Defines the number of columns in a textarea.</td>
</tr>
<tr>
<td>data</td>
<td>{{ HTMLElement("object") }}</td>
<td>Specifies the URL of the resource.</td>
</tr>
<tr>
<td>dirname</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
<td> </td>
</tr>
<tr>
<td>disabled</td>
<td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
<td>Indicates whether the user can interact with the element.</td>
</tr>
<tr>
<td>enctype</td>
<td>{{ HTMLElement("form") }}</td>
<td>Defines the content type of the form date when the <code>method</code> is POST.</td>
</tr>
<tr>
<td>for</td>
<td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
<td>Describes elements which belongs to this one.</td>
</tr>
<tr>
<td>form</td>
<td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
<td>Indicates the form that is the owner of the element.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>high</td>
<td>{{ HTMLElement("meter") }}</td>
<td>Indicates the lower bound of the upper range.</td>
</tr>
<tr>
<td>keytype</td>
<td>{{ HTMLElement("keygen") }}</td>
<td>Specifies the type of key generated.</td>
</tr>
<tr>
<td>list</td>
<td>{{ HTMLElement("input") }}</td>
<td>Identifies a list of pre-defined options to suggest to the user.</td>
</tr>
<tr>
<td>low</td>
<td>{{ HTMLElement("meter") }}</td>
<td>Indicates the upper bound of the lower range.</td>
</tr>
<tr>
<td>max</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
<td>Indicates the maximum value allowed.</td>
</tr>
<tr>
<td>maxlength</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
<td>Defines the maximum number of characters allowed in the element.</td>
</tr>
<tr>
<td>method</td>
<td>{{ HTMLElement("form") }}</td>
<td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td>
</tr>
<tr>
<td>min</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
<td>Indicates the minimum value allowed.</td>
</tr>
<tr>
<td>multiple</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
<td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
</tr>
<tr>
<td>name</td>
<td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
<td>Name of the element. For example used by the server to identify the fields in form submits.</td>
</tr>
<tr>
<td>novalidate</td>
<td>{{ HTMLElement("form") }}</td>
<td>This attribute indicates that the form shouldn't be validated when submitted.</td>
</tr>
<tr>
<td>optimum</td>
<td>{{ HTMLElement("meter") }}</td>
<td>Indicates the optimal numeric value.</td>
</tr>
<tr>
<td>pattern</td>
<td>{{ HTMLElement("input") }}</td>
<td>Defines a regular expression which the element's value will be validated against.</td>
</tr>
<tr>
<td>placeholder</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
<td>Provides a hint to the user of what can be entered in the field.</td>
</tr>
<tr>
<td>readonly</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
<td>Indicates whether the element can be edited.</td>
</tr>
<tr>
<td>required</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
<td>Indicates whether this element is required to fill out or not.</td>
</tr>
<tr>
<td>rows</td>
<td>{{ HTMLElement("textarea") }}</td>
<td>Defines the number of rows in a textarea.</td>
</tr>
<tr>
<td>selected</td>
<td>{{ HTMLElement("option") }}</td>
<td>Defines a value which will be selected on page load.</td>
</tr>
<tr>
<td>size</td>
<td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
<td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
</tr>
<tr>
<td>src</td>
<td>{{ HTMLElement("input") }}</td>
<td>The URL of the embeddable content.</td>
</tr>
<tr>
<td>step</td>
<td>{{ HTMLElement("input") }}</td>
<td> </td>
</tr>
<tr>
<td>target</td>
<td>{{ HTMLElement("form") }}</td>
<td> </td>
</tr>
<tr>
<td>type</td>
<td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
<td>Defines the type of the element.</td>
</tr>
<tr>
<td>usemap</td>
<td>{{ HTMLElement("input") }}</td>
<td> </td>
</tr>
<tr>
<td>value</td>
<td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
<td>Defines a default value which will be displayed in the element on page load.</td>
</tr>
<tr>
<td>wrap</td>
<td>{{ HTMLElement("textarea") }}</td>
<td>Indicates whether the text should be wrapped.</td>
</tr>
</tbody>
</table>
<h3 id="Normative_reference">Normative reference</h3>
<ul>
<li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
</ul>