Elemen <input> dapat bervariasi dalam banyak hal, tergantung pada atribut tipe.
Elemen <select> (Daftar Drop-Down)
Elemen <select> mendefinisikan daftar drop-down:
Contoh
<Select name = "cars">
<option value = "volvo"> Volvo </option>
<option value = "saab"> Saab </option>
<option value = "fiat"> Fiat </option>
<option value = "audi"> Audi </option>
</select>
Elemen <option> menentukan pilihan yang akan dipilih.
Daftar ini biasanya akan menampilkan item pertama yang dipilih.
Anda dapat menambahkan atribut yang dipilih untuk menentukan opsi yang telah ditentukan.
Contoh
<option value = "fiat" selected> Fiat </option>
Elemen <textarea>
Elemen <textarea> mendefinisikan field input multi-baris (area teks):
Contoh
<textarea name = "message" rows = "10" cols = "30">
Kucing itu sedang bermain di kebun.
</textarea>
Beginilah hasil kode HTML di atas akan ditampilkan di browser:
Elemen <button>
Elemen <button> mendefinisikan tombol yang dapat diklik:
Contoh
<button type = "button" onclick = "alert ('Hello World!')"> Klik Saya! </button>
Beginilah cara kode HTML di atas akan ditampilkan di browser:
Elemen Form HTML5
HTML5 menambahkan elemen formulir berikut:
- <datalist>
- <keygen>
- <output>
Secara default, browser tidak menampilkan elemen yang tidak diketahui. Elemen baru tidak akan menghancurkan halaman Anda.
Elemen HTML5 <datalist>
Elemen <datalist> menentukan daftar opsi yang telah ditentukan sebelumnya untuk elemen <input>.
Pengguna akan melihat daftar drop-down pilihan yang telah ditentukan saat mereka memasukkan data.
Atribut daftar elemen <input>, harus merujuk ke atribut id elemen <datalist>.
Opera, Safari, Chrome, Firefox, Internet Explorer
Contoh
Elemen <input> dengan nilai yang telah ditentukan sebelumnya dalam <datalist>:
<form action = "action_page.php">Elemen HTML5 <keygen>
<input list = "browser">
<datalist id = "browser">
<option value = "Internet Explorer">
<option value = "Firefox">
<option value = "Chrome">
<option value = "Opera">
<option value = "Safari">
</datalist>
</form>
Tujuan elemen <keygen> adalah memberikan cara aman untuk mengotentikasi pengguna.
Elemen <keygen> menentukan field generator kunci-pasangan dalam Form.
Saat formulir diajukan, dua kunci dihasilkan, satu pribadi dan satu publik.
Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.
Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa mendatang.
OperaSafariChromeFirefoxInternet Explorer
Contoh
Sebuah formulir dengan field keygen:
<form action = "action_page.php">Elemen HTML5 <output>
Username: <input type = "text" name = "user">
Enkripsi: <keygen name = "security">
<input type = "submit">
</form>
Elemen <output> mewakili hasil perhitungan (seperti yang dilakukan oleh skrip).
OperaSafariChromeFirefoxInternet Explorer
Contoh
Lakukan perhitungan dan tampilkan hasilnya di elemen <output>:
<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" untuk = "a b"> </output>
<br> <br>
<input type = "submit">
</form>
Elemen Form HTML5
<form> Mendefinisikan sebuah form HTML untuk input pengguna
<input> Mendefinisikan sebuah kontrol input
<Textarea> Mendefinisikan kontrol input multiline (area teks)
<label> Mendefinisikan label untuk elemen <input>
<fieldset> Grup elemen terkait dalam Form
<legend> Mendefinisikan sebuah caption untuk elemen <fieldset>
<select> Mendefinisikan daftar drop-down
<optgroup> Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
<option> Mendefinisikan sebuah opsi dalam daftar drop-down
<button> Mendefinisikan sebuah tombol yang bisa diklik
<datalist> Menentukan daftar opsi yang telah ditentukan untuk kontrol masukan (baru di html5)
<keygen> Mendefinisikan field generator kunci-pasangan (untuk form) (baru di html5)
<output> Mendefinisikan hasil perhitungan (baru di html5)
Out Of Topic Show Konversi KodeHide Konversi Kode