Mengenal input tipe text pada form html

Pada tutorial kali ini kita akan mengenal input tipe text pada form html. Tag <input> dengan nilai atribut type “Text” akan menampilkan sebuah Textfield yang digunakan sebagai data inputan dari user.

Textfield ini berbentuk kotak persegi panjang, umumnya digunakan sebagai kotak dialog inputan nama, nama kepanjangan (lastname), tanggal lahir, dan lain – lain yang jelas jangan gunakan sebagai inputan password.

Bentuk sederhananya adalah seperti kode sumber di bawah ini :

Dan di bawah ini adalah hasilnya :

mengenal input tipe text pada form html

Mengatur Ukuran Panjang Textfield

Anda pun dapat mengatur ukuran panjang dari Textfield ini menggunakan atribut size.

Perhatikan gambar di bawah dan bandingkan dengan gambar di atas sebelumnya, dimana ukuran textfield nama lebih panjang dari pada textfield tanggal lahir.

mengatur ukuran textfield

Membatasi Inputan Data pada Textfield

Agar isian Textfield tidak panjang, anda dapat membatasinya dengan menggunakan atribut maxlength.

Dari kode sumber di atas, saya membatasi maksimal data inputan adalah 8. Dalam hal ini pemakaian spasi juga dihitung.

membatasi inputan textfield

Mendisable Textfield

Anda pun dapat mendisable Textfield jika anda mau, menggunakan atribut disabled.

Sebuah Textfield di setting disable, biasanya agar pengunjung mengisi form isian lainnya lebih dulu dan dengan begitu Textfield yang di disable akan aktif.

Maka anda tidak akan dapat menginput textfield.

mendisabled textfield

Membuat Textfield Hanya Dapat Dibaca

Andai saja anda seorang Developer lalu anda membuat form perubahan data karyawan misalnya. Dari data form tersebut yang tidak pasti berubah tentunya adalah kolom yang dijadikan sebagai Primary Key.

Berarti kolom tersebut hanya dapat dibaca. Anda dapat menyettingnya dengan menggunakan atribut readonly.

Maka anda hanya dapat membaca textfield, dan tidak dapat menginput nilai apapun ke dalamnya.

fungsi readonly

Fungsi Atribut Name pada Textfield

Atribut name digunakan untuk memberi nama pada Textfield tersebut. Atribut ini baru akan berfungsi jika dikombinasikan dengan bahasa pemrograman website seperti PHP.

Karena inputan data dari Textfield ini akan menjadi nilai variabel, dan nilai variabel ini dipanggil berdasarkan nama Textfield tersebut.

Saya akan memberikan contohnya beserta program PHP – nya. Jadi, mohon anda aktifkan web server yang anda miliki seperti Xampp, Wamp, dan Lamp.

Kode sumber PHP, SIMPAN SEBAGAI FILE PHP…!!! (NamaFile.php)

Setelah itu silahkan anda input sembarang teks pada textfield tersebut.

fungsi atribut name pada form

Fungsi Atribut Value pada Textfield

Fungsi atribut Value pada Textfield digunakan untuk memberikan nilai secara langsung pada Textfield tersebut.

Pada gambar di bawah ini, terlihat bahwa Textfield Nama telah terisi nilai, sedangkan pada Textfield kelas belum terisi nilai.

fungsi atribut value pada html

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us