0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>19 сен 2025</li>
2
<ul><li>19 сен 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как правильно использовать тег для создания форм на веб-странице.</p>
4
</ul><p>Рассказываем, как правильно использовать тег для создания форм на веб-странице.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Тег <input> используют, чтобы создать поля ввода в HTML-формах. С его помощью можно добавить на страницу текстовое поле, поле для пароля, выбора даты или загрузки файла. <input> показывает пользователю элемент, с помощью которого он может ввести или выбрать данные. Потом эти данные можно отправить на сервер или обработать с использованием JavaScript.</p>
7
<p>Тег <input> используют, чтобы создать поля ввода в HTML-формах. С его помощью можно добавить на страницу текстовое поле, поле для пароля, выбора даты или загрузки файла. <input> показывает пользователю элемент, с помощью которого он может ввести или выбрать данные. Потом эти данные можно отправить на сервер или обработать с использованием JavaScript.</p>
8
<p>Тег поддерживает разные типы полей и множество атрибутов, которые помогают контролировать его поведение и внешний вид. В статье мы подробно разберём, как с ним работать.</p>
8
<p>Тег поддерживает разные типы полей и множество атрибутов, которые помогают контролировать его поведение и внешний вид. В статье мы подробно разберём, как с ним работать.</p>
9
<p><strong>Содержание</strong></p>
9
<p><strong>Содержание</strong></p>
10
<ul><li><a>Как пишется тег <input></a></li>
10
<ul><li><a>Как пишется тег <input></a></li>
11
<li><a>Основные типы полей <input></a></li>
11
<li><a>Основные типы полей <input></a></li>
12
<li><a>Основные атрибуты тега input</a></li>
12
<li><a>Основные атрибуты тега input</a></li>
13
<li><a>Как организовать валидацию данных</a></li>
13
<li><a>Как организовать валидацию данных</a></li>
14
<li><a>Как использовать <input> в составе формы и отправлять данные на сервер</a></li>
14
<li><a>Как использовать <input> в составе формы и отправлять данные на сервер</a></li>
15
<li><a>Доступность полей ввода</a></li>
15
<li><a>Доступность полей ввода</a></li>
16
<li><a>Полезные советы и лайфхаки</a></li>
16
<li><a>Полезные советы и лайфхаки</a></li>
17
</ul><p><input> - это одиночный тег. У него нет закрывающего парного тега, поэтому запись всегда выглядит как одна строка. Чтобы тег работал, ему задают атрибуты. Единственный обязательный атрибут - type, который определяет, какое именно поле появится на странице.</p>
17
</ul><p><input> - это одиночный тег. У него нет закрывающего парного тега, поэтому запись всегда выглядит как одна строка. Чтобы тег работал, ему задают атрибуты. Единственный обязательный атрибут - type, который определяет, какое именно поле появится на странице.</p>
18
<p>Простейший пример:</p>
18
<p>Простейший пример:</p>
19
<input type="text"><p>В этом случае браузер создаст текстовое поле, в которое можно ввести строку.</p>
19
<input type="text"><p>В этом случае браузер создаст текстовое поле, в которое можно ввести строку.</p>
20
<p>Если изменить значение атрибута type, то изменятся свойства поля. Например:</p>
20
<p>Если изменить значение атрибута type, то изменятся свойства поля. Например:</p>
21
<input type="password"><p>Это поле скрывает введённые символы точками или звёздочками.</p>
21
<input type="password"><p>Это поле скрывает введённые символы точками или звёздочками.</p>
22
<p>Атрибут type определяет, какое именно поле появится на странице. Вот основные варианты:</p>
22
<p>Атрибут type определяет, какое именно поле появится на странице. Вот основные варианты:</p>
23
<input type="text" placeholder="Ваше имя"><p>Используется для ввода обычного текста: имени, названия города, комментария.</p>
23
<input type="text" placeholder="Ваше имя"><p>Используется для ввода обычного текста: имени, названия города, комментария.</p>
24
<input type="password" placeholder="Пароль"><p>Похоже на текстовое, но введённые символы скрываются.</p>
24
<input type="password" placeholder="Пароль"><p>Похоже на текстовое, но введённые символы скрываются.</p>
25
<input type="email" placeholder="example@mail.com"><p>Проверяет, похоже ли введённое значение на адрес почты.</p>
25
<input type="email" placeholder="example@mail.com"><p>Проверяет, похоже ли введённое значение на адрес почты.</p>
26
<input type="number" placeholder="0"><p>Позволяет вводить только цифры. Можно задать минимальное и максимальное значение, чтобы ограничить ввод.</p>
26
<input type="number" placeholder="0"><p>Позволяет вводить только цифры. Можно задать минимальное и максимальное значение, чтобы ограничить ввод.</p>
27
<input type="checkbox"> Подписаться на новости<p>Даёт возможность выбрать "да" или "нет". Можно поставить несколько галочек в одной форме.</p>
27
<input type="checkbox"> Подписаться на новости<p>Даёт возможность выбрать "да" или "нет". Можно поставить несколько галочек в одной форме.</p>
28
<input type="radio" name="gender" value="male"> Мужской <input type="radio" name="gender" value="female"> Женский<p>Позволяет выбрать только один вариант из группы.</p>
28
<input type="radio" name="gender" value="male"> Мужской <input type="radio" name="gender" value="female"> Женский<p>Позволяет выбрать только один вариант из группы.</p>
29
<input type="file"><p>Открывает диалог выбора файла на компьютере.</p>
29
<input type="file"><p>Открывает диалог выбора файла на компьютере.</p>
30
<input type="date"><p>Показывает календарь, где можно выбрать дату. Часто используется в формах бронирования и регистрации.</p>
30
<input type="date"><p>Показывает календарь, где можно выбрать дату. Часто используется в формах бронирования и регистрации.</p>
31
<input type="hidden" name="id" value="123"><p>Не отображается на странице, но отправляется вместе с формой. Полезно для передачи технических данных, которые пользователь не должен изменять.</p>
31
<input type="hidden" name="id" value="123"><p>Не отображается на странице, но отправляется вместе с формой. Полезно для передачи технических данных, которые пользователь не должен изменять.</p>
32
<p>Тег <input> работает только с атрибутами - они задают его поведение и внешний вид. Вот основные:</p>
32
<p>Тег <input> работает только с атрибутами - они задают его поведение и внешний вид. Вот основные:</p>
33
<input type="text" name="username"><p>Имя поля. Именно по этому имени сервер понимает, к каким данным относится введённое значение.</p>
33
<input type="text" name="username"><p>Имя поля. Именно по этому имени сервер понимает, к каким данным относится введённое значение.</p>
34
<input type="text" value="Гость"><p>Значение по умолчанию: оно будет стоять в поле ещё до того, как пользователь что-то введёт. Такие поля используют, например, в формах входа: туда автоматически подставляется логин, который пользователь вводил в прошлый раз.</p>
34
<input type="text" value="Гость"><p>Значение по умолчанию: оно будет стоять в поле ещё до того, как пользователь что-то введёт. Такие поля используют, например, в формах входа: туда автоматически подставляется логин, который пользователь вводил в прошлый раз.</p>
35
<input type="email" placeholder="example@mail.com"><p>Текст-подсказка внутри поля. Она исчезает, когда пользователь начинает вводить данные.</p>
35
<input type="email" placeholder="example@mail.com"><p>Текст-подсказка внутри поля. Она исчезает, когда пользователь начинает вводить данные.</p>
36
<input type="password" required><p>Делает поле обязательным для заполнения. Без него форма не отправится.</p>
36
<input type="password" required><p>Делает поле обязательным для заполнения. Без него форма не отправится.</p>
37
<input type="text" value="Только для чтения" readonly><p>Поле видно, но редактировать его нельзя. Здесь может быть, например, номер заказа или системная информация.</p>
37
<input type="text" value="Только для чтения" readonly><p>Поле видно, но редактировать его нельзя. Здесь может быть, например, номер заказа или системная информация.</p>
38
<input type="text" value="Отключено" disabled><p>Поле полностью выключено: пользователь не может ввести данные, такое поле не отправится вместе с формой.</p>
38
<input type="text" value="Отключено" disabled><p>Поле полностью выключено: пользователь не может ввести данные, такое поле не отправится вместе с формой.</p>
39
<input type="text" maxlength="10"><p>Ограничивает количество вводимых символов. Например, не больше 10.</p>
39
<input type="text" maxlength="10"><p>Ограничивает количество вводимых символов. Например, не больше 10.</p>
40
<input type="text" pattern="[0-9]{3}"><p>Задаёт шаблон для проверки ввода. В этом примере можно ввести только три цифры. Для создания шаблона используются регулярные выражения (regex).</p>
40
<input type="text" pattern="[0-9]{3}"><p>Задаёт шаблон для проверки ввода. В этом примере можно ввести только три цифры. Для создания шаблона используются регулярные выражения (regex).</p>
41
<p>Например, квадратные скобки [] задают набор допустимых символов.</p>
41
<p>Например, квадратные скобки [] задают набор допустимых символов.</p>
42
<ul><li>[0-9] - любая цифра.</li>
42
<ul><li>[0-9] - любая цифра.</li>
43
<li>[A-Za-z] - любая буква латинского алфавита.</li>
43
<li>[A-Za-z] - любая буква латинского алфавита.</li>
44
</ul><p>А фигурные скобки<strong>{} </strong>- указывают на количество символов.</p>
44
</ul><p>А фигурные скобки<strong>{} </strong>- указывают на количество символов.</p>
45
<ul><li>{3} - ровно три символа.</li>
45
<ul><li>{3} - ровно три символа.</li>
46
<li>{2,5} - от двух до пяти символов.</li>
46
<li>{2,5} - от двух до пяти символов.</li>
47
</ul><p>Чтобы форма работала правильно, важно убедиться, что пользователь ввёл данные в нужном формате. В HTML есть встроенные инструменты для этого, а при необходимости можно добавить собственные проверки через JavaScript.</p>
47
</ul><p>Чтобы форма работала правильно, важно убедиться, что пользователь ввёл данные в нужном формате. В HTML есть встроенные инструменты для этого, а при необходимости можно добавить собственные проверки через JavaScript.</p>
48
<p>Многие атрибуты автоматически проверяют ввод. Например:</p>
48
<p>Многие атрибуты автоматически проверяют ввод. Например:</p>
49
<input type="email" name="user_email" required><ul><li>type="email" заставит браузер проверить, похож ли введённый адрес на email (например, содержит ли он @).</li>
49
<input type="email" name="user_email" required><ul><li>type="email" заставит браузер проверить, похож ли введённый адрес на email (например, содержит ли он @).</li>
50
<li>required не даст отправить форму, если поле пустое.</li>
50
<li>required не даст отправить форму, если поле пустое.</li>
51
</ul><p>Если данные не подходят, браузер покажет предупреждение без дополнительного кода.</p>
51
</ul><p>Если данные не подходят, браузер покажет предупреждение без дополнительного кода.</p>
52
<p>Можно задать правило с помощью атрибута pattern, о котором мы подробно говорили выше.</p>
52
<p>Можно задать правило с помощью атрибута pattern, о котором мы подробно говорили выше.</p>
53
<p>Если встроенных правил недостаточно, можно добавить JavaScript:</p>
53
<p>Если встроенных правил недостаточно, можно добавить JavaScript:</p>
54
<form> <input type="text" id="code" placeholder="Введите код"> <button type="submit">Отправить</button> </form> <script> // Находим форму на странице const form = document.querySelector("form"); // Находим поле ввода по его id const code = document.getElementById("code"); // Добавляем обработчик события submit (отправка формы) form.addEventListener("submit", function(event) { // Проверяем, равняется ли значение поля "123" if (code.value !== "123") { // Если условие не выполнено, отменяем отправку формы event.preventDefault(); // Показываем сообщение пользователю alert("Код введён неправильно"); } }); </script><p>Форма - это контейнер, который объединяет поля <input> и сообщает браузеру, куда и как отправлять введённые пользователем данные.</p>
54
<form> <input type="text" id="code" placeholder="Введите код"> <button type="submit">Отправить</button> </form> <script> // Находим форму на странице const form = document.querySelector("form"); // Находим поле ввода по его id const code = document.getElementById("code"); // Добавляем обработчик события submit (отправка формы) form.addEventListener("submit", function(event) { // Проверяем, равняется ли значение поля "123" if (code.value !== "123") { // Если условие не выполнено, отменяем отправку формы event.preventDefault(); // Показываем сообщение пользователю alert("Код введён неправильно"); } }); </script><p>Форма - это контейнер, который объединяет поля <input> и сообщает браузеру, куда и как отправлять введённые пользователем данные.</p>
55
<form action="/submit" method="post"> <label for="name">Имя</label> <input id="name" name="username" type="text"> <label for="email">Email</label> <input id="email" name="user_email" type="email" required> <input type="submit" value="Отправить"> </form><p>Что здесь происходит:</p>
55
<form action="/submit" method="post"> <label for="name">Имя</label> <input id="name" name="username" type="text"> <label for="email">Email</label> <input id="email" name="user_email" type="email" required> <input type="submit" value="Отправить"> </form><p>Что здесь происходит:</p>
56
<ul><li>form - это сам контейнер. Атрибут action указывает адрес, на который браузер отправит данные. method задаёт способ отправки (здесь post - данные будут в теле запроса).</li>
56
<ul><li>form - это сам контейнер. Атрибут action указывает адрес, на который браузер отправит данные. method задаёт способ отправки (здесь post - данные будут в теле запроса).</li>
57
<li>Для каждого поля важно задать name. При отправке сервер получит пары "имя = значение" и сможет по name найти нужное значение.</li>
57
<li>Для каждого поля важно задать name. При отправке сервер получит пары "имя = значение" и сможет по name найти нужное значение.</li>
58
<li>required запрещает браузеру отправку пустого поля.</li>
58
<li>required запрещает браузеру отправку пустого поля.</li>
59
<li>Кнопка type="submit" запускает процесс отправки формы.</li>
59
<li>Кнопка type="submit" запускает процесс отправки формы.</li>
60
</ul><p>Если указан метод get, браузер упаковывает все видимые поля в строку запроса (query string) и добавляет её к URL: /search? q=чай& category=напитки - это видимая часть адреса. Такой способ годится для поиска и фильтров, потому что URL можно скопировать и отправить.</p>
60
</ul><p>Если указан метод get, браузер упаковывает все видимые поля в строку запроса (query string) и добавляет её к URL: /search? q=чай& category=напитки - это видимая часть адреса. Такой способ годится для поиска и фильтров, потому что URL можно скопировать и отправить.</p>
61
<p>Если method="post", данные идут в теле HTTP-запроса. По умолчанию браузер использует формат application/x-www-form-urlencoded, то есть пары вида username=ivan& age=30. Этот способ подходит для отправки конфиденциальных или больших данных.</p>
61
<p>Если method="post", данные идут в теле HTTP-запроса. По умолчанию браузер использует формат application/x-www-form-urlencoded, то есть пары вида username=ivan& age=30. Этот способ подходит для отправки конфиденциальных или больших данных.</p>
62
<p>Если вы не указали method, браузер по умолчанию использует GET. Если не указали action, форма отправится на тот же адрес, где находится страница.</p>
62
<p>Если вы не указали method, браузер по умолчанию использует GET. Если не указали action, форма отправится на тот же адрес, где находится страница.</p>
63
<p>Для передачи файлов нужны две вещи: поле type="file" с name и атрибут enctype="multipart/form-data" у формы:</p>
63
<p>Для передачи файлов нужны две вещи: поле type="file" с name и атрибут enctype="multipart/form-data" у формы:</p>
64
<form action="/upload" method="post" enctype="multipart/form-data"> <label for="avatar">Аватар</label> <input id="avatar" name="avatar" type="file"> <input type="submit" value="Загрузить"> </form><p>multipart/form-data разбивает запрос на части и отправляет файл вместе с другими полями. Без такого enctype файл не дойдёт корректно.</p>
64
<form action="/upload" method="post" enctype="multipart/form-data"> <label for="avatar">Аватар</label> <input id="avatar" name="avatar" type="file"> <input type="submit" value="Загрузить"> </form><p>multipart/form-data разбивает запрос на части и отправляет файл вместе с другими полями. Без такого enctype файл не дойдёт корректно.</p>
65
<ul><li>Поля без name не включаются в отправку. Если вы забыли name, сервер не увидит значение.</li>
65
<ul><li>Поля без name не включаются в отправку. Если вы забыли name, сервер не увидит значение.</li>
66
<li>Поля с disabled не отправляются. Поля readonly отправляются (их нельзя изменить, но их значение включается в запрос).</li>
66
<li>Поля с disabled не отправляются. Поля readonly отправляются (их нельзя изменить, но их значение включается в запрос).</li>
67
</ul><ul><li>При GET и строке запроса ? q=book& page=2 сервер получит q=book и page=2.</li>
67
</ul><ul><li>При GET и строке запроса ? q=book& page=2 сервер получит q=book и page=2.</li>
68
<li>При POST с application/x-www-form-urlencoded тело запроса будет q=book& page=2.</li>
68
<li>При POST с application/x-www-form-urlencoded тело запроса будет q=book& page=2.</li>
69
<li>При multipart/form-data сервер получит части: текстовые поля и отдельную часть с содержимым файла.</li>
69
<li>При multipart/form-data сервер получит части: текстовые поля и отдельную часть с содержимым файла.</li>
70
</ul><p>Иногда нужно отправлять форму без перезагрузки страницы. Для этого перехватывают событие submit, собирают данные и отправляют через fetch.</p>
70
</ul><p>Иногда нужно отправлять форму без перезагрузки страницы. Для этого перехватывают событие submit, собирают данные и отправляют через fetch.</p>
71
<form id="myForm" action="/submit" method="post"> <input name="username" type="text" value="Гость"> <input name="avatar" type="file"> <button type="submit">Отправить</button> </form> <script> const form = document.getElementById('myForm'); form.addEventListener('submit', function (event) { event.preventDefault(); // Не отправляем форму стандартным способом // FormData автоматически соберёт все поля формы, включая файлы const data = new FormData(form); // Отправляем на сервер методом POST fetch(form.action, { method: 'POST', body: data // При использовании FormData заголовок Content-Type устанавливается автоматически }) .then(response => response.ok ? response.text() : Promise.reject(response)) .then(text => { // Здесь можно показать сообщение об успехе пользователю console.log('Ответ сервера:', text); }) .catch(err => { // Обработка ошибок отправки console.error('Ошибка отправки:', err); }); }); </script><p>Важно: при таком подходе сервер должен уметь принимать формат, в котором вы отправляете данные. FormData по умолчанию отправляет multipart/form-data.</p>
71
<form id="myForm" action="/submit" method="post"> <input name="username" type="text" value="Гость"> <input name="avatar" type="file"> <button type="submit">Отправить</button> </form> <script> const form = document.getElementById('myForm'); form.addEventListener('submit', function (event) { event.preventDefault(); // Не отправляем форму стандартным способом // FormData автоматически соберёт все поля формы, включая файлы const data = new FormData(form); // Отправляем на сервер методом POST fetch(form.action, { method: 'POST', body: data // При использовании FormData заголовок Content-Type устанавливается автоматически }) .then(response => response.ok ? response.text() : Promise.reject(response)) .then(text => { // Здесь можно показать сообщение об успехе пользователю console.log('Ответ сервера:', text); }) .catch(err => { // Обработка ошибок отправки console.error('Ошибка отправки:', err); }); }); </script><p>Важно: при таком подходе сервер должен уметь принимать формат, в котором вы отправляете данные. FormData по умолчанию отправляет multipart/form-data.</p>
72
<p>Форма должна быть удобной для всех пользователей, включая людей с нарушениями зрения, моторики или тех, кто использует клавиатуру вместо мыши. Для этого необходимо правильно оформлять поля <input> и использовать специальные атрибуты и элементы.</p>
72
<p>Форма должна быть удобной для всех пользователей, включая людей с нарушениями зрения, моторики или тех, кто использует клавиатуру вместо мыши. Для этого необходимо правильно оформлять поля <input> и использовать специальные атрибуты и элементы.</p>
73
<p>Каждое поле ввода должно сопровождаться текстовой подписью, которая объясняет, что именно нужно ввести. Подпись связывается с полем с помощью атрибута for, значение которого должно совпадать с id поля.</p>
73
<p>Каждое поле ввода должно сопровождаться текстовой подписью, которая объясняет, что именно нужно ввести. Подпись связывается с полем с помощью атрибута for, значение которого должно совпадать с id поля.</p>
74
<p><strong>Пример:</strong></p>
74
<p><strong>Пример:</strong></p>
75
<label for="username">Имя:</label> <input id="username" name="username" type="text" required /><p>Если указать тег label, при клике на текст подписи курсор автоматически попадает в поле, а скринридеры - программы для чтения текста с экрана - озвучивают подпись вместе с полем. Всё это упрощает навигацию с помощью клавиатуры.</p>
75
<label for="username">Имя:</label> <input id="username" name="username" type="text" required /><p>Если указать тег label, при клике на текст подписи курсор автоматически попадает в поле, а скринридеры - программы для чтения текста с экрана - озвучивают подпись вместе с полем. Всё это упрощает навигацию с помощью клавиатуры.</p>
76
<ul><li><label> - эта подпись всегда видна, она остаётся на экране.</li>
76
<ul><li><label> - эта подпись всегда видна, она остаётся на экране.</li>
77
<li>placeholder - временная подсказка, исчезает при вводе.</li>
77
<li>placeholder - временная подсказка, исчезает при вводе.</li>
78
</ul><p>С точки зрения доступности label и placeholder не взаимозаменяемы. После начала ввода пользователь может забыть, что именно требовалось, поэтому ему нужна постоянная подсказка.</p>
78
</ul><p>С точки зрения доступности label и placeholder не взаимозаменяемы. После начала ввода пользователь может забыть, что именно требовалось, поэтому ему нужна постоянная подсказка.</p>
79
<p><strong>Пример:</strong></p>
79
<p><strong>Пример:</strong></p>
80
<label for="email">Email:</label> <input id="email" type="email" placeholder="example@mail.com" /><p>ARIA-атрибуты помогают скринридерам правильно озвучивать поля ввода.</p>
80
<label for="email">Email:</label> <input id="email" type="email" placeholder="example@mail.com" /><p>ARIA-атрибуты помогают скринридерам правильно озвучивать поля ввода.</p>
81
<p><strong>aria-label</strong></p>
81
<p><strong>aria-label</strong></p>
82
<input type="search" aria-label="Поиск по сайту" /><p>Скринридер озвучит "Поиск по сайту" как описание поля, даже если визуально подпись отсутствует. Используется, если невозможно применить <label>.</p>
82
<input type="search" aria-label="Поиск по сайту" /><p>Скринридер озвучит "Поиск по сайту" как описание поля, даже если визуально подпись отсутствует. Используется, если невозможно применить <label>.</p>
83
<p><strong>aria-describedby</strong></p>
83
<p><strong>aria-describedby</strong></p>
84
<p>Указывает элемент, содержащий дополнительное описание поля. Скринридер озвучивает это описание после основной метки.</p>
84
<p>Указывает элемент, содержащий дополнительное описание поля. Скринридер озвучивает это описание после основной метки.</p>
85
<input type="text" aria-describedby="hint" /> <span id="hint">Введите номер заказа без пробелов</span><p><strong>aria-required</strong></p>
85
<input type="text" aria-describedby="hint" /> <span id="hint">Введите номер заказа без пробелов</span><p><strong>aria-required</strong></p>
86
<p>Обозначает, что поле обязательно для заполнения. Используется в дополнение к required, чтобы скринридер озвучил это требование.</p>
86
<p>Обозначает, что поле обязательно для заполнения. Используется в дополнение к required, чтобы скринридер озвучил это требование.</p>
87
<input type="text" aria-required="true" /><p><strong>aria-invalid</strong></p>
87
<input type="text" aria-required="true" /><p><strong>aria-invalid</strong></p>
88
<p>Показывает, что введённые данные некорректны. Скринридер озвучит, что поле содержит ошибку.</p>
88
<p>Показывает, что введённые данные некорректны. Скринридер озвучит, что поле содержит ошибку.</p>
89
<input type="email" aria-invalid="true" /><p>Атрибут можно устанавливать динамически при проверке формы.</p>
89
<input type="email" aria-invalid="true" /><p>Атрибут можно устанавливать динамически при проверке формы.</p>
90
<p>Пользователь должен иметь возможность переходить между полями с помощью клавиши Tab. Это работает автоматически, если:</p>
90
<p>Пользователь должен иметь возможность переходить между полями с помощью клавиши Tab. Это работает автоматически, если:</p>
91
<ul><li>поля имеют корректную разметку;</li>
91
<ul><li>поля имеют корректную разметку;</li>
92
<li>не нарушена последовательность в DOM;</li>
92
<li>не нарушена последовательность в DOM;</li>
93
<li>не используются нестандартные элементы без tabindex.</li>
93
<li>не используются нестандартные элементы без tabindex.</li>
94
</ul><p>Чтобы формы были удобнее, используйте два атрибута, которые напрямую влияют на то, как человек вводит данные.</p>
94
</ul><p>Чтобы формы были удобнее, используйте два атрибута, которые напрямую влияют на то, как человек вводит данные.</p>
95
<p><strong>autocomplete</strong>подсказывает браузеру, что именно ожидается в поле. Так он может заранее предложить имя, адрес или email, которые пользователь уже вводил. Это экономит время и снижает количество ошибок.</p>
95
<p><strong>autocomplete</strong>подсказывает браузеру, что именно ожидается в поле. Так он может заранее предложить имя, адрес или email, которые пользователь уже вводил. Это экономит время и снижает количество ошибок.</p>
96
<ul><li>autocomplete="name" - значит, здесь имя человека, можно подставить сохранённое.</li>
96
<ul><li>autocomplete="name" - значит, здесь имя человека, можно подставить сохранённое.</li>
97
<li>autocomplete="email" - поле для адреса почты.</li>
97
<li>autocomplete="email" - поле для адреса почты.</li>
98
<li>autocomplete="off" - вообще не предлагать подсказок.</li>
98
<li>autocomplete="off" - вообще не предлагать подсказок.</li>
99
</ul><p>Атрибут управляет автоподстановкой и экономит пользователю время, если задан верно.</p>
99
</ul><p>Атрибут управляет автоподстановкой и экономит пользователю время, если задан верно.</p>
100
<p>autocapitalize управляет виртуальной клавиатурой на телефонах и планшетах. С его помощью можно автоматически начинать каждое слово с заглавной буквы (подходит для имён), включить верхний регистр для кодов или совсем отключить автоматические заглавные буквы.</p>
100
<p>autocapitalize управляет виртуальной клавиатурой на телефонах и планшетах. С его помощью можно автоматически начинать каждое слово с заглавной буквы (подходит для имён), включить верхний регистр для кодов или совсем отключить автоматические заглавные буквы.</p>
101
<p>autocapitalize - это настройка виртуальной клавиатуры (в основном на мобильных устройствах). Она указывает, как обрабатывать буквы при вводе:</p>
101
<p>autocapitalize - это настройка виртуальной клавиатуры (в основном на мобильных устройствах). Она указывает, как обрабатывать буквы при вводе:</p>
102
<ul><li>autocapitalize="words" - каждое слово начинается с заглавной буквы (удобно для имён, названий городов).</li>
102
<ul><li>autocapitalize="words" - каждое слово начинается с заглавной буквы (удобно для имён, названий городов).</li>
103
<li>autocapitalize="characters" - все буквы становятся заглавными (полезно для кодов, аббревиатур).</li>
103
<li>autocapitalize="characters" - все буквы становятся заглавными (полезно для кодов, аббревиатур).</li>
104
<li>autocapitalize="off" - никаких автоматических заглавных, всё пишется как есть.</li>
104
<li>autocapitalize="off" - никаких автоматических заглавных, всё пишется как есть.</li>
105
</ul><p>Оба атрибута не меняют содержимое формы сами по себе, но делают ввод естественнее и быстрее, если настроить их правильно.</p>
105
</ul><p>Оба атрибута не меняют содержимое формы сами по себе, но делают ввод естественнее и быстрее, если настроить их правильно.</p>
106
<p>Атрибут inputmode не меняет сам <input>, но управляет тем, какую клавиатуру увидит человек на телефоне или планшете: обычную, цифровую или спецсимволы.</p>
106
<p>Атрибут inputmode не меняет сам <input>, но управляет тем, какую клавиатуру увидит человек на телефоне или планшете: обычную, цифровую или спецсимволы.</p>
107
<input type="tel" inputmode="numeric" placeholder="+7 (___) ___-__-__"><p>Здесь мы не только явно указываем, что это телефон (type="tel"), но и просим устройство показать цифры (inputmode="numeric"). В итоге человек сразу набирает номер, не отвлекаясь.</p>
107
<input type="tel" inputmode="numeric" placeholder="+7 (___) ___-__-__"><p>Здесь мы не только явно указываем, что это телефон (type="tel"), но и просим устройство показать цифры (inputmode="numeric"). В итоге человек сразу набирает номер, не отвлекаясь.</p>
108
<p>Точно так же можно сделать поле для PIN-кода:</p>
108
<p>Точно так же можно сделать поле для PIN-кода:</p>
109
<input type="text" inputmode="numeric" maxlength="4" placeholder="Введите PIN"><p>Для email лучше подсказать:</p>
109
<input type="text" inputmode="numeric" maxlength="4" placeholder="Введите PIN"><p>Для email лучше подсказать:</p>
110
<input type="email" inputmode="email" placeholder="example@mail.com"><p>На клавиатуре появится значок @, а иногда и .com.</p>
110
<input type="email" inputmode="email" placeholder="example@mail.com"><p>На клавиатуре появится значок @, а иногда и .com.</p>
111
<p>Поиск тоже можно сделать удобнее:</p>
111
<p>Поиск тоже можно сделать удобнее:</p>
112
<input type="search" inputmode="search" placeholder="Поиск по сайту"><p>Кнопка на клавиатуре превратится в "Поиск" вместо обычного Enter.</p>
112
<input type="search" inputmode="search" placeholder="Поиск по сайту"><p>Кнопка на клавиатуре превратится в "Поиск" вместо обычного Enter.</p>
113
<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
113
<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>