Input Type Pada Form HTML - teknik komputer dan jaringan

Jenis Input Type dalam Membuat Form- Postingan ini adalah kelanjutan dari pembahasan cara membuat form pada postingan sebelumnya. Sebelumnya sinahu coding membahas Pengenalan HTML Form, Attribute pada HTML Form, dan Membuat Form multi select. Pada postingan tersebut juga sudah dibahas sedikit jenis input type yang digunakan dalam membuat form

Input Type Number

Jenis input type ini digunakan untuk bidang input yang berisi nilai numerik. Seperti contoh berikut :


<p>
Berapa jumlah mantan pacar kamu sampai saat ini?
</p>
<br>
<form action="action_page.php">
  Jumlah :
  <input type="number" name="jumlah"  min="10" max="100" step="10" value="10">
  <input type="submit">
</form>

hasilnya :

Berapa jumlah mantan pacar kamu sampai saat ini?

Kita juga bisa mengatur batasan nomornya, dari berapa sampai angka berapa. Pada contoh tersebut saya mengatur angka minimalnya dimulai dari 10 dan batas maksimalnya 100. Selain itu juga bisa mengatur step, jarak perpindahan atau kelipatan dari satu angka ke angka berikutnya. Pada contoh tersebut saya mengatur step nya adalah 10. Maka perpindahan ke angka selanjutnya adalah kelipatan 10.

Input Type Date

Seperti namanya, date adalah tanggal. Maka fungsinya adalah untuk kebutuhan bidang input tanggal. Sering kita jumpai input type jenis ini untuk proses sign up yang memerlukan data tanggal lahir anggotanya.


<form action="action.php">
  Tanggal Lahir:
  <input type="date" name="bday">
  <input type="submit">
</form>

hasilnya :

Input Type Password

Kalau ini sudah jelas, fungsinya untuk bidang input password. Sehingga kalau kita tuliskan huruf atau nomor pada bidang tersebut maka tidak akan terlihat. Di bawah ini saya berikan contoh format kolom komentar yang cara pengisiannya juga harus menyertakan username dan password.


<form action="action.php">
<textarea name="message" rows="10" cols="50">
Tuliskan komentar di sini ...
</textarea>
<br>
Username:<br>
<input type="text" name="userid">
<br>
Password:<br>
<input type="password" name="psw">
<br><br>
<input type="submit" value="submit">
</form>

hasilnya :

Input Type Checkbox

Yang satu ini juga sering kita jumpai. Memberikan tanda centang pada beberapa pilihan. Hampir sama dengan input type radio yang pernah kita bahas sebelumnya. Hanya saja jika input type radio itu hanya satu opsi yang bisa dijadikan pilihan, sedangkan checkbox ini bisa memilih satu atau lebih dari sejumlah pilihan yang ada.


<p>
Di bawah ini adalah makanan favorit saya :
</p>
<br>
<form action="action.php">
<input type="checkbox" name="pet" value="kucing">Kucing
<br>
<input type="checkbox" name="pet" value="kelinci">Kelinci 
<br>
<input type="checkbox" name="pet" value="kucing">Ayam
<br>
<input type="checkbox" name="pet" value="kelinci">Burung 
<br>
<input type="checkbox" name="pet" value="kucing">Kampret
<br>
<input type="checkbox" name="pet" value="kelinci">Monyet 
<br><br>
<input type="submit">
</form>

hasilnya :

Di bawah ini adalah makanan favorit saya :

Untuk sementara cukup itu saja dulu jenis-jenis input type dalam membuat form yang bisa saya share di sinahu coding kali ini. Sudah capek ngetiknya. Hemat bahan juga. hehe..