1. Elemen <form>
HTML forms digunakan untuk mengumpulkan data yang dimasukan/diinputkan oleh user. Elemen form terdiri dari berbagai macam elemen seperti input, checkbox, tombol radio, tombol submit, dan banyak lagi.
Membuat Form dengan HTML5
2. Elemen <input>
Merupakan bentuk elemen paling penting di dalam elemen form. <input> elemen memiliki banyak variasi, tergantung pada jenis atributnya.
Berikut adalah jenis-jenis yang digunakan dalam bab ini:
| Type | Description |
|--------|----------------------------------------------------------------|
| text | Defines normal text input |
| radio | Defines radio button input (for selecting one of many choices) |
| submit | Defines a submit button (for submitting the form) |
3. Input Text
<input type = "text"> mendefinisikan sebuah baris input bertipe text.
4. Tombol Submit
<input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir ke form - handler. form - handler biasanya halaman server dengan script untuk memproses input data.
5. Group Data Formulir <fieldset>
- Elemen <fieldset> mengelompokan data yang terkait dalam form.
- Elemen <legend> mendefinisikan keterangan untuk elemen
<fieldset>.
6. Atribut Form HTML
| Attribute | Description |
|----------------|-------------------------------------------------------------------------------------|
| accept-charset | Specifies the charset used in the submitted form (default: the page charset). |
| action | Specifies an address (url) where to submit the form (default: the submitting page). |
| autocomplete | Specifies if the browser should autocomplete the form (default: on). |
| enctype | Specifies the encoding of the submitted data (default: is url-encoded). |
| method | Specifies the HTTP method used when submitting the form (default: GET). |
| name | Specifies a name used to identify the form (for DOM usage: document.forms.name). |
| novalidate | Specifies that the browser should not validate the form. |
| target | Specifies the target of the address in the action attribute (default: _self). |
Contoh Form Sederhana HTML5
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<title>Membuat Formulir</title>
</head>
<body>
<h2>Isi Biodata Berikut Ini :</h2>
<form method ="post" action="">
<fieldset>
<legend>Data Pribadi : </legend>
<label for="nama">Nama Lengkap</label>
<input id ="nama" name ="nama" type="text" placeholder="Nama Lengkap Anda" pattern ="A-Z]{3}[0-9]{4}"/><br>
<br/>
<label for="Kota">Kota</label>
<input id ="Kota" type="text" name ="Kota" size ="40" list="daftarkota" placeholder="Kota Anda"/>
<datalist id="daftarkota">
<option value="Bantul">
<option value="Gunung Kidul">
<option value="Kulon Progo">
<option value="Sleman">
<option value="Yogyakarta">
</datalist>
<br>
<br/>
<label for="tgllahir">Tanggal Lahir</label>
<input id ="tgllahir" type="date" name ="tgllahir" size ="40" placeholder="Tanggal Lahir"/><br>
<br/>
<label for="jarak">Jarak Rumah Kekampus</label>
<input id ="jarak" type="number" name ="jarak" min="1" max="100" step="1" value="2"
size ="40" placeholder="Jarak"/><label>km</label>
<br>
</br>
<label for="warna">Warna Kesukaan</label>
<input id ="warna" type="color" name ="warna" size ="40" list="warna" placeholder="warna"/>
<br>
</br>
</fieldset>
<fieldset>
<legend>Kotntak Person :</legend>
<label for="email">Email Address</label>
<input id ="email" name ="email" type="email" placeholder="anything@example.com"/><br>
</br>
<label for="telp">Phone Number</label>
<input id ="telp" name ="telp" type="tel" placeholder="+xx"/><br>
</br>
</fieldset>
<fieldset>
<legend>User Akses : </legend>
<label for="uid">User ID</label>
<input id ="uid" name ="uid" type="text" required/><br><br>
<label for="key">Password</label>
<input id ="key" name ="key" type="password" required/><br>
</fieldset>
</form>
<br>
<input type ="submit" name="www" value="Kirim"/>
</body>
</html>
Hasilnya sebagaimana ditunjukan pada gambar di atas.
