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.
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.
|
Atribut
|
Value
|
Keterangan
|
|
Autofocus
à baru
dihtml 5
|
autofocus
|
Area tertentu pada text area,
dimana kursor y otomatis mengarah ke daerah tersebut ketika halaman web
diload.
|
|
Cols
|
number
|
Menentukan lebar text area
|
|
Disabled
|
disabled
|
Text area dapat diubah
|
|
Form
|
form_id
|
Satu atau lebih form pada text area
|
|
à baru
dihtml 5
|
|
Menentukan panjang karakter pada
text area
|
|
Maxlength
à baru
dihtml 5
|
Number
|
Menentukan panjang karakter pada text area
|
|
Name
|
text
|
Nama dari text area
|
|
Placeholder
à baru
dihtml 5
|
text
|
Memberikan gambaran singkat tentang nilai pada tex
tarea
|
|
Readonly
|
readonly
|
Text area bersifat read-only
|
|
Required
à baru
dihtml 5
|
required
|
Menentukan text area tersebut harus diisi atau
tidak.
|
|
Rows
|
number
|
Menentukan tinggi text area
|
|
Wrap
à baru
dihtml 5
|
hard
soft
|
Menentukan bagaimana cara teks dikemas dalam text
area sebelum teks tersebut dikirimkan
|
NAME
Atribut ini digunakan untuk meemberikan nama dari
TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan
tag FORM.
NAME
Atribut ini digunakan untuk meemberikan nama dari
TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan
tag FORM.
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 :
Gambar 1.1
penerapan textarea dengan atribut name
COLS
Atribut COLS digunakan untuk menentukan lebar dari
TEXTAREA. Contoh berikut menampilkan 3 komponen textarea dengan lebar textarea
bervariasi :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA>
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA>
<TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA>
</body>
</html>
Bila listing kode diatas dijalankan akan
menghasilkan tampilan pada halaman web seperti berikut :
Gambar 1.2
penerapan textarea dengan atribut rows
READONLY
Atribut ini digunakan agar tulisan yang terdapat
didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY>
Tulisan ini tidak dapat diubah tapi bisa disalin.
</TEXTAREA>
</body>
</html>
Bila listing kode diatas dijalankan akan
menghasilkan tampilan pada halaman web seperti gambar dibawah ini. Bila kursor diarahkan
ke textarea maka kursor tidak bisa aktif dan tidak bisa mengedit tulisan yang
berada dalam textarea, hanya bisa dibaca saja.
Gambar 1.3
penerapan textarea dengan atribut readonly
DISABLED
Atribut ini digunakan agar tulisan yang terdapat didalam
TEXTAREA tidak dapat disalin dan diubah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”terlarang” COLS=40 ROWS=6 DISABLED>
Tulisan ini tidak dapat disalin
maupun diubah.
</TEXTAREA>
</body>
</html>
Maka hasilnya akan terlihat seperti berikut ini,
Gambar 1.4 penerapan
textarea dengan atribut disabled
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 :
Gambar 1.5
form input password
