HTML Form

Form atau formulir adalah fungsi di HTML untuk mengisi sesuatu. Misalkan kita meminta data biodata setiap siswa, maka kita buat formulir untuk setiap siswa.

Dulu, form dibuat manual di kertas. Dengan format misal:

Nama:

Tanggal Lahir:

Cita-cita:

Sekarang, kita biasa buat form tersebut secara online dengan menggunakan kode HTML. Menjadi seperti ini:

Nama:
Tanggal Lahir:
Cita-cita:

Jelek kan? Ya iya, kan itu baru yang paling dasarnya hehe.

Ada banyak elemen dan atribut untuk membuat form, kita bahas pelan-pelan yak.

Element Form

Untuk membuat form kita butuh sintag <form>..</form>.

Element ini memiliki beberapa atribut, yang paling penting adalah:

• action adalah cara menentukan aksi / data akan dikirim / diproses kemana setelah user mengisi formulir
• method adalah cara dalam mengirimkan data

Contoh, kita buat form kemudian kalau diklik akan mengarah ke halaman proses.php, maka ditulis <form action="proses.php">.

Untuk dua atribut diatas, akan dibahas lebih detail kalau sudah masuk ke bahasa pemrograman PHP.

Kalau masih HTML dasar, belum saatnya. Yang penting di seri belajar HTML ini, kamu bener-bener paham dulu tentang HTML.

Membuat Input Field

Kalau kita ngisi form, pasti ada kolom-kolom yang harus diisi kan? Nah itu yang dinamakan field.

Pertama adalah input, ditulis dengan kode <input>.

Ada banyak atribut dalam input, yaitu:

Input type

Ada banyak tipe atau jenis input, yaitu:

1. Text

Dinotasikan dengan type="text", yaitu form input untuk mengisi data teks, bisa huruf dan angka. Contoh: <input type="text"> maka hasilnya:

2. Email

Ditulis dengan type="email" yaitu form input yang bisa diisi hanya dengan format teks email yang benar yaitu email@abc.def. Contoh <input type="email">, maka hasilnya:

Sekilas emang seperti sama dengan tipe text, tapi ketika digunakan web browser akan memberikan peringatan bahwa itu khusus untuk email.

Atau jika dibuka di smartphone, keyboardmu akan berubah format menjadi untuk ngisi email.

3. Number

Ditulis type="number" yaitu khusus untuk mengisi angka saja. Biasanya dipakai untuk menuliskan nomor hp. Contoh: <input type="number">

4. Checkbox

Ditulis dengan kode type="checkbox", biasanya dikombinasikan dengan kode <label> untuk ngasih tahu, itu kita ngecentang tentang apaan.

Contoh kode:

<label>
 <input type="checkbox">
  Saya setuju dengan aturannya
 </input>
</label>

Hasilnya yaitu:

Saya setuju dengan aturannya

5. Radio

Radio disini bukan untuk dengerin siaran radio ya. Berbeda dengan checkbox yang memungkinkan user mencentang opsi lebih dari 1.

Kalau radio mewajibkan user milih jawaban hanya 1. Contohnya untuk memilih jenis kelamin, ya kalau tidak cowok ya cewek kan? Masak milih keduanya.

Untuk menulisnya dua input itu harus diberi name yang sama. Contoh:

<label>
 <input type="radio" name="kelamin">Laki-laki
</label>
<label>
 <input type="radio" name="kelamin">Perempuan
</label>

Maka outputnya menjadi:

Laki-laki Perempuan

6. Password

Ini digunakan untuk membuat input password, jadi nanti karakter yang diketikkan jadi bulet lingkaran item. Contoh: <input type=”password”>

7. File

Digunakan untuk mengupload file baik gambar atau yang lain. Ditulis dengan <input type="file">

8. Menu Dropdown

Menu ini juga salah satau yang terpenting, biasanya digunakan untuk memilih satu opsi dengan banyak pilihan. Contohnya untuk form agama:

