skip to main content

<input>

html

Кратко 🔗

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

Пример 🔗

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

<label for="name">Введите название (от 4 до 8 символов):</label>

<input
type="text"
id="name"
name="name"
required
minlength="4"
maxlength="8"
size="10"
/>

Как это понять 🔗

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

Как пишется 🔗

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

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

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

Атрибуты 🔗

Некоторые атрибуты подходят только для определённых типов <input>.

  • autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. В настройках браузера пользователь может отключать эту функцию сам. autocomplete работает только с полем для ввода текста. Есть два значения:
    • on — разрешает автозаполнение текста;
    • off — запрещает автозаполнение. Обычно off используют для полей, где вводят одноразовые пароли, типа капчи, или конфиденциальные данные.
  • autofocus — фокусируется на элементе <input> сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden.
  • disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
  • form — привязывает элемент <input> к форме сбора данных на странице. Для этого мы указываем тот же id, что и у нужного тега <form>. Этот атрибут позволяет разместить <input> в любом месте на странице за пределами <form>. Если его не указать, элемент <input> будет отсылать к блжайшей форме.
  • list — связывает <input> с элементом <datalist> через его id. В элементе <datalist> указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города и браузер предложил варианты из <datalist>: «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов <input>, как hidden, password, checkbox, radio, file и любых кнопок.
  • name — уникальное имя элемента. Обычно имя нужно, чтобы связать <input> с формой и отправить данные на сервер.
  • readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.
  • required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение, вроде «Сначала заполните это поле».
  • tabindex — когда пользователь нажимает кнопку Tab, фокус падает на следующий интерактивный элемент на странице. tabindex задаёт порядковый номер для этого элемента. Например, чтобы перевести фокус на <input tabindex="3">, нужно нажать Tab три раза.
  • type — тип элемента <input>: текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку. А вообще типов много:
    • button — обычная кнопка;
    • checkbox — флажки с несколькими вариантами на выбор;
    • color — виджет для выбора цвета;
    • date — ввод даты без времени: год, месяц и день;
    • datetime-local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются;
    • email — поле для ввода емейла. Браузер проверит, есть ли в нём знак «@» и домен;
    • file — выбор файла для отправки на сайт;
    • hidden — хитрый элемент, который не виден пользователю, но в то же время он отправляет своё значение на сервер;
    • image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src, а для текста на случай незагрузки картинки — атрибут alt. Чтобы скорректировать размер изображения в пикселях, используй атрибуты height и width;
    • month — ввод месяца и года, без указания часового пояса;
    • number — поле для ввода числа;
    • password — поле для ввода пароля. По мере ввода символы будут меняться на звёздочки «***». Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength;
    • radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов;
    • range — ползунок для выбора чисел из заданного диапазона;
    • reset — кнопка, которая сбрасывает всё, что ввёл пользователь ранее в поля текущей формы;
    • search — поле для поиска;
    • submit — простая кнопка для отправки формы;
    • tel — поле для ввода номера телефона;
    • text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку;
    • time — ввод времени без указания часового пояса;
    • url — поле для ввода URL-адреса;
    • week — ввод номера недели.
  • value — значение элемента <input>, которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name, а значение — value. Например, <input type="radio" name="answer" value="a1">.
  • Если <input> — кнопка (<input type="button | reset | submit">), то value будет надписью на ней.
  • Если — текстовое поле (<input type="password | text">), то value задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать.
  • Если вы вставляете флажок или переключатель (<input type="checkbox | radio">), то value задаст уникальное имя элемента.

Подсказки 🔗

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

<label for="peas">Это лейбл, который подскажет, что делает "input" ниже></label>
<input type="checkbox" name="peas" id="peas" />

Для этого дайте <input> атрибут id, а <label> — атрибут for с таким же значением, что у id.

Ещё пример 🔗

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Тег INPUT</title>
</head>
<body>
<form name="test" method="post" action="input1.php">
<label
>
Текстовое поле в одну строчку:
<input type="text" size="40" />
</label>
<label
>
Радио-кнопки: <input type="radio" name="browser" value="ie" /> Вариант
1<br />
<input type="radio" name="browser" value="opera" /> Вариант 2<br />
<input type="radio" name="browser" value="firefox" /> Вариант 3<br />
</label>
<label
>
Большое текстовое поле:
<textarea name="comment" cols="40" rows="3"></textarea>
</label>
<label>
<input type="submit" value="Отправить" />
<input type="reset" value="Очистить"
/>
</label>
</form>
</body>
</html>

В работе 🔗

🛠 У <input> есть несколько псевдоклассов в CSS, которые полезно использовать. Например, <input> может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как в инструменте Bootstrap, когда ты нажимаешь на <input>, он начинает плавно подсвечиваться цветом сзади.

🛠 Если ты используешь <input type="radio">, или <input type="checkbox">, можно сами инпуты вообще скрыть: будет так же работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радио-кнопки на чистом CSS. Например, я как-то стилизовал чекбоксы на сайте в стиле классических переключалок из iOS.


Автор: Владимир 👨‍🔧