Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Kali ini kita masih akan melanjutkan Tutorial sebelumnya tentang Elemen - elemen pada form HTML. Namun kali ini, kita akan mempelajari beberapa elemen baru pada form HTML5. 

Ada beberapa elemen yang tidak ada sebelumnya, namun ditambahkan pada versi HTML5. Yaitu :

• <datalist>
• <keygen>
• <output>

A. <DATALIST>

Elemen <datalist> berfungsi untuk memberikan opsi pada elemen <input>

Lebih jelasnya silahkan coba script berikut :

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

Penjelasan :

• Pertama, kita membuat dua elemen di dalam elemen <form>, yaitu elemen <input> dam elemen <datalist>.
• Kemudian kita menambahkan atribut list pada elemen <input> yang telah kita buat.
• Setelah itu kita membuat elemen <datalist> dengan atribut id. Catatan penting adalah value dari atribut list pada elemen input harus sama dengan value dari atribut id pada elemen datalist. Misalnya, kita lihat pada contoh di atas, atribut list pada elemen <input> dan id pada <datalist> sama-sama saya beri nama browser. Jika tidak demikian, maka elemen <datalist> ini tidak akan muncul.
• Terakhir, di antara tag pembuka <datalist> dan tag penutup </datalist> kita masukkan opsi-opsi yang ingin kita masukkan. Seperti pada contoh di atas, datalist akan memunculkan opsi Internet Explorer, Firefox, Chrome, Opera, dan Safari

Berikut tampilan yang dihasilkan :

Catatan :

• Elemen datalist tidak akan muncul pada Internet Explorer dan sebelumnya.

B. <KEYGEN>

Elemen <keygen> digunakan untuk melakukan otentikasi user. Elemen <keygen> akan memiliki value  berupa key-pair generator . Ketika form di-submit, akan ada dua kunci yang digenerasi. Yaitu ptivate key dan public key. Private key akan disimpan lokal, sedangkan public key akan disimpan di server. Public key ini akan berguna untuk otentikasi user jika dibutuhkan.

Contoh penggunaannya adalah sebagai berikut :

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

Berikut tampilan yang dihasilkan :

C. <OUTPUT>

Elemen <output> digunakan untuk menampilkan secara otomatis hasil kalkulasi matematika yang dijalankan oleh sebuah script. Contoh :

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

Penjelasan :

• Pada script di atas, kita membuat sebuah form yang dilengkapi dengan javascript oninput="x.value=parseInt(a.value)+parseInt(b.value)
• Untuk saat ini, kita tidak perlu pusing dengan javascript di atas, kita akan mempelajarinya nanti. Yang perlu diketahui, Javascript tersebut berfungsi untuk melakukan pertambahan antara a dan b dan menghasilkan x
• a adalah nama dari input pertama, dilihat dari atribut name="a"
• b adalah nama dari input kedua, dilihat dari atribut name="b"
• hasil dari penjumlahan a dan b akan menjadi x. X akan ditampilkan pada elemen output di mana kita lihat terdapat atribut name=x.

Berikut tampilan dari hasil script di atas :

Demikian seri belajar HTML Part 3 tentang Elemen baru pada form HTML5, semoga bermanfaat.

Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.