Memahami dan Menyajikan formulir pada hal web
1) Komponen Entri text
Komponen entri text digunakan untuk menapilkan text yang menampung input text yang panjang dan tersusun lebih dari 1 baris
<textarea atribut="atribute">
Pada HTML 5 menyediakan 6 atribut text area
1.NAMEAtribut ini digunakan untuk memberikan nama text area
2.COLS
Atribut ini digunakan untuk menentukan lebar dari text area
3.READONLY
Atribut ini digunakan agar tulisan yang terdapat didalam text area hanya dapat dibaca dan disalin tapi tidak dapat diubah
4.DISABLED
Atribut ini digunakan agar tulisan yang terdapat di dalam text area tidak dapat disalin dan diubah
5.ROWS
Atribut ini digunakan untuk menentukan tinggi teks area
6.WARP
Atribut ini digunakan agar text menyesuaikan dengan text area
2) Komponen input Password
Komponen entri text digunakan untuk menapilkan text yang menampung input text yang panjang dan tersusun lebih dari 1 baris
<textarea atribut="atribute">Pada HTML 5 menyediakan 6 atribut text area
1.NAMEAtribut ini digunakan untuk memberikan nama text area
2.COLS
Atribut ini digunakan untuk menentukan lebar dari text area
3.READONLY
Atribut ini digunakan agar tulisan yang terdapat didalam text area hanya dapat dibaca dan disalin tapi tidak dapat diubah
4.DISABLED
Atribut ini digunakan agar tulisan yang terdapat di dalam text area tidak dapat disalin dan diubah
5.ROWS
Atribut ini digunakan untuk menentukan tinggi teks area
6.WARP
Atribut ini digunakan agar text menyesuaikan dengan text area
Komponen input text password bertanggung jawab untuk memasukan data password. Dari atribut-atribut tersebut, yang utama dan terutama harus disesuaikan atau diberi nama sesuai dengan item datanya adalah atribut ‘name’, karena file yang dituju pada atribut action di tag form, yang biasanya adalah file server side scripting (PHP) akan mengambil input dari form berdasarkan atribut nama (‘name’) dari komponen input form tersebut.Disamping tipe text, terdapat pula tipe input teks yang lain, yakni ‘password’. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’. Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata kunci atau password dari pengguna di dalam form login.
Format dari elemen input text password HTML-nya adalah sebagai berikut :
<input type=password name=name>
<input type=password name=name maxlength=length>
<input type=password name=name size=size>
<input type=password name=name value=value>
Berikut adalah penggalan listing program penulisan form input password, dimana form diberi nama=pwd dengan panjang maximal karakternya adalah 6.
<!doctype html>
<html>
<head>
<title>penulisan password </title>
</head>
<body>
<form >
Password: <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
Contoh hasil kompilasi dari listing diatas :
3) Komponen input text
Komponen input text merupakan komponen untuk memasukan data text ke server dalam bentuk textfield.Format tag HTML-nya adalah sebagai berikut :
<INPUT TYPE=TEXT NAME=name>
<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>
<INPUT TYPE=TEXT NAME=name SIZE=size>
<INPUT TYPE=TEXT NAME=name VALUE=value>
Berikut contoh listing program yang menggunakan form input
Contoh bentuk tampilannya adalah sebagai berikut :
<!doctype html>
<html>
<head>
<title>input text</title>
</head>
<body>
<form>
Nama : <input type="text" name="nama"><br>
Sekolah : <input type="text" name="sekolah">
</form>
</body>
</html>
4) Form menggunakan input hidden
Format tag form input hidden HTML-nya adalah sebagai berikut :
<INPUT TYPE=HIDDEN NAME=name VALUE=value>
Pada format form input hidden ditandai dengan atribut form type =hidden pada tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak tampilkan. Untuk selengkapnya dapat dilihat pada program berikut
Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan sebagai berikut :
<!doctype html>
<html>
<head>
<title>hidden input file </title>
</head>
<body>
<form >
Nama : <input type=” name=”fnama”><br>
<input type=”hidden” name=”negara” value=”Indonesia”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
5) Pembuatan form biodata dengan input text
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana :
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"><br><br>
Kelas: <input type="text" name="kelas"
maxlength="2"><br><br>
No : <input type="text" name="nomor"
value="10"><br><br>
Hobby: <input type="text" name="hobby"
size="8"><br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit"
value="Submit"> <input type="reset"
name="reset" value="Reset">
</form>
</body>
</html>
Apabila dibuka di dalam browser, maka tampilan dari susunan kode HTML di atas adalah sebagai berikut :
6) Pembuatan form dengan elemen fieldset
Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet serta input form :
<!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 bisa mengakses
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>
Bila listing code diatas dijalankan akan menghasilkan tampilan sebagai berikut :
Komentar
Posting Komentar