HTML – Form


Adalah tag yang digunakan untuk membuat sebuah form/formulir. Formulir adalah sebuah halaman yang berisi inputan data yang akan dikirim ke dalam server.

Terdapat 3 (tiga) elemen dalam form :

  1. Input
  2. Select
  3. Text area

Syntaks utama form adalah :

<FORM>Elemen form</FORM>

Atribut dalam tag form meliputi :

  • name : mengidentifikasikan nama form
  • action : URL/file yang digunakan untuk mengolah data masukan
  • method : proses pengiriman data (GET atau POST)

Penjelasan singkat dari masing2 elemen-elemen dalam form adalah :

1.  Elemen INPUT beserta atribut

Digunakan untuk membuat kolom data masukan berdasarkan tipe. Tag dalam elemen input tidak memiliki tag penutup. Tag ini diletakkan di dalam tag form.

  • Text, digunakan untuk data isian

 <INPUT type=”TEXT” name=”” size=””>

  • Password, pengisian karakter tersembunyi berupa * atau ●

<INPUT type=”password” name=”” size=””>

  • Checkbox, berupa kotak checklist (dapat memilih lebih dari satu)

<INPUT type=”checkbox” name=”” value=””>Pilihan 1
<INPUT type=”checkbox” name=”” value=””>Pilihan 2

  • Radio, berupa lingkaran opsi (hanya memilih satu opsi)

<INPUT type=”radio” name=”” value=””> Pilihan 1
<INPUT type=”radio” name=”” value=””> Pilihan 2

  • File, digunakan untuk meng-upload file

<INPUT type=”file” name=”“>

  • Submit, digunakan untuk mengirimkan data-data uang dimasukkan

<INPUT type=”submit” name=”” value=””>

  • Reset, digunakan untuk mengosongkan kembali form

<INPUT type=”reset” name=”” value=””>

  • Button, membuat tombol dengan fungsi yang dibuat sendiri

<INPUT type=”button” name=”” value=”” onclick=”fungsiJS()”>

 

2. Elemen SELECT beserta atribut

Digunakan untuk membuat pilihan opsi berupa dropdown option atau slider option. Tag elemen select memiliki tag penutup.

<SELECT name=”” size=””>
<OPTION selected value=””>Pilihan 1</OPTION>
<OPTION value=””>Pilihan 2</OPTION>
<OPTION value=””>Pilihan 3</OPTION>

</SELECT>

Atribut yang digunakan :

name : nama untuk select yang berlaku
size : bentuk tampilan (1, 2, atau lebih dari 2)
Value : nilai yang dikirimkan
Selected : option yang secara default dipilih
3. Elemen TEXTAREA beserta atribut

Digunakan untuk membuat kolom inputan yang lebih besar. Tag elemen select memiliki tag penutup.

<TEXTAREA name=”” rows=”” cols=””>
Default teks</TEXTAREA>

Atribut yang digunakan :

name : nama untuk textarea yang berlaku
rows : banyaknya baris karakter yang ditampilkan
cols : banyaknya kolom karakter yang ditampilkan

 

Contoh penggunaan tag form :

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<FORM name=”form” action=”proses.php”>
NIM :<input type=”text” name=”nim” size=”10″><br>
Nama :<input type=”text” name=”nama” size=”20″><br>
Password :<input type=”password” name=”password” size=”10″><br>
Jenis Kelamin :<input type=”radio” name=”sex” value=”laki”>Laki-laki
<input type=”radio” name=”sex” value=”wanita”>Perempuan<br>
Hobi :<input type=”checkbox” name=”hobi” value=”olahraga”>Olahraga
<input type=”checkbox” name=”hobi” value=”membaca”>Membaca
<input type=”checkbox” name=”hobi” value=”jalan”>Jalan-jalan<br>
Kota Asal :<select name=”kota” size=”1″>
<option value=”jakarta”>Jakarta</option>
<option value=”bandung”>Bandung</option>
<option value=”semarang”>Semarang</option>
<option value=”yogyakarta”>Yogyakarta</option>
</select><br>
Alamat lengkap : <textarea name=”alamat” rows=”4″ cols=”20″>
isi alamat lengkap disini</textarea><br>
<input type=”submit” name=”submit” value=”KIRIM”>
<input type=”reset” name=”reset” value=”RESET”>
</FORM>
</BODY>
</HTML>

Hasil dari syntaks di atas adalah :

form


Leave a Reply