Атрибут placeholder тега | HTML справочник
HTML тег <textarea>Значение и применение
Атрибут placeholder (HTML тега <textarea>) указывает текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.
Поддержка браузерами
Синтаксис:
<textarea placeholder = "text">
Значения атрибута
| Значение | Описание |
|---|---|
| text | Задает текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент. |
Отличия HTML 4.01 от HTML 5
Атрибут считается новым в HTML 5.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута placeholder HTML тега <textarea></title> </head> <body> <form> <textarea placeholder = "Введите информацию в текстовое поле"></textarea> <textarea placeholder = "Поле доступно только для чтения" readonly></textarea><br> <input type = "submit" name = "submitInfo" value = "отправить"> </form> </body> </html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом placeholder мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Пример использования атрибута placeholder HTML тега <textarea> (подсказка для пользователя).HTML тег <textarea>Стилизация HTML5 плейсхолдера с помощью CSS / Habr
В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:<input type=«text» placeholder=«type here some text» />
Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.
Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.
CSS правила для webkit и mozilla:
input::-webkit-input-placeholder {}
input:-moz-placeholder {}
Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:
input:-moz-placeholder,
input::-webkit-input-placeholder { }
Еще несколько примеров:
/* стили для webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}/* стили для mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}
Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.
Список поддерживаемых CSS стилей для атрибута placeholder:
| Chrome 10(Win 7) | Chrome 11 (Win 7) | Firefox 4(Win 7) | Safari 3.1(Win XP & OS X) | Safari 5(Win 7 & OS X) | Opera 11(Win 7) | |
| background-color | нет | нет | + | нет | + | нет |
| border | нет | нет | + | нет | + | нет |
| color | + | + | + | нет | + | нет |
| font-size | + | + | + | нет | + | нет |
| font-style | + | + | + | нет | + | нет |
| font-weight | + | + | + | нет | + | нет |
| letter-spacing | + | + | + | нет | + | нет |
| line-height | нет | нет | нет | нет | нет | нет |
| padding top/bottom | нет | нет | + | нет | + | нет |
| padding left/right | нет | нет | + | нет | нет | нет |
| text-decoration | нет | нет | + | нет | + | нет |
| text-transform | нет | нет | + | нет | + | нет |
Стилизуем Placeholder с помощью CSS
Используйте псевдоэлемент::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.::placeholder {
color: deeppink;
font-size: 5rem;
text-transform: uppercase;
}HTML
Префиксы
Используемый мной синтаксис поддерживается большинством современных браузеров:
::placeholder {
color: deeppink;
}Но для более старых браузеров вам нужно будет использовать префиксы поставщика.
/* WebKit, Edge */
::-webkit-input-placeholder {
color: deeppink;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: deeppink;
opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder {
color: deeppink;
opacity: 1;
}
/* IE 10-11 */
:-ms-input-placeholder {
color: deeppink;
}
/* Edge */
::-ms-input-placeholder {
color: deeppink;
}
/* MODERN BROWSER */
::placeholder {
color: deeppink;
}Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.
Псевдоэлемент против псевдокласса
Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.
Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.
Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.
Непрозрачность Placeholder в Firefox по умолчанию
Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.
CSS-обработка неверных селекторов
Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:
::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{
color: deeppink;
opacity: 1;
}Ну, это потому, что в CSS3 было правило, которое гласит:
группа селекторов, содержащая недопустимый селектор, недействительна.
Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор
h2 {
color: blue;
} Так что в нашем HTML это будет выглядеть как ожидалось
Но что произойдет, если мы добавим неверный селектор CSS
h2, /* valid */
h3::poop /* invalid */
{
color: blue;
}Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.
Вот почему нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.
⭐️ НО! похоже, это можно изменить в CSS4.
Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.
Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»
Поддерживаемые стили
Вот список всех стилей, которые вы можете применить к вашему placeholder:
backgroundсвойстваcolorfontсвойстваletter-spacingline-heightopacitytext-decorationtext-indenttext-transformvertical-alignword-spacing
Проблемы доступности
Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.
Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:
- Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
- Без label пользователи не могут проверить свою работу перед отправкой формы.
- Когда появляются сообщения об ошибках, люди не знают, как решить проблему.
Автоматически добавлять Vendor-префиксы
Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.
#CSSHTML свойства тега textarea — студия Палыча
Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.
Размеры textarea
Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).
<textarea cols="30" rows="5"></textarea>Или указывать размер в CSS свойствах:
textarea {
width : 450px;
height : 120px;
}В первом случае мы точно знаем, сколько символов поместится в форме, во втором случае будет проблема, так как иногда буквы будут обрезаны.
Замещающий текст в HTML5
Существует новый атрибут в качестве части формы HTML5, называется placeholder. Это свойство textarea показывает текст приглушенно серым цветом (также работает для полей Input), который исчезает при наведении фокуса на поле или при вводе хотя бы одного символа в поле.
<textarea placeholder="Замещающий текст" cols="30" rows="5"></textarea>Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.
<textarea cols="20" onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';">поиск...</textarea>Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.
Как убрать свечение у textarea?
Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе. Вы можете удалить ее из браузера следующим образом:
textarea {
outline : none;
}Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта. Удаляя это оформление, вы создаете сложности для посетителя вашего сайта.
Как удалить маркер изменения размера у textarea?
Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:
textarea {
resize : none;
}Nowrap — убрать переносы
Чтобы текст автоматически не переносился, в CSS можно использовать #whatever { white-space: nowrap}. Но это описание не работает с textarea. Если вы хотите иметь возможность не переносить слова на новую строку в textarea, пока вы не нажмете Enter (будет возникать горизонтальная полоса прокрутки, а не срабатывает), вам придется использовать атрибут wrap=»off».
<textarea wrap="off" cols="30" rows="5"></textarea>Как убрать полосу прокрутки textarea в Internet Explorer?
IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда текста станет больше, чем высота поля. Слава богу, overflow:auto удалит прокрутки, но включит прокрутку автоматически в случае необходимости.
textarea {
overflow : auto;
}Источник: Textarea tricks
Исчезающий placeholder при фокусе
Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. Если мы посмотрим html-справочник, то найдем там следующее описание — выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
К сожалению скрывание placeholder-а происходит по-разному — где то при получении фокуса, а где то при наличии хотя бы одного введенного символа. Мне нравится именно первый вариант, но как сделать его для всех браузеров, которые его поддерживают? Для этого определим следующие правила:
:focus::-webkit-input-placeholder { color: transparent } :focus::-moz-placeholder { color: transparent } :focus:-moz-placeholder { color: transparent } :focus:-ms-input-placeholder { color: transparent }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
:focus::-webkit-input-placeholder { color: transparent }
:focus::-moz-placeholder { color: transparent }
:focus:-moz-placeholder { color: transparent }
:focus:-ms-input-placeholder { color: transparent }
|
Скрываем placeholder красиво
Как реализовать скрытие placeholder в одном стиле для всех браузеров разобрались, теперь посмотрим, как можно это анимировать.
Плавное изменение прозрачности:
input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
|
Сдвиг вправо
input::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
input::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
|
Сдвиг вниз
input::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
input::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
|
Поддержка устаревшими браузерами
Сейчас placeholder работает только в современных браузерах, но существует JS плагин, который позволяет не изобретая велосипедов делать этот атрибут кроссбраузерным — placeholder.js