Html text input enabled

Многогранный тег позволяет создавать поля ввода, кнопки, переключатели и другие интерактивные элементы.

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.

Пример

Скопировать ссылку «Пример» Скопировано

Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:

 Введите название (от 4 до 8 символов):  type="text" name="name" required minlength="4" maxlength="8" size="10"> label for="name">Введите название (от 4 до 8 символов):label> input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" >

Как понять

Скопировать ссылку «Как понять» Скопировано

— это контейнер для интерактивных элементов, с помощью которых пользователь может ввести данные, что-то выбрать, поставить галочку или нажать кнопку.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Если хочется, чтобы введённые или выбранные в данные отправились на сервер, нужно поместить этот тег в либо связать этот элемент с формой через атрибут id .

Атрибут type определяет, какой вид примет элемент и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type = «password» , чтобы сделать переключатель — type = «radio» , а для создания кнопки — type = «button» .

Благодаря огромному количеству вариантов и функций, которые задаются через type и другие атрибуты, стал одним из самых полезных и сложных тегов в HTML.

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

К элементу можно применить все глобальные атрибуты.

type

Скопировать ссылку «type» Скопировано

type — тип элемента : текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.

Типы для ввода данных разных форматов:

text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.
email — поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.
search — поле для поиска.
tel — поле для ввода номера телефона.
url — поле для ввода URL-адреса.
password — ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength .
number — ввод числа.

Типы для различных кнопок:

submit — простая кнопка для отправки формы.
button — обычная кнопка.
image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src , а для альтернативного текста — атрибут alt . Чтобы скорректировать размер изображения в пикселях, используйте атрибуты height и width .
reset — кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.

date — ввод даты без времени: год, месяц и дата.
datetime — local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.
month — ввод месяца и года, без указания часового пояса.
week — ввод номера недели.
time — ввод времени без указания часового пояса.

checkbox — флажки, или чекбокс, с несколькими вариантами на выбор.
radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов.
range — ползунок для выбора чисел из заданного диапазона.
color — виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).
file — выбор файла для отправки.

И отдельно стоит значение hidden . Поле ввода с этим значением атрибута type не видно на странице, но в то же время оно отправляет своё значение на сервер.

Большое преимущество установки правильного значения для type — в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:

value

Скопировать ссылку «value» Скопировано

value — значение элемента , которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name , а значение — value . Например, .

Если — кнопка ( ), то value будет надписью на ней. Значение value для кнопки ( ) не передаётся на сервер.
Если — кнопка в виде картинки ( ), то value будет передано в виде двух значений координат нажатия относительно изображения имя . x и имя . y , где имя — это значение атрибута name .
Если — текстовое поле ( ), то value задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать.
Если вы вставляете флажок или переключатель ( ), то value задаст уникальное значение элемента, по умолчанию on .

Прочие атрибуты

Скопировать ссылку «Прочие атрибуты» Скопировано

name — уникальное имя элемента. Обычно имя нужно, чтобы связать с формой и отправить данные на сервер.
required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.
disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье про autocomplete .
autofocus — фокусируется на элементе сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden .
form — связывает отдельно стоящий элемент с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу . Например, так form = «special — form» . Этот атрибут позволяет разместить в любом месте на странице за пределами . Если его не указать, элемент будет связан с ближайшей формой.
list — связывает с элементом через его ID. В элементе указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из : «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов , как hidden , password , checkbox , radio , file и любых кнопок.
readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.
step — указывает шаг, с которым будет изменяться значение поля. Задаётся в числовом формате и работает с любым из перечисленных типов: number , range , date и datetime — local .
min , max — указывают минимальные и максимальные числовые значения соответственно для полей с типами number и range . Минимальные и максимальные значения даты в формате ГГГГ — ММ — ДД для полей с типами date и datetime — local .
size — указывает ширину поля для ввода в символах.
placeholder — это короткая подсказка (слово или фраза), предназначенная для помощи пользователю при вводе данных, когда поле для ввода пустует.
pattern — задаёт регулярное выражение, по которому проверяется значение элемента .
multiple — указывает, что пользователь может выбрать больше одного значения.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной , используйте этот тег в паре с label .

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

Вот так будет выглядеть простая форма, собранная из нескольких элементов . Мы поместили их все в контейнер , чтобы данные, которые введёт пользователь, можно было отправить на сервер:

    Текстовое поле в одну строчку:  Радиокнопки:   Вариант 1    Вариант 2    Вариант 3    Большое текстовое поле:  form name="test" method="post" action="input1.php"> label> Текстовое поле в одну строчку: input type="text" size="40"> label> fieldset> Радиокнопки: label class="radio-label"> input type="radio" name="browser" value="ie" id="ie"> Вариант 1 label> label class="radio-label"> input type="radio" name="browser" value="opera" id="opera"> Вариант 2 label> label class="radio-label"> input type="radio" name="browser" value="firefox" id="firefox"> Вариант 3 label> fieldset> label> Большое текстовое поле: textarea name="comment" cols="40" rows="3">textarea> label> div> input type="reset" value="Очистить"> input type="submit" value="Отправить"> div> form>

 На практике
 Скопировать ссылку "На практике" Скопировано
 Дока Дог советует
 Скопировать ссылку "Дока Дог советует" Скопировано
 🛠 У есть несколько полезных CSS-псевдоклассов. Например, может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на , он начинает плавно подсвечиваться обводкой.
 🛠 Если вы используете или , можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радиокнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.
 Источник
 
Читайте также:  Выпадающее меню html css при наведении