HTML Form Elemen

Bab ini menjelaskan semua elemen form HTML.

<Input> Elemen

Unsur bentuk yang paling penting adalah <input> elemen.
<Input> elemen dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.

<Select> Elemen (Drop-Down List)

The <pilih> elemen mendefinisikan drop-down list:

Contoh

<select name="Kampus">
<option value="Nusa Mandiri">Nusa Mandiri</option>
<option value="Bina Sarana Informatika">Bina Sarana Informatika</option>
<option value="NURI">NURI</option>
<option value="BSI">BSI</option>
</select>

Apabila dijalankan akan menjadi seperti di bawah ini :

Diatas memang tidak bisa di jalan kan select nya karena penulisan saya tidak menggunakan tag <html> untuk lebih jelasnya silahkan lihat demo nya untuk menjalankan html select tersebut.

Demo

The <textarea> Elemen

The <textarea> elemen mendefinisikan field input multi-line ( text area ):

Contoh

<textarea name="message" rows="10" cols="30">
Hallo :") Nama saya Johan Andy Agasi. Kampus saya di Nusa Mandiri, Salam Kenal ya :").
</textarea>

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

The <button> Elemen

The <button> elemen mendefinisikan aa diklik tombol :

Contoh

<button type="button" onclick="alert('Hello World!')">Klik Disini</button>

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

HTML5 <datalist> Elemen

The <datalist> elemen menentukan daftar yang telah ditentukan pilihan untuk <input> elemen.

Pengguna akan melihat daftar drop-down yang telah ditentukan pilihan karena mereka input data.

The daftar atribut dari <input> elemen, harus mengacu pada id atribut <datalist> elemen.

Contoh

Sebuah <input> elemen dengan nilai-nilai yang telah ditetapkan dalam <datalist>:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
</form>

Demo

HTML5 <keygen> Elemen

Tujuan dari <keygen> elemen adalah untuk menyediakan cara yang aman untuk mengotentikasi pengguna.

The <keygen> elemen menentukan bidang key generator-pair dalam formulir.

Ketika formulir dikirimkan, dua kunci yang dihasilkan, satu pribadi dan satu masyarakat.

Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.

Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan.

Contoh

Bentuk dengan bidang keygen:

<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>

Demo

HTML5 <keluaran> Elemen

The <Output> elemen merupakan hasil perhitungan (seperti yang dilakukan oleh script).

Contoh

Melakukan perhitungan dan menampilkan hasil dalam <keluaran> elemen:

<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range"  id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>