Form Element
Gunakan tag
(<FORM>) untuk membuat form dalam document HTML.
ATTRIBUTE
|
DESCRIPTION
|
accept
|
Mendefinisikan MIME yang
diizinkan oleh server yang membuat script untuk memproses form:
Syntax :
accept=”Internet Media Type”
|
method
|
Menentukan bagaimana data akan
dikirim ke server.
GET – data akan dikirim dengan
menggunakan query string pada URL.
POST – data akan dikirim ke
server sebagai block data ke script.
Syntax :
method=”POST | GET”
|
action
|
Menentukan lokasi dari script
yang akan memproses data dari form.
Syntax :
action=”URL”
|
HTML Input Element
Berikut macam –
macam komponen input :
- Button
Komponen
ini memiliki attribute :
ATTRIBUTE
|
DESCRIPTION
|
Name
|
Nama dari control
|
Size
|
Ukuran control
|
Type
|
<input type=”button”>
|
Value
|
Untuk memberikan value ke input
|
Contoh :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p><input type="button" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil :
- Input Text
Untuk membuat single line text control. Attribute size digunakan
untuk menentukan jumlah
karakter yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan
maximum karakter yang bisa dimasukkan.
karakter yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan
maximum karakter yang bisa dimasukkan.
Contoh :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p><input type="text" name="T1"
size="20"></p>
<p><input type="submit" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil :
- CheckBox
CheckBox
memiliki attribute :
ATTRIBUTE
|
DESCRIPTION
|
Checked
|
Untuk memberi default check
|
Name
|
Nama dari control
|
Size
|
Ukuran control
|
Type
|
<input type=”checkbox”>
|
Value
|
Untuk memberikan value ke input
|
Contoh :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p>Hobi Anda Adalah :<br>
<input type="checkbox" name="C1"
value="ON">Membaca<br>
<input type="checkbox" name="C2"
value="ON">Makan<br>
<input type="checkbox" name="C3"
value="ON">Jalan-jalan<br>
</p>
<p><input type="submit" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil :
- Radio
Setiap
radio button control harus memiliki nama yang sama, sehingga user hanya bisa
memilih
satu option saja. Radio button juga harus secara explicit memberikan nilai ke atribut value.
satu option saja. Radio button juga harus secara explicit memberikan nilai ke atribut value.
ATTRIBUTE
|
DESCRIPTION
|
Checked
|
Untuk memberi default check
|
Name
|
Nama dari control
|
Size
|
Ukuran control
|
Type
|
<input type=”radio”>
|
Value
|
Untuk memberikan value ke input
|
Contoh :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p>Pilih Jenis Kelamin<br>
<input type="radio" value="V1" checked
name="R1">Laki-laki<br>
<input type="radio" name="R1"
value="V2">Perempuan</p>
<p><input type="submit" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil :
- Text Area
Text
Area biasanya digunakan untuk mengisi lebih dari input text atau tepatnya untuk
menampung data yang lebih banyak. Untuk membuat text area gunakan tag
(<textarea></textarea>).
menampung data yang lebih banyak. Untuk membuat text area gunakan tag
(<textarea></textarea>).
ATTRIBUTE
|
DESCRIPTION
|
Cols
|
Lebar dari text area
|
Rows
|
Jumlah Baris
|
Name
|
Nama dari control
|
Size
|
Ukuran control
|
Contoh :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p><textarea rows="5" name="S1"
cols="20"></textarea></p>
<p><input type="submit" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil :
- Combo Box / List Box (Selection)
Gunakan
tag (<select>) untuk membuat komponen combo box, sementara untuk item
dari
combo box menggunakan tag (<option>).
combo box menggunakan tag (<option>).
PROPERTY
|
DESCRIPTION
|
Name
|
Untuk memberi nama element
|
Size
|
Untuk menentukan jumlah baris
yang ditampilkan
|
Multiple
|
Untuk menentukan apakah user
boleh memilih lebih dari satu option atau tidak
|
Contoh (tidak beropsi) :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p><select size="1"
name="D1"></select></p>
<p><input type="submit" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil (tidak beopsi) :
Contoh (dengan opsi) :
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST">
<p><select size="1" name="D1">
<option value="1">Web Design</option>
<option value="2">SQL Programming</option>
</select></p>
<p><input type="submit" value="CETAK"
name="B1"></p>
</form>
</body>
</html>
Hasil (dengan opsi) :
0 Response to "Latihan HTML - Membuat Form"
Posting Komentar