Cara Buat Form di HTML
November 22, 2017
Add Comment
- OBJEKTIF:
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
1. 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>
Sintaks:
<form action="action" method="GET"|"POST">
...........................
</form>
2. 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 >
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 >
3. 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>
Sintaks:
<select
name="name"
size="number"
multiple >
.....................
</select>
4. 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>
Sintaks:
<option
selected
value="number" >
.....................
</option>
5. 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>
Sintaks:
<textarea
name="name"
cols="number"
rows="number" >
.....................
</textarea>
LATIHAN
Gunakan teks
editor misalkan "Notepad" untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah
file tersebut dengan menggunakan web browser atau gunakan editor yang telah
tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:
Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:
Nama file: latihan7_1.html
<html>
<head> <title>Latihan7-1</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> |
Latihan 2:
Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:
Nama file: latihan7_2.html
<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> <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:
Nama file: latihan7_2.html
<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> |
0 Response to "Cara Buat Form di HTML"
Post a Comment
Berikan Komentar Anda di Bawah Ini Sesuai Dengan Isi Artikel di Atas !