Belajar HTML : Tipe-Tipe Elemen Input Pada Form HTML (8) - Suka Code

Tipe-Tipe Elemen Input Pada Form HTML - Hai sob, kembali lagi bersama saya M.Ridwan. Di Part sebelum nya saya sudah menjelaskan Element Blok dan Inline, sekarang saya akan menjelaskan Tipe-Tipe Elemen Input Pada Form HTML. Kita akan mengenal beberapa tipe-tipe input dasar, yaitu :

• Text
• Password
• Submit
• Radio
• Checkbox

TEXT

Tipe input digunakan untuk memberikan field input berupa text.

Contoh dibawah ini :

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

PASSWORD

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

Contoh dibawah ini : 

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

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 dibawah ini :

<form action="kirim-data.php">
  First name:<br>
  <input type="text" name="namadepan" value="Suka"><br>
  Last name:<br>
  <input type="text" name="namabelakang" value="Code"><br><br>
  <input type="submit">
</form>

Penjelasan : 

• Dalam contoh di atas, <input type="submit"> merujuk pada tombol submit yang kita buat.
• Dalam contoh yang action="kirim-data.php" ketika si user mencet/klik si tombol/button maka data nya masuk ke si file kirim-data.php

Note : diseri ini kita belajar html dulu saja, untuk belajar php nanti saja dulu, kita fokus kan ke html dulu oke..

RADIO

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

Contoh dibawah ini :

<form>
  <input type="radio" name="nama_bahasa_nya" value="HTML" checked>HTML<br>
  <input type="radio" name="nama_bahasa_nya" value="CSS">CSS<br>
  <input type="radio" name="nama_bahasa_nya" value="Lainnya"> Lainnya
</form>

Penjelasan :

• Pada contoh di atas, kita membuat tiga radio yang diberi nama nama_bahasa_nya. 
• Pilihan pertama diberi value HTML, dengan teks yang ditampilkan HTML
• Pilihan pertama diberi value CSS, dengan teks yang ditampilkan CSS

CHECKBOX

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

Contoh dibawah ini :

<form>
  <input type="checkbox" name="bahasa" value="HTML"> HTML <br>
  <input type="checkbox" name="bahasa2" value="CSS"> CSS
</form>

Penjelasan :

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

BUTTON

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

Contoh dibawah ini :

<input type="button" onclick="alert('Ketika Button di klik dia akan memunculkan popup atau alert')" value="Klik saya dong">

Penjelasan : 

• Contoh di atas adalah script untuk membuat sebuah button dengan kombinasi javascript
• Pada contoh di atas ketika si user mencet/klik si button itu maka dia akan ada pesan alert/popup dengan ada nya kombinasi javascript. 

Sekian tutorial Tipe-Tipe Elemen Input Pada Form HTML Semoga bermanfaat buat teman-teman semua.

Muhammad Ridwan

Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.

Bagikan Artikel ini