Islam Kristen Katolik Hindu Budha Konghucu Penghayat Kepercayaan

Untuk membuatnya dibutuhkan kode <select>..</select> itu adalah nama fieldnya. Kalau dropdown diatas nama select adalah agama. Sedangkan option ditulis dengan <option value="islam">Islam</option>.

Penerapannya menjadi:

  <select name="agama">
     <option value="Islam">Islam</option>
     <option value="Kristen">Kristen</option>
     <option value="Katolik">Katolik</option>
     <option value="Hindu">Hindu</option>
     <option value="Budha">Budha</option>
     <option value="Konghucu">Konghucu</option>
     <option value="Penghayat Kepercayaan">Penghayat Kepercayaan</option>
    </select>

9. Type yang lainnya…

Diatas itu yang paling umum digunakan, dan masih ada yang lain lagi terutama update di HTML 5. Saya tulis di tabel saja ya:

type=" "	Keterangan
button	Untuk membuat tombol
image	Untuk membuat tombol gambar
color	Untuk memilih warna
date	Untuk memasukkan tanggal
datetime-local	Untuk memasukkan tanggal dan waktu
month	Untuk memasukkan bulan dan tahun
url	Untuk memasukkan alamat situs / URL
week	Untuk memasukkan tanggal dengan minggu dalam setahun
search	Untuk membuat fitur pencarian
tel	Untuk memasukkan format nomor telepon

Input name

Adalah identifikator dari suatu value atau isi data dari field yang diinputkan. Data dari name inilah yang akan dibaca oleh server.

Misal kita ingin buat field hobi, maka identifikasi name sebagai berikut <input type="text" name="hobi">.

Jadi, setiap field harus diberi name supaya server bisa membaca data yang dimasukkan.

Input placeholder

Adalah keterangan dari suatu field, misal kita ingin buat field email maka kodenya <input type="email" placeholder="email kamu">.

Input required

Adalah identifikasi untuk membuat field tersebut wajib diisi. Misal buat input nama yang harus diisi, kodenya: <input type="text" required>

Input disabled

Untuk menonaktifkan inputan, maksudnya ada fieldnya tapi tidak bisa diisi. Lah terus buat apa dong? Biasanya dipakai dalam form edit data, jika ada beberapa data yang tidak bisa diganti.

Contoh field nama ayah tidak bisa diganti, karena tidak mungkin ayah kandung kita ganti. <input type="text" disabled placeholder="nama bapak">

Membuat textarea form

Textarea hampir sama seperti input, yang membedakan adalah cakupan karakter dan penggunaannya.

Teks area biasa digunakan untuk form edit konten, atau field mendeskripsikan tentang diri sendiri.

Textarea itu multiline sedangkan input itu single line

Didefinisikan dengan tag <textarea>..</textarea>.

Berikut atribut dan valuenya (cara menggunakan: atribut="value"):

Atritbut	Value	Keterangan
name	bebas terserah kamu	Mendefinisikan variabel yang dibaca oleh server
autocomplete	on dan off	Bisa mengisi formulir otomatis, jika di browser sudah menyimpan data yang sama sebelumnya
minlength	angka	Minimal karakter yang diinputkan
maxlength	angka	Maksimal karakter yang diinputkan
cols	angka	Jumlah kolom (ukuran)
rows	angka	Jumlah baris (ukuran)
wrap	hard dan soft	Teks otomatis akan turun kebawah jika panjangnya sudah melebihi ukuran teks area
disabled	–	Menonaktifkan
required	–	Harus diisi
autofocus	–	Ketika form dibuka, maka field pertama yang diisi adalah ini
readonly	–	Teks area hanya bisa dibaca
spellcheck	–	Mengizinkan browser untuk mengecek gramatikal penulisan

Membuat button form

Untuk membuat tombol dalam form kita butuh element <button>. Ada dua tipe button yaitu:

• submit yaitu ketika diklik akan mengirimkan value dari name data yang dikirim
• reset yaitu ketika diklik akan menghapus semua data yang telah diisi di formulir

