Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Jenis Input Type dalam Membuat Form (Bag 1)

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.

Sekarang sinahu coding melanjutkan kembali dengan jenis-jenis input type yang lain. Cukup banyak jumlahnya dengan fungsinya yang juga beragam. Sebagian besar sering kita jumpai pada format pengisian formulir online.

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?


Jumlah :

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 :

Tanggal Lahir:

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 :


Username:

Password:



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 :


Kucing
Kelinci
Ayam
Burung
Kampret
Monyet


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



2 Komentar untuk "Jenis Input Type dalam Membuat Form (Bag 1)"

Terimakasih atas infonya gan, sangat bermanfaat.
Download Kumpulan Lagu Terbaru 2016 Gratis.
KLIK: Freedomp3 - Download Kumpulan Lagu Terbaru Gratis

Back To Top