Info Komputer: Membuat Form di HTML

Element Form
Element FORM digunakan untuk menjelaskan form interaktif. Element ini memiliki atribut yaitu action, dan method. Atribut action berisi aksi terhadap form yang dikirim (URI) dan atribut method berisi metode form melakukan proses pengiriman (GET/POST).

Sintaks sebagai berikut:
<form action="action" method="GET"|"POST">
...........................
</form>

Element Input
Element INPUT digunakan untuk menjelaskan input yang dimasukkan oleh pengguna. Element ini memiliki atribut yaitu name, size, type, value, checked.
Atribut name menjelaskan nama dari input kontrol form, atribut size menjelaskan ukuran teks pada input kontrol, type menjelaskan bentuk input kontrol, value menjelaskan nilai awal/reset/submit, checked menjelaskan pilihan terpilih pada type radio/checkbox. Element ini tidak memiliki tag penutup dan harus berada di dalam element FORM.

Sintaks sebagai berikut:
<input
name="name"
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value"
checked >

Element Select
Element SELECT berfungsi untuk menjelaskan opsi pilihan pada form kontrol. Element ini memiliki atribut yaitu name, size, multiple (diizinkan banyak pilihan). Element ini berada dalam element FORM.

Sintaks sebagai berikut:
<select
name="name"
size="number"
multiple >
.....................
</select>

Element Option
Element OPTION menjelaskan opsi pilihan pada menu SELECT. Element ini memiliki atribut selected, dan value. Atribut selected opsi terpilih dan atribut value berisikan nilai element OPTION.

Sintaks sebagai berikut:
<option
selected
value="number" >
.....................
</option>

Element Textarea
Element TEXTAREA berfungsi sebagai input kontrol form untuk menginputkan teks lebih dari satu baris. Element ini memiliki atribut yaitu name, cols, rows. Atribut name menjelaskan nama input kontrol form element textarea, atribut cols menjelaskan jumlah kolom textarea yang terlihat, dan atribut rows menjelaskan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM

Sintaks sebagai berikut:
<textarea
name="name"
cols="number"
rows="number" >
.....................
</textarea>

Uji Coba

Untuk lebih memahami uraian di atas, silahkan sobat jamane komputer untuk mencoba latihan di bawah ini ya:

Uji coba 1:
Buatlah form dengan input kontrol form yang berisi text, checkbox, radio, reset, submit, seperti contoh di bawah ini:

Nama file: uji_coba_1.html

<html>
<head>
<title> uji coba 1</title>
</head>
<body>
<FORM METHOD="POST" ACTION="">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="uji1" SIZE="20" VALUE="Masukkan Nama Anda.">
   <BR><BR>
   <B>Apakah anda pelajar?</B>
   <INPUT TYPE="checkbox" NAME="uji2">
   <BR><BR>
   <B>Berapa Umur anda?</B>
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r3">21 - 25
   <BR><BR>
   <INPUT TYPE="submit" NAME="uji4" VALUE="Send">
   <INPUT TYPE="reset" NAME="uji5" VALUE="Clear">
</FORM>
</body>
</html>

Jika diisi nama Joko ; Pelajar di check ; umur 21-25 ; maka jika form ini di submit data form yang terkirim adalah uji1="Joko"&uji2="1"&uji3="r3"

Uji Coba 2:
Dari Uji coba 1 tambahkan menu select seperti kode program di bawah ini:

Nama file: uji_coba_2.html

<html>
<head>
<title>uji coba 2</title>
</head>
<body>
<FORM METHOD="POST" ACTION="detik.com">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="uji1" SIZE="20" VALUE="Masukkan nama anda">
   <BR><BR>
   <B>Apakah anda pelajar?</B>
   <INPUT TYPE="checkbox" NAME="uji2">
   <BR><BR>
   <B>Berapa Umur anda?</B>
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r3">21 - 25
   <BR><BR>
   <B>Anda berasal dari mana?</B>
   <BR>
   <SELECT NAME="var6" SIZE="1">
      <OPTION VALUE="ID">Indonesia
      <OPTION VALUE="MY">Malaysia
      <OPTION VALUE="SG" SELECTED>Singapura
   </SELECT>
   <BR><BR>
   <INPUT TYPE="submit" NAME="uji4" VALUE="Send">
   <INPUT TYPE="reset" NAME="uji5" VALUE="Clear">
</FORM>
</body>
</html>

Uji coba 3:
Dari Uji coba 2 tambahkan textarea seperti kode program di bawah ini:

Nama file: latihan7_2.html

<html>
<head>
<title>Latihan7-2</title>
</head>
<body>
<FORM METHOD="POST" ACTION="detik.com">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="uji1" SIZE="20" VALUE="Masukkan nama anda">
   <BR><BR>
   <B>Apakah anda pelajar?</B>
   <INPUT TYPE="checkbox" NAME="uji2">
   <BR><BR>
   <B>berapa umur anda?</B>
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="uji3" VALUE="r3">21 - 25
   <BR><BR>
   <B>Anda berasal dari mana?</B>
   <BR>
   <SELECT NAME="var6" SIZE="1">
      <OPTION VALUE="ID">Indonesia
      <OPTION VALUE="MY">Malaysia
      <OPTION VALUE=”SG" SELECTED>Singapura
   </SELECT>
   <BR><BR>
   <B>Komentar:</B>
   <BR>
   <TEXTAREA NAME="var7" COLS="30" ROWS="6">
   </TEXTAREA>
   <BR><BR>
   <INPUT TYPE="submit" NAME="uji4" VALUE="Send">
   <INPUT TYPE="reset" NAME="uji5" VALUE="Clear">
</FORM>
</body>
</html>