Popular Post

Posted by : Afdha Alif Selasa, 27 Oktober 2015

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. 


  1. <html>  
  2. <head>  
  3. <title> Belajar HTML Membuat Text Box </title>  
  4. </head>  
  5. <body>  
  6. <h1>  
  7.  Masukkan Nama Anda </h1>  
  8. <form method="post" action="">  
  9. Nama <input type="text" name="nama"/>  
  10. <input type="submit" name="submit" value="Kirim"/>  
  11. </form>  
  12. </body>  
  13. </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 :

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















{ 2 komentar... read them below or Comment }

  1. Gan kalo mau pake textbox tapi isi nya Hyperlink link gimana gan?

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

- Copyright © Afdha Alif - Date A Live - Powered by Blogger - Designed by Johanes Djogan -