Belajar HTML Membuat Text Box

Posted by Yogo Prestiyanto on Friday, November 30, 2012

Belajar HTML Membuat Text Box





















Pernahkah anda melihat tampilan seperti gambar diatas? Namanya adalah text box, kadang ini dipakai dalam membuat form seperti untuk pendaftaran atau memasukkan suatu data. Daripada berbasa-basi langsung saya akan contohkan cara membuat text box sederhana.



Simpan script diatas dengan nama index.html atau terserah anda yang penting ekstensi harus .html. Jalankan pada browser pilihan anda, saya memakai Mozilla Firefox versi terbaru.
Untuk tampilannya sebagai berikut :

Belajar HTML Membuat Text Box



Komponen text box dibuat dengan menuliskan tag berikut :
<input type="text" name="namakomponen"/>
Dengan atribut name diisi dengan nama komponen yang sesuai dengan data isian. Nama komponen harus dituliskan karena akan digunakan pada script pengolah data nantinya.


Untuk membuat tombol kirim berikut tag-nya :
<input type="submit" name="submit" value="Kirim"/>
Tombol ini nantinya akan digunakan untuk mengirim data ke script pengolah data.


Untuk mengatur lebar field text box yaitu dengan menambahkan atribut size="nilai", nilai disini adalah bilangan integer atau angka.
Berikut contohnya :
<input type="text" name="nama" size="40"/>

Atribut lain yang harus dipahami adalah value="nilai". Atribut ini digunakan untuk menampilkan nilai ke dalam text box.
Berikut contohnya :
<input type="text" name="nama" size="40" value="Yogo Prestiyanto"/>
Jika anda menambahkan atribut value seperti contoh diatas, maka akan menjadi seperti ini :

Belajar HTML Membuat Text Box


















Semoga artikel ini bermanfaat !!!



   

9 comments: