Text Field

Text field atau lebih dikenal dengan text box, merupakan elemen form yang sangat penting. Text field ini berfungsi untuk menampilkan hasil ketikan keyboard ke dalam aplikasi web. Membuat text field pada halaman HTML tidaklah sulit hanya dengan menyisipkan tag <INPUT> ke dalam Tag FORM. Atribut pada text field terdiri dari atribut type, name, ID, value, dan event (digunakan untuk javascript handler). Atribut type merupakan atribut pembeda jenis inputan yang digunakan, jenis inputan pada tag <INPUT> yang harus diketahui antara lain text, password, radio, checkbox, dan submit. Perbedaan dari kelima jenis inputan tersebut dapat dilihat pada
tabel berikut :

Input Type	Tag	Fungsi
Text	<input type ="text">	Merupakan tag HTML yang digunakan sebagai kontrol input teks  dari keyboard.
Radio	<input type ="radio">	Merupakan tag kontrol form fieldset yang digunakan untuk memilih satu dari banyak pilihan yang tersedia.
Checkbox	<input type ="checkbox">	Merupakan tag kontrol form fieldset yang digunakan untuk memilih satu atau lebih dari banyak pilihan yang tersedia dengan cara mencentang (checklist) pilihan tersebut.
Password	<input type ="password">	Merupakan tag kontrol form untuk memasukan data input yang harus dirahasiakan contohnya adalah password.
Submit	<input type ="submit">	Merupakan tag yang digunakan untuk menangani proses eksekusi atau pengiriman data pada form.

Bentuk umum penulisan :

  Text box --> <input type="text" name="txnama" id="fieldnama"  value="Fathurahman" />

  Radio --> <input type="radio" name="gender" id="gender"  value="Pria" />

  Checkbox --> <input type="checkbox" name="cxPekerjaan" id="pekerjaan"  value="Karyawan" />

  Password --> <input type="password" name="txpassword"  id="fpassword" value="123456 " />

  Submit --> <input type="submit" name="kirim" id="fsubmit"  value="Simpan" />

Output :
Text box -->
Radio --> Pria
Checkbox -->  Karyawan
Password -->
Submit -->

Penjelasan :

Atribut name berfungsi sebagai pengenal ketika proses eksekusi oleh server, setiap atribut name pada tag input ini harus harus memiliki nilai yang berbeda dengan atribut name inputan yang lainnya. Hal ini untuk mencegah server merekam duplikasi data isian dari formulir terkecuali untuk jenis inputan radio.

Contohnya memilih jenis kelamin. Jenis kelamin terdiri dari 2 tipe yaitu pria dan wanita. setiap orang memiliki satu jenis kelamin, sehingga nilai input radio yang akan diproses server hanya 1 nilai yang bernilai TRUE (Benar). Contoh kode:

<input  type="radio" name="gender" value="pria" /> Pria

<input  type="radio" name="gender" value="wanita" /> Wanita

Output :
Pria   Wanita


Dari 2 kode diatas, hanya 1 jawaban yang akan diproses oleh server dikarenakan fungsi radio button hanya memilih satu jawaban paling benar diantara banyak pilihan. Pengguna tidak dapat memilih dua jawaban dari pilihan tersebut. Berbeda dengan contoh berikut :

<input  type="radio" name="gender" value="pria" /> Pria

<input  type="radio" name="gender2" value="wanita" /> Wanita

Contoh 2 buah radio button yang memiliki makna berbeda :
Pria   Wanita

Kedua input radio tersebut memiliki arti berbeda dikarenakan atribut name kedua input radio diatas memiliki nilai yang berbeda pula. Sehingga server akan mengeksekusi kedua input radio tersebut. Bagi programer pemula biasanya kesalahan sering terjadi pada kejadian ini. Untuk itu setiap programer dianjurkan untuk berhati hati dalam memberi nilai pada atribut name.


Atribut id berfungsi sebagai unique identity yang berguna untuk mengidentifikasi jenis inputan. Atribut id ini berguna saat mengembeded kode javascript pada halaman HTML maupun menggunakan kode CSS.
Atribut value berfungsi sebagai nilai awal dari inputan, value ini dapat pula bernilai kosong jika tidak dideklarasikan terlebih dahulu.

Atribut lainnya yang harus diketahui pada input text field antara lain size, maxlength, disabled, dan readonly. Atribut size merupakan atribut yang mendeskripsikan lebar text field yang digunakan, sedangkan maxlength mendeskripsikan jumlah karakter inputan yang dapat diterima dan ditampikan pada text field. Atribut size dan maxlength hanya berlaku pada input type text dan password saja. Atribut disabled terdiri dari dua nilai yaitu TRUE dan FALSE, ketika text field dengan atribut disabled atau dinon-aktifkan bernilai TRUE maka text field tersebut tidak memiliki nilai sama sekali dan tidak akan diproses oleh server.

Biasanya text field non aktif tersebut hanya berfungsi sebagai informasi biasa saja sedangkan text field aktif mempunyai nilai FALSE pada atribut disablednya. Jadi tanpa dideklarasikan pun text field telah memiliki nilai default FALSE pada atribut disabled nya.  Berbeda dengan atribut disabled, atribut readonly mendeskripsikan bahwa text field yang digunakan masih aktif dan dapat diproses oleh server. Hanya saja pengguna tidak dapat mengubah nilai apapun pada text field tersebut.