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:

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:

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:

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
buttonUntuk membuat tombol
imageUntuk membuat tombol gambar
colorUntuk memilih warna
dateUntuk memasukkan tanggal
datetime-localUntuk memasukkan tanggal dan waktu
monthUntuk memasukkan bulan dan tahun
urlUntuk memasukkan alamat situs / URL
weekUntuk memasukkan tanggal dengan minggu dalam setahun
searchUntuk membuat fitur pencarian
telUntuk memasukkan format nomor telepon
Tabel: Atribut dan value untuk input

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

AtritbutValueKeterangan
namebebas terserah kamuMendefinisikan variabel yang dibaca oleh server
autocompleteon dan offBisa mengisi formulir otomatis, jika di browser sudah menyimpan data yang sama sebelumnya
minlengthangkaMinimal karakter yang diinputkan
maxlengthangkaMaksimal karakter yang diinputkan
colsangkaJumlah kolom (ukuran)
rowsangkaJumlah baris (ukuran)
wraphard dan softTeks otomatis akan turun kebawah jika panjangnya sudah melebihi ukuran teks area
disabledMenonaktifkan
requiredHarus diisi
autofocusKetika form dibuka, maka field pertama yang diisi adalah ini
readonlyTeks area hanya bisa dibaca
spellcheckMengizinkan 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>.

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

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
:
:
Jenis Kelamin :
Tempat Tanggal Lahir :
Agama :
Berat Badan :
Tinggi Badan :
Golongan Darah :        
Kontak Siswa
Alamat Rumah :
Email :
No. HP :

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:

Tampilan Default Formulir

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

Jika masih ada pertanyaan tanya ya.

2 thoughts on “HTML Form”

  1. bagaimana cara membuat form html dihubungkan dengan sebuah webiste validasi sebagai contoh saat memasukkan semua kolom “password” itu ternyata valid dihubungkan dengan main website utama.

    contoh sederhana mengecek sebuah typo email valid tidaknya “gmai” harusnya “gmail”

    Reply

Leave a Comment