---
title: Panduan Borang HTML
slug: Learn/Forms
translation_of: Learn/Forms
original_slug: Learn/HTML/Forms
---
<p>Welcome to the Guide to HTML Forms. This guide is a series of articles that will help you master HTML Forms. HTML Forms are a very powerful tool to interact with a user; however, due to historical and technical reasons, it's not always obvious how you use them to their full potential. In this guide, we'll cover all aspects of HTML Forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!</p>
<h2 id="Articles">Articles</h2>
<ol>
  <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">My first 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>How to structure an 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>The native form widgets</span></a></li>
  <li>CSS with HTML forms
    <ol>
      <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Styling HTML forms</span></a></li>
      <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for 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 compatibility table for form widgets</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>Sending and retrieving form data</span></a></li>
  <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a></li>
  <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to <span>build custom form widgets</span></a></li>
  <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through 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">Using the FormData object</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 forms in legacy browsers</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>