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