HTML5 mempunyai elemen baru seperti dibawah ini :
- <datalist>
- <keygen>
- <output>
Tapi tidak semua browser support elemen baru. Walaupun begitu, kita bisa memulai menggunakan mereka. Karena, apabila browser tidak support, maka elemen baru tersebut diberlakukan seperti teks biasa.
HTML5 <datalist> Elemen
Unsur <datalist> menetapkan daftar yang telah ditentukan pilihan untuk elemen <input>.
Unsur <datalist> digunakan untuk menyediakan sebuah “AutoComplete” fitur pada elemen <input>. Pengguna akan melihat daftar drop-down yang telah ditentukan pilihan karena mereka input data. Gunakan atribut daftar elemen <input> untuk mengikat bersama-sama dengan elemen <datalist>.
<!DOCTYPE html>
<html>
<body>
<form action=”demo_form.asp” method=”get”>
<input list=”browsers” name=”browser” />
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<input type=”submit” />
</form>
</body>
</html>
HTML5 <keygen> Element
Tujuan dari elemen <keygen> adalah untuk menyediakan cara aman untuk otentikasi pengguna.
Tag <keygen> menentukan bidang key generator-pair dalam formulir.
Bila formulir dikirimkan, dua tombol yang dihasilkan, satu publik dan satu pribadi. 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.
<!DOCTYPE html>
<html>
<body>
<form action=”demo_keygen.asp” method=”get”>
Username: <input type=”text” name=”usr_name” />
Encryption: <keygen name=”security” />
<input type=”submit” />
</form>
</body>
</html>
HTML5 <output> Element
Html5 elemen <output> digunakan untuk merepresentasikan hasil dari perhitungan :
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
<!DOCTYPE html>
<html>
<body>
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<input type=”range” name=”a” value=”50″ />100
+<input type=”number” name=”b” value=”50″ />
=<output name=”x” for=”a b”></output>
</form>
</body>
</html>
0 comments:
Post a Comment