A. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
- Siswa Mampu Memahami komponen entri teks
- Siswa Mampu Menyajikan komponen entri teks ke dalam sebuah halaman web
B. Uraian Materi
Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputan dalam bentuk textarea, input teks , pilihan radio button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Pada kegiatan belajar ini akan mempelajari inputan text.
1) Komponen text area multiline
Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text. Format umum penulisan text area multiline
<textarea atribute=”atribute" >
...
</textarea>Keterangan :
- COLS
Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA.
- READONLY
Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah.
- DISABLED
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin dan diubah.
2) Komponen input text password
Komponen input text password bertanggung jawab untuk memasukan data password. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’.
<input type=password name=name>3) Pembuatan form dengan elemen fieldset Fieldset adalah tag pada HTML yang digunakan untuk mengelompokkan berbagai inputan data pada element tag <form> yang memiliki kategori dan keterkaitan yang sama
<fieldset >
<legend>Proses Sign in</legend>
</fieldset >C. Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Hooya</title>
</head>
<body>
<fieldset >
<legend>Proses Sign in</legend>
<td width="256" align="center" valign="top"><p
align="center"><font
color="#000000" size="+3">YAHOO!
<label for="textfield" ></label>
</font><font color="#000000" size="+3">
<label for="textfield" ></label>
</font><font size="+3">
<label for="textfield" ></label>
</font>
<label for="textfield" ></label>
</p>
<p align="center">
<input type="text" name="textfield" id="textfield"
value="ID
Yahoo" />
</p>
<p align="center">
<label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2"
value="Password" />
</p>
<p align="center">
<input type="submit" name="button" id="button"
value="Sign in"
/>
</p>
<p align="center" ><font color="#0000FF">Tidak bisamengakses
account
</font></p>
<p align="center" ><font color="#0000FF">Bantuan Sign
in</font></p><p
align="center">------------Atau ------------ </p>
<p align="center">
<input type="submit" name="button2" id="button2"value="Buat
Account Baru"
/>
</p>
<p align="center">------------------------------</p>
<p align="center"> Masuk dengan Facebok atau Google</p>
<p> </p></td>
</fieldset>
</body>
</html>Output:
D. Latihan
Buatlah form dengan menggunakan elemen fieldset seperti contoh berikut ini:
