PemprogramanWebkj2

1. Kegiatan Belajar
1 : Menyajikan Komponen Entri Teks
a. Tujuan Pembelajaran.
Setelah mengikuti kegiatan belajar 1 ini siswa diharapkan dapat :
1) Memahami komponen entri teks
2) 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.
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, dimanakursor 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>

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. 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>

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>

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.