Belajar HTML Form Part 4 - Tipe-Tipe Elemen Input

Assalamu'alaikum warohmatullaahi wabarokaatuh.
Dalam Belajar HTML kita kali ini, kita akan mempelajari tentang tipe-tipe elemen input pada form HTML. Pada HTML, kita akan mengenal beberapa tipe input dasar, yaitu :

• text
• password
• submit
• radio
• checkbox
• button

A. TEXT

Tipe input text digunakan untuk memberikan field input berupa text.

Contoh :

<form>
  Nama Depan:<br>
  <input type="text" name="namadepan"><br>
  Nama Belakang:<br>
  <input type="text" name="namabelakang">
</form>

Penjelasan :

• Dalam script HTML di atas, dengan memberikan atribut type="text", kita telah membuat dua input dengan tipe text.
• input text pertama diberi nama namadepan, dan input text kedua diberi nama namabelakang.

Coba sendiri di sini

B. PASSWORD

Tipe input password digunakan jika kita ingin inputan yang diketik pengguna tidak ditampilkan atau disembunyikan, seperti ketika menginput password.

Contoh :

<form>
  Username:<br>
  <input type="text" name="username"><br>
  Password:<br>
  <input type="password" name="password">
</form>

Penjelasan :

• Pada contoh di atas, kita membuat dua inputan. Inputan pertama adalah inputan teks biasa dengan nama username.
• Pada contoh inputan kedua, kita membuat inputan password. Apa yang kita ketik di inputan ini tidak akan ditampilkan.

Coba sendiri di sini

C. SUBMIT

Tipe input submit digunakan untuk men-submit atau mengirimkan data yang telah diisikan. Bentuk dari sebuah input tipe submit ditampilkan pada sebuah tombol / button.

Contoh :

<form action="action_page.php">
  First name:<br>
  <input type="text" name="namadepan" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="namabelakang" value="Mouse"><br><br>
  <input type="submit">
</form>

Penjelasan :

• Dalam contoh di atas, <input type="submit"> merujuk pada tombol submit yang kita buat.

Coba sendiri di sini

D. RADIO

Tipe radio digunakan untuk membuat inputan berupa pilihan. Yang mana hanya satu pilihan yang diperbolehkan.

Contoh :

<form>
  <input type="radio" name="jenis_kelamin" value="Laki-laki" checked>L<br>
  <input type="radio" name="jenis_kelamin" value="Perempuan">P<br>
  <input type="radio" name="jenis_kelamin" value="Lainnya"> Lainnya
</form>

Penjelasan :

• Pada contoh di atas, kita membuat tiga radio yang diberi nama jenis_kelamin. 
• Pilihan pertama diberi value Laki-laki, dengan teks yang ditampilkan L
• Pilihan pertama diberi value Perempuan, dengan teks yang ditampilkan P
• Pilihan pertama diberi value Lainnya, dengan teks yang ditampilkan Lainnya.

Coba sendiri di sini

E. CHECKBOX

Berbeda dengan radio, Checkbox membolehkan inputan lebih dari satu pilihan.

Contoh :

<form>
  <input type="checkbox" name="kendaraan1" value="Sepeda"> Sepeda<br>
  <input type="checkbox" name="kendaraan2" value="Mobil"> Mobil 
</form>

Penjelasan :

• Contoh di atas menunjukkan dua pilihan antara sepeda dan mobil. Kita bisa memilih salah satu ataupun keduanya.

Coba sendiri di sini

F. BUTTON

Seperti namanya, tipe input button digunakan untuk membuat sebuah button atau tombol.
Contoh :

<input type="button" onclick="alert('Hai')" value="Click Saya!">

Penjelasan :

• Contoh di atas adalah script untuk membuat sebuah button dengan kombinasi javascript.

Coba sendiri di sini

Demikian Belajar HTML tentang Tipe-Tipe Elemen Input pada form HTML. Semoga bermanfaat, terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.