Elemen Formulir HTML

Bab ini mendeskripsikan semua elemen formulir HTML.

Element <input>

Elemen yang paling penting dalam formulir adalah <input> Element.

Element <input> menurut type Atribut, dapat berubah menjadi berbagai bentuk.

Keterangan:Bab berikutnya akan menggambarkan semua tipe input HTML.

Element <select> (daftar turun)

<select> Element mendefinisikanDaftar turun:

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>

Coba Sendiri

<option> Element mendefinisikan opsi yang dipilih.

Daftar biasanya akan menampilkan opsi pertama sebagai opsi yang dipilih.

Anda dapat mendefinisikan opsi yang ditetapkan dengan menambahkan atribut selected.

Contoh

<option value="fiat" selected>Fiat</option>

Coba Sendiri

Element <textarea>

<textarea> Element mendefinisikan bidang input teks berbaris (Kotak teks）：

Contoh

<textarea name="message" rows="10" cols="30">
Kucing bermain di taman.
</textarea>

Coba Sendiri

Kode HTML di atas akan ditampilkan di peramban seperti ini:

Kucing bermain di taman.

Elemen <button>

<button> Elemen menentukan tombol yang dapat diklikTombol:

Contoh

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

Coba Sendiri

Kode HTML di atas akan ditampilkan di peramban seperti ini:

Elemen Formulir HTML5

HTML5 menambahkan elemen formulir berikut:

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

Keterangan:Secara default, peramban tidak menampilkan elemen yang tak dikenal. Elemen yang baru tidak akan merusak halaman Anda.

Elemen <datalist> HTML5

<datalist> Elemen yang menentukan daftar pilihan yang ditetapkan untuk elemen <input>.

Pengguna akan melihat daftar pilihan yang ditetapkan muncul saat mereka memasukkan data.

elemen <input>. list Atribut harus merujuk kepada elemen <datalist> yang diidentifikasi oleh id Atribut.

Contoh

Atur elemen <input> dengan nilai yang ditetapkan melalui <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>

Coba Sendiri