CARAMEMBUAT TEXTBOX DENGAN HTML DAN CSS

Posted by : Afdha Alif Selasa, 27 Oktober 2015

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.

view plainprint?
<html>  
<head>  
<title> Belajar HTML Membuat Text Box </title>  
</head>  
<body>  
<h1>  
 Masukkan Nama Anda </h1>  
<form method="post" action="">  
Nama <input type="text" name="nama"/>  
<input type="submit" name="submit" value="Kirim"/>  
</form>  
</body>  
</html>  

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 :

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 :