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.
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)
|
Input Text
< input type = "text" > mendefinisikan sebuah baris input bertipe text.
Tombol Submit
< input type = "submit " > mendefinisikan tombol untuk
mengirimkan formulir ke form - handler. form - handler biasanya halaman
server dengan script untuk memproses input data.
Group Data Formulir < fieldset >
Elemen < fieldset > mengelompokan data yang terkait dalam form.
Elemen < legend > mendefinisikan keterangan untuk elemen < fieldset > .
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> |
|
| <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> |
|
Hasilnya sebagaimana ditunjukan pada gambar di atas.
sumber:http://www.gatewan.com/2015/08/cara-membuat-form-html5-sederhana.html#axzz3kZLZMIfL