Keterangan Pada Input Teks (Facebook Style)

Seorang web programmer pasti sering berurusan dengan input teks yang dengan  HTML dituliskan menggunakan tag <input type=text>. Input teks digunakan pada form registrasi, form login, kotak pencarian, dan lain-lain.
Contohnya seperti gambar di bawah:

contoh-login-form

 

Seperti terlihat di atas, terkadang kotak input teks tersebut memerlukan keterangan. Contohnya apakah kotak tersebut untuk mengisikan username, password, dan seterusnya. Keterangan umumnya dituliskan di sebelah input teks.

Namun ada cara lain untuk memberi keterangan. Perhatikan halaman sign up Facebook.com. Anda akan melihat tampilan seperti gambar berikut:

tampilan-facebook-sign-up

 

Terlihat keterangan seperti First Name, Last Name, dan seterusnya terletak di dalam input teks dan bukan di sebelahnya. Facebook mungkin bukan yang pertama melakukannya, tetapi cara ini bisa dibilang sebuah alternatif yang dapat membuat website terlihat lebih modern.

Bagaimana cara membuatnya? Ternyata tidak perlu script yang rumit-rumit. Cukup gunakan atribut placeholder. Atribut ini mulai dikenal pada HTML5.

Berikut contoh penggunaannya:

<input type=”text” name=”nama” placeholder=”Nama Anda”>

Dengan perintah tersebut, saat anda mengetikkan sesuatu pada input teks, keterangan yang terdapat di dalamnya otomatis hilang,dan jika anda menghapus ketikan anda pada input teks, keterangan tersebut akan otomatis tampil lagi. HTML5 memang membuat pekerjaan menjadi lebih mudah. 🙂

(Visited 240 times, 1 visits today)

Leave a Reply