Iklan bawah header

Belajar HTML Part 11 - Cara Membuat Form di HTML

Form html

Tidak hanya untuk menampilkan informasi saja, web juga digunakan untuk mengambil informasi atau data dari pengunjung.

Cara untuk mengambil informasi dari pengunjung yaitu dengan menggunakan form.

Form yang dibuat di dalam web bisa disamakan dengan formulir di dunia nyata.

Form yang dibuat dapat diisi, yang kemudian akan langsung diproses dengan program tertentu.

Untuk tutorial kali ini kita akan belajar untuk membuat form di HTML.

Ingat! hanya membuat saja ya..

Tidak sampai memproses datanya.

Karena hal itu sudah masuk ke dalam topik pembahasan yang lain.

Tak perlu lama-lama...

Mari kita mulai.

Membuat Form di HTML

Form merupakan tempat untuk melakukan penginputan data sebelum diproses oleh sistem. Contohnya seperti form pendaftaran, form login, form comment, form data user dan lainnya.

Berikut tag yang akan kita gunakan untuk membuat form:

  • <form> untuk mendefinisikan pembuatan form
  • <input> berfungsi sebagai kolom isian dari user, yang di dalamnya dapat dimasukan checkbox, radio, kotak dialog dan lainnya
  • <textarea> untuk memasukan informasi dalam jumlah banyak
  • <fieldset> untuk mengelompokan form sesuai kegunaanya untuk apa
  • <legend> untuk memberi nama pada form tersebut
  • <label> untuk memudahkan pengisian form dengan cara mengarahkan mouse pada teks
  • <select> untuk membuat menu dropdown yang berisi item-item pilihan
  • <option> untuk mendefinisikan item-item pilihan pada tag <select>
  • <optgroup> untuk mendefinisikan judul dari item-item pilihan
  • <button> untuk mendefinisikan tombol submit untuk memproses form.

Selain itu, dibawah ini terdapat beberapa atribut pada tag form yang sering digunakan.

  • name untuk mendefinisikan nama form
  • method untuk mendefinisikan data pada form akan dikirim dengan cara apa, GET atau POST
  • action untuk mendefinisikan alamat URL, dimana file pemroses seperti file PHP misalnya, disimpan
  • target untuk menentukan akan seperti apa form yang menjadi target tujuan ditampilkan.

Berikut adalah contoh form pada HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="nama_file.php" method="post" name="registrasi" target="_blank">
<fieldset>
<legend>Form Registrasi</legend>
Username : <input type="text" name="username" placeholder="username"><br><br>
Password : <input type="password" name="password" placeholder="password"><br><br>
Asal Kota : 
<select name="kota">
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
</select><br><br>
Jenis Kelamin : 
<input type="radio" name="gender" value="Laki - Laki"><label for="laki">Laki - Laki</label>
<input type="radio" name="gender" value="Perempuan"><label for="Perempuan">Perempuan</label><br><br>
Hobi : 
<input type="checkbox" id="bulutangkis"><label for="bulutangkis">Bulutangkis</label>
<input type="checkbox" id="Sepakbola"><label for="Sepakbola">Sepakbola</label>
<input type="checkbox" id="Renang"><label for="Renang">Renang</label><br><br>
Alamat : <br>
<textarea placeholder="Alamat"> </textarea><br>
<input type="submit" name="kirim" value="Kirim">
</fieldset>
</form>
</body>
</html>

Hasilnya:

form html

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel