DaunKoder
HTML

Belajar HTML: Membuat Form dan Input di HTML

Form merupakan komponen yang berisi beberapa pertanyaan yang akan dikirimkan ke server. Form berisi Label dan Input. Label berisi pertanyaan. Sedangkan Input merupakan komponen yang memungkinkan pengguna memasukkan data. Input dapat berupa chek, radio, teks, atau file.

Tag untuk Membuat Form

Ada 3 tag yang harus kamu tahu sebelum membuat form, yaitu:

  • <form>, tag untuk membuat form
  • <label>, tag untuk membuat label
  • <input>, tag untuk membuat input

Contoh form sederhana:

<form>
    <label>Nama</label>
    <input>
    <label>Usia</label>
    <input>
</form>

Menjadi:

Form Sederhana

Mengaitkan Label dan Input

Agar setelah kita menklik label Nama, input Nama diaktifkan maka kita harus mengaitkan label Nama dengan input Nama. Caranya adalah menambah atribut for ke label dan id ke input dengan nilai yang sama. Atribut id menentukan nama ID suatu komponen. Sedangkan atribut for pada label menentukan ID input yang dikaitkan. Contoh:

<form>
    <label for="nama">Nama</label>
    <input id="nama">
<br>
    <label for="usia">Usia</label>
    <input id="usia">
</form>

Saat kita menklik label Nama, maka input Nama diaktifkan. Ini memungkinkan kita menklik label Nama langsung dapat mengubah isi Input tanpa mengeklik input.

Nama Input

Input mempunyai atribut name yang menyatakan nama input. Nilai input yang mempunyai nama akan dikirimkan ke server. Nama tidak boleh mengandung spasi. Nama ini akan digunakan sebagai nama properti yang akan dikirimkan ke server. Contoh:

<form>
    <label for="nama">Nama</label>
    <input name="nama" id="nama">
<br>
    <label for="usia">Usia</label>
    <input name="usia" id="usia">
</form>

Tipe Input

Input mempunyai atribut type yang menyatakan tipe/bentuk input. Tipe bentuk menentukan data yang dibutuhkan dan cara menampilkanya. Ada beberapa tipe input, yaitu:

text

Ini merupakan nilai default (digunakan jika atribut type tidak ditentukan). Ini akan menampilkan bidang teks. Ini digunakan untuk mendapatkan masukan data berupa teks. Contoh:

<label for="name">Nama</label>
<input name="name" type="text" id="name">

Menjadi:

Tipe Teks

checkbox

Ini akan meampilkan chek. Ini digunakan untuk mendapatkan masukan data berupa ya atau tidak. Saat dichek, ini mempunyai nilai on. Contoh:

<input name="sudah_menikah" type="checkbox" id="sudah_menikah">
<label for="sudah_menikah">Sudah Menikah</label>

Menjadi:

Tipe Chek

radio

Ini akan menampilkan radio dan digunakan untuk masukan data yang memiliki banyak pilihan. Nama input antara satu pilihan dengan pilihan lain harus sama. Pilihan membutuhkan atribut value yang berisi nilai yang diberikan ketika pilihan tersebut terplih. Contoh:

Kelamin:
<br>

<input name="kelamin" type="radio" id="kelamin_laki" value="laki">
<label for="kelamin_laki">Laki-Laki</label>

<input name="kelamin" type="radio" id="kelamin_perem" value="perempuan">
<label for="kelamin_perem">Perempuan</label>

Lulusan:
<br>

<input name="lulusan" type="radio" id="lulusan_s1" value="s1">
<label for="lulusan_s1">S1 atau Lebih</label>

<input name="lulusan" type="radio" id="lulusan_sma" value="sma">
<label for="lulusan_sma">SMA atau sederajat</label>

<input name="lulusan" type="radio" id="lulusan_smp" value="smp">
<label for="lulusan_smp">SMP atau kurang</label>

Menjadi:

Tipe Chek

button

Ini akan meampilkan button. Ini membutuhkan atribut value yang menentukan teks pada button. Contoh:

<input type="button" value="Cari Sekarang">

Menjadi:

Tipe Button

submit

Ini hampir mirip dengan button. Tapi, saat di klik akan mensubmit form. Saya akan membahas tentang mensubmit form di poin selanjutnya. Contoh

<input type="submit" value="Daftar">

Menjadi:

Tipe Chek

Lainya

Kalian dapat melihat dokumentasi MDN untuk melihat tipe input lainya.

Mensubmit Form

Mensubmit form adalah mengirimkan data ke server dengan cara menuju url baru. Untuk menentukan URL yang dituju kita bisa mengisi atribut action. Untuk menentukan metode HTTP yang digunakan kita bisa mengisi atribut method. Atribut ini hanya dapat diisi dengan get atau post. Saat nilainya get maka data akan ditaruh pada HTTP Query (URL) sedangkan jika post data akan ditaruh pada HTTP Request Body. Misal:

<form action="/signup" method="get">
    <label for="nama">Nama</label>
    <input name="nama" id="nama">
    <br>
    <label for="usia">Usia</label>
    <input name="usia" id="usia">
    <input type="submit" value="Daftar">
</form>

Form

Saat Daftar diklik maka akan menuju url /signup?nama=Levi&usia=10. ?nama=Levi&usia=10 merupakan HTTP query. Jika kita merubah nilai method menjadi post dan mengulanginya seperti tadi. Maka, akan menuju url /signup. Lalu datanya ditaruh dimana?. Datanya ditaruh pada HTTP Request Body dan tidak akan bisa dilihat user.

Membuat Form Signup

Kita dapat menggunakan form untuk membuat form signup sederhana, seperti ini:

<form action="/signup" method="get">
    <label for="email">Email</label>
    <input name="email" id="email">
    <br>

    <label for="password">Password</label>
    <input name="password" id="password">
    <br>

    <input name="private" type="checkbox" id="private">
    <label for="private">Akun Privat</label>
    <br>

    Kelamin:
    <br>

    <input name="kelamin" type="radio" id="kelamin_laki" value="laki">
    <label for="kelamin_laki">Laki-Laki</label>

    <input name="kelamin" type="radio" id="kelamin_perem" value="perempuan">
    <label for="kelamin_perem">Perempuan</label>
    <br>

    <input type="submit" value="Daftar">
</form>

Menjadi:

Form Signup

Saat diklik maka kita akan diarahkan menuju menuju url /signup?email=ragenah%40roso.id&password=BlaBli&private=on&kelamin=perempuan

Kesimpulan

Form ini akan sangat berguna untuk membuat web yang kompleks. Tetap berlatih ya!