CARA MEMBUAT FORM HTML5 SEDERHANA

Membuat Form dengan HTML5

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>
<!-- 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.