Melihat Atribut Placeholder HTML5
Salah satu karya baru favorit saya di HTML5 adalah kemampuan untuk menambahkan Teks Placeholder dengan mudah. Teks placeholder adalah teks abu-abu yang Anda temukan di bidang input yang digunakan untuk memberikan petunjuk kepada pengguna tentang input apa yang diharapkan di bidang itu. Setelah pengguna mulai mengetik memasukkan bidang, teks ini akan hilang.
Di masa lalu, kita biasanya melakukan ini dengan JavaScript, sebagai berikut;
Tidak ada yang salah dengan praktik ini, tetapi lebih mudah menggunakan HTML5.
HTML5 memperkenalkan atribut baru dengan nama logis; placeholder. Berikut ini sebuah contoh:
Jika kita melihatnya di browser, input seharusnya sekarang memiliki teks abu-abu, seperti yang terlihat di bawah ini;
Beberapa hal yang harus diperhatikan: sesuai spesifikasi, placeholder atribut tidak boleh digunakan sebagai alternatif untuk label dan juga disarankan agar atribut ini hanya diterapkan memasukkan jenis yang membutuhkan teks, mis. teks, kata sandi, pencarian, e-mail, textarea dan tel.
Menambahkan placeholder ke memasukkan jenis: radio dan kotak centang tidak akan membuat perbedaan.
Placeholder & CSS
Lebih jauh, menata teks placeholder melalui CSS juga dimungkinkan, tetapi pada saat penulisan ini masih terbatas hanya pada peramban Firefox dan Webkit.
Contoh berikut menunjukkan bagaimana kami mengubah teks placeholder menjadi hijau di Webkit dan Firefox;
input :: - webkit-input-placeholder color: green; input: -moz-placeholder color: green;
Hanya untuk diingat, itu :: - webkit-input-placeholder dan : -moz-placeholder hanya akan mempengaruhi teks dan tidak dapat ditulis secara paralel.
input :: - webkit-input-placeholder, input: -moz-placeholder color: green;
Potongan kode ini tidak akan berfungsi.
Selektor Atribut
CSS3 juga datang untuk mendukung atribut ini dengan memperkenalkan [placeholder] pemilih atribut;
masukan [placeholder] border: 1px solid green;
Pada contoh di atas, kami memilih setiap memasukkan yang memiliki placeholder atribut dan ubah perbatasan menjadi hijau.
Kompatibilitas Browser
Fitur HTML5 baru ini tidak mengejutkan tidak didukung di browser lama dan saat ini hanya didukung penuh di: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 dan Internet Explorer 10 (yang belum dirilis secara resmi).
Tempat Pengisian Polyfill
Namun demikian, jika kita perlu menampilkan placeholder di browser lama tetapi masih dapat menggunakan placeholder atribut, kita bisa menggunakan Polyfills. Ada banyak Tempat Pengisian Polyfill di luar sana tetapi dalam contoh ini kita akan menggunakan PlaceMe.js;
The PlaceMe.js, seperti yang Anda lihat dari cuplikan kode di atas, tergantung pada jQuery. Sekarang, jika kita melihatnya di, misalnya, Internet Explorer 9 semua input sekarang harus menampilkan teks placeholder.
- Lihat Demo
- Sumber Unduhan
Pemikiran Akhir
Itu Placeholder HTML5 atribut tentu membuat menambahkan teks placeholder lebih mudah. Sekarang terserah kita, pengembang dan perancang web, untuk memilih metode mana yang akan digunakan: JavaScript atau HTML5.
Jika Anda menganggap bahwa menggunakan Polyfills dan jQuery untuk mendukung browser lama itu berlebihan, maka JavaScript tampaknya lebih cocok untuk pekerjaan itu. Tetapi jika Anda dapat dengan tenang mengabaikan browser lama maka menggunakan Placeholder HTML5 mungkin cara yang lebih baik.
