Pada kesempatan kali ini kita akan
membahas cara membuat form dengan html. Sebelum saya memberikan contoh
terlebih dahulu kita harus mempelajari element-element untuk membuat
form pada html supaya lebih memudahkan kita dalam membuat form.
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>
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 bari textarea yang terlihat. Element ini harus berada di dalam
element FORM
Sintaks:
<textarea
name="name"
cols="number"
rows="number" >
.....................
</textarea>
Contoh lengkap
<html> <head>
<title>Latihan7-2</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>
Demikian tutorial hari ini semoga bermanfaat selemat belajar
0 Komentar untuk "Membuat Form Pada HTML"