Contoh, saya ingin buat tombol dengan tulisan kirim sekarang. Maka kodenya <button>kirim sekarang</button>.

kirim sekarang

Membuat legend dan fieldset

Terakhir adalah membuat legend dan fieldset.

Legend atau legenda disini adalah keterangan dari suatu field, seperti legenda dalam suatu peta.

Sedangkan fieldset itu untuk mendefinisikan / merapikan ini tuh field apa. Biar tidak bingung, lihat contoh kode berikut:

<form>
 <fieldset>
  <legend>Masukkan email kamu</legend>
  <input tyle="email" placeholder="your email"/>
  <button type="submit">OK</button>
 </fieldshet>
</form>

Hasilnya akan menjadi:

Masukkan email kamu

OK

Praktik Membuat Form

Saya rasa sudah paham yak? Jika belum paham, baca pelan-pelan ya.

<form>
	<fieldset>
		<legend>Data Siswa</legend>
		<table width="100%">
			<tr><td width="40%"><label>Nama Lengkap</label></td><td> :<input type="text" name="nama_lengkap"></td></tr>
			<tr><td width="40%"><label>Nama Panggilan</label></td><td> :<input type="text" name="nama_panggilan"></td></tr>
			<tr><td width="40%">Jenis Kelamin</td><td> :<label><input type="radio" name="kelamin">Laki-laki</label><br><label><input type="radio" name="kelamin">Perempuan</label></td></tr>
			<tr><td width="40%">Tempat Tanggal Lahir</td><td> :<input type="text" name="ttl"></td></tr>
			<tr><td width="40%">Agama</td><td> :
				<select name="agama">
					<option value="Islam">Islam</option>
					<option value="Kristen">Kristen</option>
					<option value="Katolik">Katolik</option>
					<option value="Hindu">Hindu</option>
					<option value="Budha">Budha</option>
					<option value="Konghucu">Konghucu</option>
					<option value="Penghayat Kepercayaan">Penghayat Kepercayaan</option>
				</select>
			</td></tr>
			<tr><td width="40%">Berat Badan</td><td> :<input type="number" name="berat_badan"></td></tr>
			<tr><td width="40%">Tinggi Badan</td><td> :<input type="number" name="tinggi_badan"></td></tr>
			<tr><td width="40%">Golongan Darah</td><td> :
				<label><input type="radio" name="gol_dar">O</label> 
				<label><input type="radio" name="gol_dar">A</label> 
				<label><input type="radio" name="gol_dar">B</label> 
				<label><input type="radio" name="gol_dar">AB</label> 
			</td></tr>
		</table>
	</fieldset>
	<fieldset>
		<legend>Kontak Siswa</legend>
		<table>
			<tr><td width="40%">Alamat Rumah</td><td> :<textarea></textarea></td></tr>
			<tr><td width="40%">Email</td><td> :<input type="Email" name="email"></td></tr>
			<tr><td width="40%">No. HP</td><td> :<input type="number" name="no_hp"></td></tr>
		</table>
	</fieldset>
        <button type="submit">Kirim</button>
</form>

Kode diatas akan menghasilkan form input seperti dibawah:

Data Siswa

Nama Lengkap	:
Nama Panggilan	:
Jenis Kelamin	:Laki-laki Perempuan
Tempat Tanggal Lahir	:
Agama	: Islam Kristen Katolik Hindu Budha Konghucu Penghayat Kepercayaan
Berat Badan	:
Tinggi Badan	:
Golongan Darah	: O  A  B  AB

Kontak Siswa

Alamat Rumah	:
Email	:
No. HP	:

Kirim

Tampilannya akan berbeda jika kamu mencobanya sendiri, kenapa?

Karena, desain form diatas sudah terkonversi dengan style CSS yang ada di web saya ini. Untuk versi tanpa style CSS akan menjadi seperti ini:

Form html diatas saya kombinasikan dengan kode html tabel supaya tampilannya lebih rapi.

Jika masih ada pertanyaan tanya ya.