Kumpulan type form dan cara penggunaannya

Jenis Input Type 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?

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

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

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

Radio Button Input

 Type radio untuk memilih suatu pilihan dengan satu jawaban

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Hasil dari kode diatas :

 Male
 Female
 Other

 Submit Button

Bentuk - handler biasanya halaman server dengan script untuk memproses input data .

Bentuk - handler ditentukan dalam atribut action form :

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

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser :

First name:
 
Last name: