Тег label
Тег label задает метку для поля ввода типа input , textarea , select и так далее.
Метка привязывается к определенному полю ввода с помощью атрибута for . В нем следует указывать значение атрибута id поля ввода, к которому привязана метка. Также метка привязывается к элементу, если этот элемент положить вовнутрь тега label. В этом случае атрибут for указывать не надо. Смотрите примеры для лучшего понимания.
По нажатию на метку привязанные к ней чекбоксы или радио кнопочки будут менять свое состояние с отмеченного на неотмеченное и наоборот. Метка в данном случае нужна для удобства: в мелкие элементы формы тяжело попасть курсором, а в длинную метку с текстом — на порядок легче.
Привязанное к метке текстовое поле ввода типа input и textarea будет получать фокус ввода. Фокус — это когда курсор моргает в поле ввода, в этом случае, если вы что-то будете писать на клавиатуре — текст попадет в это поле (см. псевдокласс focus для продвинутого понимания фокуса).
Метку label можно использовать для имитации чекбокса или радио кнопочки. Это нужно для того, чтобы сделать checkbox или radio со своим дизайном (что на CSS запрещено, но с помощью хитрых приемов возможно).
Атрибуты
| Атрибут | Описание |
|---|---|
| for | В данном атрибуте следует указывать значение атрибута id того поля ввода, к которому привязана метка label . |
| accesskey | Задает горячую клавишу, с помощью которой можно перейти к привязаному к метке (через атрибут for ) элементу формы. Подробнее см. атрибут accesskey . |
Пример . Чекбокс
Давайте к флажку checkbox привяжем метку с помощью атрибута for . Понажимайте на метку и вы увидите смену состояния флажка с отмеченного на неотмеченное и наоборот:
Пример . Внутри label
А теперь давайте не будем привязывать метку через атрибут for, а вложим элементы прямо в тег label, в этом случае нажимая на текст label также будем приводить к активации элемент:
Пример . Текстовое поле ввода
Давайте тегу input привяжем метку с помощью атрибута for . Нажатие на метку будет приводить к получению фокуса полем ввода. При этом содержащийся в поле текст (добавим с помощью атрибута value ) станет выделенным. Если начать писать что-либо на клавиатуре — этот текст затрется. Избавится от выделения, не удалив при этом текст, можно кликнув мышкой по полю ввода: фокус при этом не исчезнет, а выделение пропадет:
Как создать поле для ввода текста в html
Тег (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ), кнопка с изображением ( image ) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Демо¶
Синтаксис¶
input /> Закрывающий тег не требуется.
Атрибуты¶
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
Альтернативный текст для кнопки с изображением.
Включает или отключает автозаполнение.
Устанавливает фокус в поле формы.
Предварительно активированный переключатель или флажок.
Параметр, который передаёт на сервер направление текста.
Блокирует доступ и изменение элемента.
Связывает поле с формой по её идентификатору.
Определяет адрес обработчика формы.
Устанавливает способ кодирования данных формы при их отправке на сервер.
Сообщает браузеру каким методом следует передавать данные формы на сервер.
Отменяет встроенную проверку данных на корректность.
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
Указывает на список вариантов, которые можно выбирать при вводе текста.
Верхнее значение для ввода числа или даты.
Максимальное количество символов разрешённых в тексте.
Нижнее значение для ввода числа или даты.
Минимальное количество символов разрешённых в тексте.
Позволяет загрузить несколько файлов одновременно.
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
Устанавливает шаблон ввода.
Выводит подсказывающий текст.
Устанавливает, что поле не может изменяться пользователем.
Обязательное для заполнения поле.
Ширина текстового поля.
Адрес графического файла для поля с изображением.
Шаг приращения для числовых полей.
Сообщает браузеру, к какому типу относится элемент формы.
Также для этого элемента доступны универсальные атрибуты.
accept¶
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла ( ).
Поддержка браузерами
Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.
Синтаксис
input type="file" accept="" /> Значения
Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.
В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.
Значение по умолчанию
alt¶
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
input type="image" alt="" /> Значения
Любая подходящая текстовая строка.
Значение по умолчанию
autocomplete¶
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
1 2 3 4 5 6
input type="text" autocomplete="on | off" /> input type="password" autocomplete="on | off" /> input type="email" autocomplete="on | off" /> input type="search" autocomplete="on | off" /> input type="url" autocomplete="on | off" /> input type="tel" autocomplete="on | off" /> Значения
Включает автозаполнение текста.
Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus¶
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
input autofocus /> Значения
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checked¶
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей ( radiobutton ) может быть отмечен только один элемент группы, для флажков ( checkbox ) допустимо пометить хоть все элементы.
Синтаксис
input type="radio" checked /> input type="checkbox" checked /> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
dirname¶
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .
Синтаксис
input type="text" dirname="" /> input type="search" dirname="" /> Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir .
Значение по умолчанию
disabled¶
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
input disabled /> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
form¶
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами , например, при создании её программно или по соображениям дизайна.
Синтаксис
input type="" form="" /> form id="">. form> Значения
Идентификатор формы (значение атрибута id элемента ).
Значение по умолчанию
formaction¶
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента .
Синтаксис
input type="submit" formaction="" /> Значения
formenctype¶
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента , при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
1 2 3 4
input type="submit" formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" /> Значения
Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ).
Данные не кодируются. Это значение применяется при отправке файлов.
Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
formmethod¶
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
input type="submit" formmethod="get | post" /> Значения
Различают два метода — GET и POST , которые задаются ключевыми словами get и post .
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
Значение по умолчанию
formnovalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей , , а также при наличии атрибута pattern или required у элемента .
Синтаксис
input type="submit" formnovalidate /> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget¶
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
1 2 3 4
input type="submit" formtarget=" | _blank | _self | _parent | _top" /> Значения
В качестве значения используется имя фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
Загружает страницу в новую вкладку браузера.
Загружает страницу в текущую вкладку.
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
list¶
Синтаксис
1 2 3 4 5
input list="" /> datalist id=""> option value="Текст1">option> option value="Текст2">option> datalist> Значения
Имя идентификатора элемента .
Значение по умолчанию
max¶
Устанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
1 2 3
input type="number" max="" /> input type="range" max="" /> input type="date" max="" /> Значения
Целое положительное или отрицательное число (для type=»number» , type=»range» ).
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date» .
Значение по умолчанию
maxlength¶
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
input type="text" maxlength="" /> input type="password" maxlength="" /> Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
min¶
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
1 2 3
input type="number" min="" /> input type="range" min="" /> input type="date" min="" /> Значения
Целое положительное или отрицательное число (для type=»number» , type=»range» ).
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date» .
Значение по умолчанию
minlength¶
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
input type="text" minlength="" /> input type="password" minlength="" /> Значения
Любое целое положительное число.
Значение по умолчанию
multiple¶
Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
input type="file" multiple /> input type="email" multiple /> Значения
Значение по умолчанию
По умолчанию атрибут multiple выключен.
name¶
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
input name="" /> Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
pattern¶
Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.
Поддержка браузерами
Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.
Синтаксис
1 2 3 4 5
input type="email" pattern="" /> input type="tel" pattern="" /> input type="text" pattern="" /> input type="search" pattern="" /> input type="url" pattern="" /> Значения
Некоторые типовые регулярные выражения перечислены в табл. 1.
| Выражение | Описание |
|---|---|
| \d [0-9] | Одна цифра от 0 до 9. |
| \D [^0-9] | Любой символ кроме цифры. |
| \s | Пробел. |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
| [0-9] | Три цифры. |
| [A-Za-z] | Не менее шести латинских букв. |
| [0-9] | Не более трёх цифр. |
| [0-9] | От пяти до десяти цифр. |
| ^[a-zA-Z]+$ | Любое слово на латинице. |
| ^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
| ^[ 0-9]+$ | Любое число. |
| [0-9] | Почтовый индекс. |
| \d+(,\d)? | Число в формате 1,34 (разделитель запятая). |
| \d+(\.\d)? | Число в формате 2.10 (разделитель точка). |
| \d\.\d\.\d\.\d | IP-адрес |
placeholder¶
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
input placeholder="" /> Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
readonly¶
Когда к элементу добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
input type="text" readonly /> input type="password" readonly /> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
required¶
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
input required /> Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
size¶
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
input type="text" size="" /> input type="password" size="" /> Значения
Любое целое положительное число.
Значение по умолчанию
src¶
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
input type="image" src="" /> Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
step¶
Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
input type="number" step="" /> input type="range" step="" /> Значения
Любое целое или дробное число.
Значение по умолчанию
type¶
Сообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
email , tel , url :
Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.
Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.
Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.
Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.
Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.
date , time , datetime :
Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.
Синтаксис
1 2 3
input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" /> Значения
Флажки. Позволяют выбрать более одного варианта из предложенных.
Поле для ввода имени файла, который пересылается на сервер.
Скрытое поле. Оно никак не отображается на веб-странице.
Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
Кнопка для возвращения данных формы в первоначальное значение.
Кнопка для отправки данных формы на сервер.
Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
В HTML5 добавлены новые значения:
Виджет для выбора цвета.
Поле для выбора календарной даты.
Указание даты и времени.
Указание местной даты и времени.
Для адресов электронной почты.
Ползунок для выбора чисел в указанном диапазоне.
Поле для поиска.
Для телефонных номеров.
Как оформить поле ввода: советы и техники
Поле ввода HTML — простой и удобный элемент. Оно содержит более 30 вариантов атрибутов и является одним из самых надежных и заслуживающих изучения HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, приходится прилагать множество усилий, чтобы сделать их максимально удобными. Однако по ходу дела могут возникнуть различные сложности.
Базовая разметка
Помечать поля — отличная CSS-практика. В статье мы будем использовать вложенное поле внутри разметки метки, которое связывает метку и входной тег и устраняет необходимость указывать атрибут for для метки и id для ввода. К тому же это значительно упрощает стилизацию поля.
label >
placeholder">Enter Email
label>
Другой альтернативой может послужить тег div в качестве обертки для таких элементов, как позиционирование, чтобы у них был общий родитель. Тег fieldset также может быть полезен в некоторых случаях. Данный метод позволяет расположить метку и ввод рядом и рассматривать их как единое целое.
id="email-field" type="email"/>
Еще более короткая и допустимая альтернатива — использовать тег label с полем ввода внутри, но с атрибутом aria-label для читателей экрана, а затем применить псевдоэлемент CSS after для создания заполнителя.
// Создание заполнителя
.custom-field::after content: attr(aria-label);
>
Все три альтернативы подойдут для типа стиля, который будет использоваться в данной статье, поэтому выберите любой из них по своему предпочтению. Ниже показано, что все три параметра отображают одно и то же на странице. Результат отображен в браузере Chrome. Для чего мы ставим метку после ввода? Данный шаг дает возможность использовать такие состояния ввода, как focus и т. д. Таким образом мы сможем настроить метку и контролировать ее внешний вид и анимацию. В качестве альтернативы можно использовать Javascript, но это выходит за рамки данного руководства.
Начальная настройка
Если вы не используете CSS-нормализаторы, вам все же стоит добавить такие элементы CSS, как border-box и box-sizing — они важны для данного руководства. Если в конечном итоге готовое поле выглядит не так, как в статье, то, скорее всего, вам понадобится следующий фрагмент кода:
*, *::before, *::after box-sizing: border-box;
>
Базовый стиль
Придадим данной области очень простой и минималистичный вид. Мы cможем улучшить его по ходу работы. Для этого поля размер текста составит 14 пикселей. Элемент placeholder будет располагаться над полем ввода, поэтому необходимо установить относительное ( relative ) положение.
.custom-field font-size: 14px;
position: relative;
>
Стиль поля ввода в основном предназначен для его сброса, например для удаления внешнего вида и границ. Обратите внимание, что ширина поля ввода определяет размер элемента custom-field . Следующей важной деталью здесь является заполнение, которое нужно сопоставить при размещении элемента-заполнителя наверху.
.custom-field input border: none;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f2f2f2;
padding: 12px;
border-radius: 3px;
width: 250px;
font-size: 14px;
>
Мы расположили заполнитель слева от 12 пикселей, чтобы он соответствовал заполнению ввода. Мы также использовали преобразование для выравнивания по вертикали -50% с верхней частью — 22 пикселя. Такое количество пикселей необходимо для создания идеально центрированного преобразования. Верхняя часть 50% также работает, но из-за сообщения об ошибке мы используем пиксели. Чтобы текст заполнителя не был слишком длинным, ограничиваем его ширину максимальным 100%-значением минус 24 пикселя (сумма входных левых и правых отступов). Затем устанавливаем переполнение в виде многоточия.
.custom-field .placeholder position: absolute;
left: 12px;
bottom: 50%;
top: 22px;
transform: translateY(-50%);
width: calc(100% - 24px);
color: #aaa;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
>
Вы можете использовать переменную CSS, но, если вы измените заполнение ввода позже, это также повлияет на заполнитель.
.custom-field .
--field-padding: 12px;
>
.custom-field input .
padding: var(--field-padding);
>
.custom-field .placeholder .
left: var(--field-padding);
width: calc(100% - (var(--field-padding) * 2));
>
Эффект всплывающей метки
Если нажать на поле, заполнитель уменьшиться и переместится в верхний левый угол над полем. Чтобы добавить этот переход, нужно обозначить пространство над полем, куда будет перемещаться заполнитель. Оно также пригодится, если перед полем появится другой элемент. 20 пикселей на верхней границе — отличный вариант: метка остается центрированной, а граница выступает внешней частью.
.custom-field .
border-top: 20px solid transparent;
>
Далее нужно узнать, когда ввод получает фокус, чтобы анимировать заполнитель. Воспользуемся сиблинг-комбинатором, чтобы выбрать заполнитель, а затем уменьшить шрифт, установить темный цвет и поднять его на 10 пикселей.
.custom-field input:focus + .placeholder top: -10px;
font-size: 10px;
color: #222;
>
При наличии значения заполнитель должен оставаться в таком положении, даже если фокус отсутствует. Достичь этой цели можно несколькими способами. Например, использовать псевдокласс ввода :valid вместе с атрибутом required . Однако стоит учитывать, что это работает только для обязательных полей.
required/>
// Если обязательное поле допустимо, значит оно имеет значение
// Если указано большое количество правил подтверждения, то это может привести к нарушению ввода: valid + .placeholder .
>
Другой альтернативой является использование Javascript для определения класса, вне зависимости от наличия значения. Однако данное руководство предназначено только для CSS, поэтому laceholder-shown вместе с атрибутом заполнителя может послужить отличным решением.
// Заполнитель НЕ должен быть пуст,
// чтобы этот метод сработал,
// а - просто пустое пространство
placeholder=" "/>
// Если заполнитель не отображается,
// значит, пользователь начал вводить значение ввода: not(:placeholder-shown) + .placeholder .
>
Чтобы получить хорошую анимацию, можно добавить переход наверх, размер шрифта и цвет в элемент-заполнитель.
.custom-field .placeholder .
transition:
top 0.3s ease,
color 0.3s ease,
font-size 0.3s ease;
>
.custom-field input:not(:placeholder-shown) + .placeholder
.custom-field input:focus + .placeholder top: -10px;
font-size: 10px;
color: #222;
>
Отображение сообщения об ошибке
В зависимости от формы, вам может потребоваться отобразить сообщение об ошибке. Для тега метки можно включить другой элемент для ошибки.
.custom-field .
margin-bottom: 24px;
>
.custom-field .error-message width: 100%;
display: flex;
align-items: center;
padding: 0 8px;
font-size: 12px;
background: #d30909;
color: #fff;
height: 24px;
>
.custom-field .error-message:empty opacity: 0;
>
Важно помнить, что поле ошибки по ширине равно полю ввода и располагается под ним. Вы также можете проверить наличие ошибки и отобразить элемент сообщения об ошибке. Вежливое значение показывает то, как следует сообщить пользователю об ошибке. Для данного сценария необходим такой атрибут, чтобы помочь с текстом mix ox внутри тега label.
Вывод
Данные техники можно применять для создания полей, при этом не затрагивая доступность и SEO. Разобраться в них более подробно вам поможет исходный код. А в этом ролике представлена информация о стилизации полей ввода:
Нужно создать поле для ввода текста которое будет автоматически увеличиваться вместе с набранным текстом (по высоте)
Нужно создать поле для ввода текста которое будет автоматически увеличиваться вместе с набранным текстом (по высоте). Использовать textarea нельзя, тк там есть странный угол который никак не вписывается в дизайн. Подобная вещь реализована в telegra.ph.
Отслеживать
задан 20 ноя 2017 в 14:39
user272575 user272575
При удалении символов поле должно уменьшатся обратно.
– user272575
20 ноя 2017 в 15:28
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Чтобы убрать странный угол, задайте resize: none
const textarea = document.getElementById('textarea'); // Учитываем padding const padding = textarea.offsetHeight - textarea.clientHeight; textarea.oninput = e => < // Схлопываем textarea.style.height = 'auto'; // Расхлопываем textarea.style.height = textarea.scrollHeight + padding + 'px'; >textarea< resize: none; /* Убираем "Странный угол" */ >Отслеживать
ответ дан 20 ноя 2017 в 14:56
13.1k 2 2 золотых знака 25 25 серебряных знаков 56 56 бронзовых знаков
Поле должно расти не постоянно, а только тогда когда строка заполняется.
– user272575
20 ноя 2017 в 15:00
@brachkoff Так вроде так оно и есть
20 ноя 2017 в 15:03
@brachkoff у меня так и происходит. Какой у вас браузер?
20 ноя 2017 в 15:04
странно, все стало работать. Спасибо.
– user272575
20 ноя 2017 в 15:12
@Darth можете закинуть код на jsfiddle.net тк не понятно куда именно вы вставляли js. Кроме того если стереть текст поле почему то остается того же размера.
– user272575
20 ноя 2017 в 15:36
contenteditable div.d1 This is a sample Отслеживать
ответ дан 20 ноя 2017 в 16:19
Vladimir Logvinov Vladimir Logvinov
99 3 3 бронзовых знака
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.