path: root/files/id/learn/forms/index.html

---
title: HTML forms guide
slug: Web/Guide/HTML/Forms
translation_of: Learn/Forms
---
<p><span class="seoSummary">Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML.</span> Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!</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">Form HTML pertama saya</a></li>
  <li><span><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">Cara membuat struktur form HTML</a></span></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 Widget native</span></a></li>
  <li>CSS dengan form HTML
    <ol>
      <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Pemberian style form HTML</span></a></li>
      <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Pemberian style form HTML Lanjut</a></li>
      <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabel kompatibilitas property widget form</a></li>
    </ol>
  </li>
  <li><span><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Mengirim dan menerima data form</a></span></li>
  <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validasi data form</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">Bagaimana cara membuat gidget form buatan</a></li>
  <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Mengirimkan form melalui 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">Menggunakan object FormData</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="Dokumentasi_HTML">Dokumentasi HTML</h2>
<h3 id="Elemen-elemen_HTML">Elemen-elemen HTML</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;">Elemen <code>button</code> menampilkan tombol yang dapat diklik.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
      <td style="vertical-align: top;">Elemen <span style="font-family: Courier New;">datalist</span> menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
      <td style="vertical-align: top;"><span style="font-family: Courier New;">fieldset</span> digunakan untuk menggabungkan beberapa elemen form dalam sebuah 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;">Elemen <code>form</code> merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke 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;">Elemen <code>input</code> digunakan untuk membuat kontrol interaktif untuk form.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
      <td style="vertical-align: top;">Elemen <code>keygen</code> memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
      <td style="vertical-align: top;">Elemen <code>label</code> merepresentasikan judul dari sebuah item dalam antar muka user</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
      <td style="vertical-align: top;">Elemen <code>legend</code> merepresentasikan judul utama dari konten parentnya {{ 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;">Elemen <code>meter</code> merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
      <td style="vertical-align: top;">Elemen <code>optgroup </code>membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
      <td style="vertical-align: top;">Elemen HTML<em> </em><code>option<em> </em></code>digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
      <td style="vertical-align: top;">Element <code>output</code> merepresentasikan hasil dari sebuah kalkulasi.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
      <td style="vertical-align: top;">Element <code>progress</code> digunakan untuk menampilkan progress dari sebuah tugas.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
      <td style="vertical-align: top;">Elemen <code>select</code> merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
      <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
      <td style="vertical-align: top;">Elemen <code>textarea</code> merepresentasikan sebuah kontrol edit dengan multi baris.</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>