komponen entri teks
Komponen
Entri Teks
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.
Untuk menampung input teks yang
panjang dan mungkin tersusun atas lebih dari 1 baris, maka digunakan komponen
input ‘textarea’. TEXTAREA dapat digabungkan dengan tag FORM untuk menjadi
inputan yang akan diolah oleh file pemroses sebagaimana seperti yang telah
dijelaskan pada tag FORM tersebut.
Format umum penulisan text area multiline
<textarea atribute=”atribute">
Terdapat beberapa atribut dari text area, diantaranya
row,col dan lain sebagainya. Pada HTML 5 menyediakan banyak 6 atribut baru
textarea.
Contoh penulisan :
<!DOCTYPE
html>
<html>
<head>
<title>cek
form </title>
</head>
<body>
<p>
Silahkan diisi pada teks area yang tersedia</p>
<p><textarea
NAME=”papantulis” COLS=40 ROWS=6>
</textarea></p>
</body>
</html>
Bila listing kode diatas dijalankan akan menghasilkan
tampilan pada halaman web seperti berikut :
2) Komponen input text
password
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