Belajar HTML Part #8 - Membuat Form Pada HTML

Crewnesia - Form adalah tempat untuk menginput data sebelum di proses oleh sistem. Form biasanya berupa interface yang berfungsi untuk mengumpulkan data user, dan akan di proses oleh JavaScript atau PHP lalu di simpan ke dalam table MySQL. Untuk pembahasan lebih lanjutnya akan saya bahas di materi PHP dan JavaScript. Untuk membuat form pada html kita akan menggunakan tag form, input, textarea, input, dan radio.

Tag Form

Untuk membuat sebuah form diawali dengan tag <form> dan diakhir dengan tag </form>. Tag form membutuhkan beberapa atribut agar dapat berfungsi.

Atribut Action berfungsi untuk menentukan aksi yang akan dilakukan saat data dikirimkan. Biasanya niali atribut action ini adalah alamat dari sebuah halaman PHP yang akan digunakan saat memproses isi data form.
Atribut Method berfungsi untuk menjelaskan metode pengiriman data oleh web browser. Nilai atribut ini biasaya berupa GET atau POST.

Tag Input

Tag Input merupkan tag yang paling sering digunakan untuk membuat form. Tag input ini memiliki beberapa bentuk yang bisa kita gunakan misalnya seperti isian text, text password, button, radio, dan checkbox. Berikut beberapa dari keluarga tag input yang berdasarkan atribut.

<input type="text"> adalah textbox inputan yang biasanya digunakan untuk menginput username dan password atau berupa inputan text pendek.
<input type="password"> textbox ini sama dengan seperti type text, tetapi teks yang dinput akan ditampilkan sebagai tanda bintang atau titik. Biasanya digunakan untuk teks yang sensitif seperti password.
<input type="submit"> inputan ini berupa tombol (button) yang berfungsi untuk memproses data inputan dari form. Biasanya inputan ini terletak pada baris terakhir dari form.
<input="radio"> inputan ini berupa radio group, dimana user dapat memilih salah satu pilihan yang telah disediakan
<input="checkbox"> inputan ini berupa checkbox yang dapat di ceklis atau dipilih oleh user.

Tag Textarea

Tag Textarea merupak tag yang fungsinya sama dengan seperti inputan text, namun textarea ini dapat diisikan oleh banyak baris dan text. Untuk mengatur panjang dan banyak baris pada textarea kita bisa menggunakan dengan CSS.

Contoh penulisan textarea sebagai berikut:

<textarea>
    Masukkan Pesan Anda Disini
</textarea>

Tag Select

Tag Select merupaka tag yang digunakan oleh user untuk memilih data yang telah disediakan. Tag select selalu digunakan bersama-samaan dengan tag <option> untuk membuat box.

Contoh penulisan select sebagai berikut:

<select>
	<option>Bandung</option>
	<option>Jakarta</option>
	<option>Surabaya</option>
</select>

Atribut Name

Setiap tag inputan yang berada di dalam form harus ditambahkan/disertai dengan atribut name agar dapat diproses oleh web server. Berikut contoh penulisan atribut name:

<input type="text" name="username">
<input type="text" name="email">

Akhirnya, Untuk Membuat Sebuah From Telah Utuh.

Merangkum dari semua penjelasan dari tag form yang telah kita bahas diatas, saatnya kita untuk membuat sebuah form HTML. Silahkan buka text editor kalian lalu buat file dengan nama form.html lalu tuliskan kode HTML berikut :

<!DOCTYPE html>
<html>
<head>
	<title>Crewnesia - Membuat Form Pada HTML</title>
</head>
<body>
	<form action="form.html" method="post">
		Nama : <input type="text" name="nama" value="Massukan Nama"><br />
		Password : <input type="password" name="password"> <br />
		Alamat : <input type="text" name="alamat" value="Massukan Alamat"> <br />
		Jenis Kelamin : <input type="radio" name="JK" value="Laki-laki"> Laki-laki
		<input type="radio" name="JK" value="Perempuan"> Perempuan <br />
		Hobi : 
		<input type="checkbox" name="membaca_buku">Membaca Buku
		<input type="checkbox" name="renang">Renang
		<input type="checkbox" name="sepak_bola">Sepak Bola<br/>
		Kota Asal :
		<select name="asalkota">
			<option>Bandung</option>
			<option>Jakarta</option>
			<option>Surabaya</option>
		</select>
		<br />
		Komentar Anda : 
		<textarea name="komentar" rows="5" cols="20">
		
		</textarea>
		<br />
		<input type="submit" name="submit" value="Kirim">
	</form>
	<hr>
	&copy 2021 by Crewnesia
</body>
</html>

Dari contoh diatas merupakan form yang sangat sederhana menggunakan HTML untuk mempercantik tampilan dari form tersebut kalian bisa menggunakan CSS untuk mempercantik tampilanya. Dari contoh diatas kalian bisa lihat masing-masing tag dan atribut yang sudah kita bahas tadi di atas.

Silahkan pelajari materi selanjutnya.

Belajar HTML Part #9 - Membuat List Pada HTML.

Crewnesia