У будь-якому текстовому полі для введення чого-небудь, можна залишити текст підказки. У цій короткій замітці я вам покажу варіанти додавання в html підказок input-ам.
Взагалі, в більшості випадків при заповненні форми праворуч або ліворуч від поля для заповнення йде пояснювальний текст, який підказує вам, що саме потрібно вписати. Але в деяких випадках підказку необхідно вбудувати в саме поле. Наприклад, коли мова йде про поле для пошуку або в якихось інших випадках.
Перший варіант - атрибут value
Припустимо, у нас є звичайний текстовий input і потрібно підказати користувачу, що він повинен ввести в нього своє улюблене число (це я тільки що придумав таку умовну ситуацію). Це можна зробити за допомогою атрибута value. тобто поле відразу ж отримає певне значення:
Бачимо, що підказка відобразилася, у мене вона навіть не влізла повністю, але це можна легко виправити. Можна через css збільшити ширину поля, можна за допомогою атрибуту size вказати кількість символів, які повинні влазити і повністю відображатися в нього.
Мінус такого підказує тексту в тому, що при отриманні фокусу і навіть при спробі введення текст не зітреться сам. Людині доведеться прати його самостійно і тільки після цього можна буде починати введення потрібного значення. Погодьтеся, це не все зручно.
Другий варіант - атрибут placeholder
А ось цей атрибут є одним з нововведень по роботі з формами в html5.
Як бачимо, який підказує текст той же, тільки атрибут інший. Які зміни? По-перше, колір тексту сіренький, тобто сам браузер підказує, що текст, ймовірно, зітреться на початку введення. Саме так і відбувається - як тільки ви почнете вводити щось, підказка зникне. Цікаво, що при отриманні фокусу в Google Сhrome і деяких інших браузерах текст не стирається, це відбувається тільки після того, як розпочато введення.
В Internet Explorer ж все працює по-іншому і текст стирається вже при отриманні полем фокусу.
Який варіант вибрати?
На сьогоднішній день абсолютно оптимальним я бачу вибір атрибута placeholder. так як він більш зручний для людей. Єдина проблема, він не так добре підтримується старими браузерами. Але саме старими, такими, як IE 8-9. Але тут я не бачу ніяких перешкод, щоб не використовувати атрибут.