Ad Code

Menyajikan Komponen Entri Teks

Reizky Rismawan 5/11/2017 11:35:00 PM
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

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>

Gambar  1.6 form input text

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>

                                Gambar  1.7 hasil form input dengan hidden

Bila tag type=”hidden” dihilangkan maka pada <input type=”hidden”> maka menghasilkan tampilan sebagai berikut :

 <form >
  Nama : <input type=”text” name=”fnama”><br>
<input name=”negara” value=”Indonesia”>
 


 <input type=”submit” value=”Submit”>
 </form>
                                               
Gambar  1.8 hasil form input tanpa atribut hidden

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">&nbsp;&nbsp;&nbsp;<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 :

Gambar  1.9 pembuatan form  input text sederhana

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>&nbsp;</p></td>
</fieldset>
</body>
</html>

Post a Comment

0 Comments

Close Menu