Belajar Element FORM pada HTML

Objectif:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element- element untuk pembuatan form.

Materi:   
Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA

Element [FORM]
Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).
Sintaks:
<form action="action" method="GET"|"POST">
...........................
</form>

Element [INPUT]
Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu  name, size, type, value, checked.

Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.
Sintaks:
<input 
name="name" 
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value"
checked >

Element [SELECT]
Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu  name, size, multiple (diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.
Sintaks:
<select
name="name" 
size="number"
multiple >
.....................
</select>

Baca juga :
Belajar Struktur dan kode HTML dasar. Untuk pemula
Belajar Element FORM pada HTML
Cara mudah belajar Tag Hyperlink di HTML
Belajar Tag dan Element Frameset sederhana pada HTML
Kumpulan Desain dan Script Frameset pada HTML

Element OPTION
Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai
attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai
element OPTION. 
Sintaks:
<option>
selected 
value="number" >
.....................
</option>

Element [TEXTAREA]
Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols , rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM
Sintaks:
<textarea
name="name" 
cols="number"
rows="number" >
.....................
</textarea>

Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:

Belajar Element FORM pada HTML

<html>
<head><title>Legi</title></head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
<H4>FORM</H4>
<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
<BR><BR>
<B>Are you a student?</B>
<INPUT TYPE="checkbox" NAME="var2">
<BR><BR>
<B>How old are you?</B>
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
<BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Send">
<INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>


Jika diisi namanya adalah Ahmad ; student di check ; umur 21-25 ; maka jika form ini di
submit data form yang terkirim adalah  var1="Rahmat"&var2="1"&var3="r3"

Latihan 2:
Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:

Belajar Element FORM pada HTML
<html>
<head><title>Legi</title></head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
<H4>FORM</H4>
<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
<BR><BR>
<B>Are you a student?</B>
<INPUT TYPE="checkbox" NAME="var2">
<BR><BR>
<B>How old are you?</B>
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
<BR><BR>
<B>Where are you from?</B>
<BR>
<SELECT NAME="var6" SIZE="1">
<OPTION VALUE="BG">Bulgaria
<OPTION VALUE="UK">United Kingdom
<OPTION VALUE="USA" SELECTED>USA
</SELECT>
<BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Send">
<INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>

Latihan 3:
Dari latihan 2 tambahkan textarea seperti gambar di bawah ini :

Belajar Element FORM pada HTML

<html>
<head><title>Legi</title></head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
<H4>FORM</H4>
<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
<BR><BR>
<B>Are you a student?</B>
<INPUT TYPE="checkbox" NAME="var2">
<BR><BR>
<B>How old are you?</B>
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
<BR><BR>
<B>Where are you from?</B>
<BR>
<SELECT NAME="var6" SIZE="1">
<OPTION VALUE="BG">Bulgaria
<OPTION VALUE="UK">United Kingdom
<OPTION VALUE="USA" SELECTED>USA
</SELECT>
<BR><BR>
<B>Your comment:</B>
<BR>
<TEXTAREA NAME="var7" COLS="30" ROWS="6">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Send">
<INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>

Baca juga : Cara Mudah Menyisipkan Attribut Warna pada CSS

Catatan:
Pemberian nilai attribute action pada element FORM dengan menuju ke alamat email adalah untuk memperlihatkan nilai-nilai data form yang dikirimkan.

0 komentar:

Post a Comment