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>29 авг 2025</li>
2
<ul><li>29 авг 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Разбираем, что такое форма в HTML, как правильно её сделать, какие элементы и атрибуты в ней используются, смотрим типовые примеры реализации.</p>
4
</ul><p>Разбираем, что такое форма в HTML, как правильно её сделать, какие элементы и атрибуты в ней используются, смотрим типовые примеры реализации.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Формы - это главный способ общения пользователя с сайтом. С их помощью можно ввести данные и отправить их на сервер: оставить отзыв, зарегистрироваться, оформить заказ или просто найти нужную страницу через поиск.</p>
7
<p>Формы - это главный способ общения пользователя с сайтом. С их помощью можно ввести данные и отправить их на сервер: оставить отзыв, зарегистрироваться, оформить заказ или просто найти нужную страницу через поиск.</p>
8
<p>В этой статье разберём, зачем нужен <form>, какие атрибуты он поддерживает, как работают поля и кнопки, что происходит при отправке данных и как правильно проверять ввод.</p>
8
<p>В этой статье разберём, зачем нужен <form>, какие атрибуты он поддерживает, как работают поля и кнопки, что происходит при отправке данных и как правильно проверять ввод.</p>
9
<p><strong>Содержание</strong></p>
9
<p><strong>Содержание</strong></p>
10
<ul><li><a>Что делает тег <form> и зачем он нужен</a></li>
10
<ul><li><a>Что делает тег <form> и зачем он нужен</a></li>
11
<li><a>Основные атрибуты тега <form>: action, method, enctype</a></li>
11
<li><a>Основные атрибуты тега <form>: action, method, enctype</a></li>
12
<li><a>Элементы внутри формы: input, textarea, button, select</a></li>
12
<li><a>Элементы внутри формы: input, textarea, button, select</a></li>
13
<li><a>Что происходит при отправке формы</a></li>
13
<li><a>Что происходит при отправке формы</a></li>
14
<li><a>Валидация данных в HTML-формах</a></li>
14
<li><a>Валидация данных в HTML-формах</a></li>
15
<li><a>Доступность форм для всех пользователей</a></li>
15
<li><a>Доступность форм для всех пользователей</a></li>
16
<li><a>Как оформить форму с помощью CSS</a></li>
16
<li><a>Как оформить форму с помощью CSS</a></li>
17
<li><a>Примеры типичных форм</a></li>
17
<li><a>Примеры типичных форм</a></li>
18
<li><a>Типичные ошибки при работе с формами</a></li>
18
<li><a>Типичные ошибки при работе с формами</a></li>
19
<li><a>Полезные советы и лайфхаки</a></li>
19
<li><a>Полезные советы и лайфхаки</a></li>
20
<li><a>Полезные ссылки</a></li>
20
<li><a>Полезные ссылки</a></li>
21
</ul><p>За работу форм отвечает тег <form>. Он создаёт контейнер, в котором находятся все поля ввода, кнопки и другие элементы. Без него браузер не поймёт, что делать с введённой информацией.</p>
21
</ul><p>За работу форм отвечает тег <form>. Он создаёт контейнер, в котором находятся все поля ввода, кнопки и другие элементы. Без него браузер не поймёт, что делать с введённой информацией.</p>
22
<p>Простейшая форма может быть такой:</p>
22
<p>Простейшая форма может быть такой:</p>
23
<form action="/submit" method="post"> <label for="name">Ваше имя:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Отправить</button> </form><p>На странице будет видно только поля и кнопку, сам контейнер <form> не отобразится.</p>
23
<form action="/submit" method="post"> <label for="name">Ваше имя:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Отправить</button> </form><p>На странице будет видно только поля и кнопку, сам контейнер <form> не отобразится.</p>
24
<p>Вот так выглядит форма, код которой мы посмотрели выше. На странице видно только поля и кнопку, сам контейнер <form> не отображается.</p>
24
<p>Вот так выглядит форма, код которой мы посмотрели выше. На странице видно только поля и кнопку, сам контейнер <form> не отображается.</p>
25
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы форма знала, куда и как отправлять данные, с тегом <form> используют специальные атрибуты. Самые важные из них - action, method и enctype.</p>
25
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы форма знала, куда и как отправлять данные, с тегом <form> используют специальные атрибуты. Самые важные из них - action, method и enctype.</p>
26
<p>Здесь указывается адрес страницы или скрипта, который примет данные формы.</p>
26
<p>Здесь указывается адрес страницы или скрипта, который примет данные формы.</p>
27
<form action="/send.php" method="post"> ... </form><p>Если не указать action, форма отправится на ту же страницу, где находится.</p>
27
<form action="/send.php" method="post"> ... </form><p>Если не указать action, форма отправится на ту же страницу, где находится.</p>
28
<p>Есть два основных метода:</p>
28
<p>Есть два основных метода:</p>
29
<ul><li>get - данные добавляются прямо в адресную строку. Подходит для поиска и фильтров.</li>
29
<ul><li>get - данные добавляются прямо в адресную строку. Подходит для поиска и фильтров.</li>
30
<li>post - данные уходят "внутри" запроса, и в адресе их не видно. Используется для форм регистрации, входа и других форм с личной информацией.</li>
30
<li>post - данные уходят "внутри" запроса, и в адресе их не видно. Используется для форм регистрации, входа и других форм с личной информацией.</li>
31
</ul><!-- GET-запрос --> <form action="/search" method="get"> <input type="text" name="query" placeholder="Поиск..."> <button type="submit">Найти</button> </form> <!-- POST-запрос --> <form action="/login" method="post"> <input type="text" name="username" placeholder="Логин"> <input type="password" name="password" placeholder="Пароль"> <button type="submit">Войти</button> </form><p>Когда использовать get:</p>
31
</ul><!-- GET-запрос --> <form action="/search" method="get"> <input type="text" name="query" placeholder="Поиск..."> <button type="submit">Найти</button> </form> <!-- POST-запрос --> <form action="/login" method="post"> <input type="text" name="username" placeholder="Логин"> <input type="password" name="password" placeholder="Пароль"> <button type="submit">Войти</button> </form><p>Когда использовать get:</p>
32
<ul><li>если данные не секретные,</li>
32
<ul><li>если данные не секретные,</li>
33
<li>если нужно поделиться ссылкой (например, результатами поиска),</li>
33
<li>если нужно поделиться ссылкой (например, результатами поиска),</li>
34
<li>если объём данных маленький.</li>
34
<li>если объём данных маленький.</li>
35
</ul><p>Когда использовать post:</p>
35
</ul><p>Когда использовать post:</p>
36
<ul><li>если данные конфиденциальны (логины, пароли, личная информация),</li>
36
<ul><li>если данные конфиденциальны (логины, пароли, личная информация),</li>
37
<li>если форма большая (регистрация, заказ, загрузка файлов),</li>
37
<li>если форма большая (регистрация, заказ, загрузка файлов),</li>
38
<li>если нужна дополнительная безопасность.</li>
38
<li>если нужна дополнительная безопасность.</li>
39
</ul><p>Этот атрибут нужен, если в форме есть загрузка файлов.</p>
39
</ul><p>Этот атрибут нужен, если в форме есть загрузка файлов.</p>
40
<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="document"> <button type="submit">Загрузить</button> </form><p>Если файлов нет, про enctype можно не думать - браузер справится сам.</p>
40
<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="document"> <button type="submit">Загрузить</button> </form><p>Если файлов нет, про enctype можно не думать - браузер справится сам.</p>
41
<ul><li>target - указывает, где открыть результат после отправки формы. Чаще всего это то же окно (_self), но можно и новое (_blank).</li>
41
<ul><li>target - указывает, где открыть результат после отправки формы. Чаще всего это то же окно (_self), но можно и новое (_blank).</li>
42
<li>novalidate - отключает встроенную проверку формы. Используйте, если хотите проверять данные с помощью своего скрипта.</li>
42
<li>novalidate - отключает встроенную проверку формы. Используйте, если хотите проверять данные с помощью своего скрипта.</li>
43
<li>autocomplete - включает или выключает автозаполнение полей. Значения: on (включено) или off (выключено).</li>
43
<li>autocomplete - включает или выключает автозаполнение полей. Значения: on (включено) или off (выключено).</li>
44
</ul><p>Пример формы со всеми атрибутами:</p>
44
</ul><p>Пример формы со всеми атрибутами:</p>
45
<form action="/submit" method="post" enctype="multipart/form-data" target="_blank" novalidate autocomplete="off"> </form><p>Внутри тега <form> размещаются различные элементы управления для ввода данных.</p>
45
<form action="/submit" method="post" enctype="multipart/form-data" target="_blank" novalidate autocomplete="off"> </form><p>Внутри тега <form> размещаются различные элементы управления для ввода данных.</p>
46
<p>Это основной элемент формы. С его помощью пользователь вводит имя, пароль, email и другие данные.</p>
46
<p>Это основной элемент формы. С его помощью пользователь вводит имя, пароль, email и другие данные.</p>
47
<form action="/register" method="post"> <!-- Текстовое поле --> <input type="text" name="username" placeholder="Имя пользователя"> <!-- Поле для email --> <input type="email" name="email" placeholder="Email"> <!-- Поле для пароля --> <input type="password" name="password" placeholder="Пароль"> <!-- Чекбокс --> <input type="checkbox" name="agree" id="agree"> <label for="agree">Согласен с условиями</label> <!-- Радиокнопки --> <input type="radio" name="gender" value="male" id="male"> <label for="male">Мужской</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Женский</label> </form><p>Для текста большого объёма: комментариев, отзывов и тому подобного.</p>
47
<form action="/register" method="post"> <!-- Текстовое поле --> <input type="text" name="username" placeholder="Имя пользователя"> <!-- Поле для email --> <input type="email" name="email" placeholder="Email"> <!-- Поле для пароля --> <input type="password" name="password" placeholder="Пароль"> <!-- Чекбокс --> <input type="checkbox" name="agree" id="agree"> <label for="agree">Согласен с условиями</label> <!-- Радиокнопки --> <input type="radio" name="gender" value="male" id="male"> <label for="male">Мужской</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Женский</label> </form><p>Для текста большого объёма: комментариев, отзывов и тому подобного.</p>
48
<textarea name="message" rows="5" cols="40" placeholder="Ваше сообщение"></textarea><p>Позволяет выбрать один из заранее заданных вариантов.</p>
48
<textarea name="message" rows="5" cols="40" placeholder="Ваше сообщение"></textarea><p>Позволяет выбрать один из заранее заданных вариантов.</p>
49
<select name="country"> <option value="">Выберите страну</option> <option value="ru">Россия</option> <option value="ua">Украина</option> <option value="by">Беларусь</option> </select><p>Управляют отправкой или очисткой формы.</p>
49
<select name="country"> <option value="">Выберите страну</option> <option value="ru">Россия</option> <option value="ua">Украина</option> <option value="by">Беларусь</option> </select><p>Управляют отправкой или очисткой формы.</p>
50
<!-- Кнопка отправки --> <button type="submit">Отправить форму</button> <!-- Кнопка сброса --> <button type="reset">Очистить</button> <!-- Обычная кнопка для JavaScript --> <button type="button" onclick="doSomething()">Выполнить действие</button><p>Главное правило: у каждого поля должен быть атрибут name. Без него данные не попадут на сервер.</p>
50
<!-- Кнопка отправки --> <button type="submit">Отправить форму</button> <!-- Кнопка сброса --> <button type="reset">Очистить</button> <!-- Обычная кнопка для JavaScript --> <button type="button" onclick="doSomething()">Выполнить действие</button><p>Главное правило: у каждого поля должен быть атрибут name. Без него данные не попадут на сервер.</p>
51
<p>Когда пользователь нажимает кнопку "Отправить", браузер выполняет несколько действий:</p>
51
<p>Когда пользователь нажимает кнопку "Отправить", браузер выполняет несколько действий:</p>
52
<ul><li><strong>Собирает данные.</strong>Берутся все значения из полей, у которых есть атрибут name.</li>
52
<ul><li><strong>Собирает данные.</strong>Берутся все значения из полей, у которых есть атрибут name.</li>
53
<li><strong>Кодирует данные.</strong>Информация преобразуется в нужный формат, заданный атрибутом enctype.</li>
53
<li><strong>Кодирует данные.</strong>Информация преобразуется в нужный формат, заданный атрибутом enctype.</li>
54
<li><strong>Формирует запрос.</strong>Используется метод, указанный в method, - GET или POST.</li>
54
<li><strong>Формирует запрос.</strong>Используется метод, указанный в method, - GET или POST.</li>
55
<li><strong>Отправляет запрос.</strong>Данные уходят по адресу из action.</li>
55
<li><strong>Отправляет запрос.</strong>Данные уходят по адресу из action.</li>
56
<li><strong>Показывает ответ.</strong>Сервер возвращает результат - например, сообщение "Спасибо" или страницу с ошибкой.</li>
56
<li><strong>Показывает ответ.</strong>Сервер возвращает результат - например, сообщение "Спасибо" или страницу с ошибкой.</li>
57
</ul><p><strong>Валидация</strong> - это проверка данных перед отправкой формы. Браузер может сам проверить, всё ли заполнено правильно, и сказать пользователю, если что-то не так.</p>
57
</ul><p><strong>Валидация</strong> - это проверка данных перед отправкой формы. Браузер может сам проверить, всё ли заполнено правильно, и сказать пользователю, если что-то не так.</p>
58
<p>HTML5 умеет проверять данные без единой строчки кода на JavaScript. Для этого у элементов формы есть специальные атрибуты.</p>
58
<p>HTML5 умеет проверять данные без единой строчки кода на JavaScript. Для этого у элементов формы есть специальные атрибуты.</p>
59
<p>Если поставить этот атрибут, пользователь не сможет отправить форму, пока поле пустое.</p>
59
<p>Если поставить этот атрибут, пользователь не сможет отправить форму, пока поле пустое.</p>
60
<form action="/contact" method="post"> <input type="text" name="name" required placeholder="Имя*"> <input type="email" name="email" required placeholder="Email*"> <textarea name="message" required placeholder="Сообщение*"></textarea> <button type="submit">Отправить</button> </form><p>Если оставить поле пустым и нажать "Отправить", браузер покажет сообщение об ошибке.</p>
60
<form action="/contact" method="post"> <input type="text" name="name" required placeholder="Имя*"> <input type="email" name="email" required placeholder="Email*"> <textarea name="message" required placeholder="Сообщение*"></textarea> <button type="submit">Отправить</button> </form><p>Если оставить поле пустым и нажать "Отправить", браузер покажет сообщение об ошибке.</p>
61
<p>Атрибут type задаёт допустимые типы данных.</p>
61
<p>Атрибут type задаёт допустимые типы данных.</p>
62
<!-- Проверка email --> <input type="email" name="email" required> <!-- Проверка URL --> <input type="url" name="website" placeholder="https://example.com" required> <!-- Проверка числа --> <input type="number" name="age" min="18" max="100" required><p>Если ввести, например, текст вместо числа, браузер не даст отправить форму и покажет подсказку.</p>
62
<!-- Проверка email --> <input type="email" name="email" required> <!-- Проверка URL --> <input type="url" name="website" placeholder="https://example.com" required> <!-- Проверка числа --> <input type="number" name="age" min="18" max="100" required><p>Если ввести, например, текст вместо числа, браузер не даст отправить форму и покажет подсказку.</p>
63
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Этот атрибут позволяет задать правило в виде регулярного выражения.</p>
63
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Этот атрибут позволяет задать правило в виде регулярного выражения.</p>
64
<!-- Телефон в формате +71234567890 --> <input type="tel" name="phone" pattern="\+7\d{10}" placeholder="+71234567890" title="Формат: +71234567890"> <!-- Пароль: минимум 8 символов, буквы и цифры --> <input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z]).{8,}" title="Минимум 8 символов, должны быть буквы и цифры"><p>Если данные не соответствуют правилу, форма не отправится, а браузер покажет текст из атрибута title.</p>
64
<!-- Телефон в формате +71234567890 --> <input type="tel" name="phone" pattern="\+7\d{10}" placeholder="+71234567890" title="Формат: +71234567890"> <!-- Пароль: минимум 8 символов, буквы и цифры --> <input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z]).{8,}" title="Минимум 8 символов, должны быть буквы и цифры"><p>Если данные не соответствуют правилу, форма не отправится, а браузер покажет текст из атрибута title.</p>
65
<p>Стандартной проверки иногда недостаточно. Например, если нужно выводить свои сообщения об ошибках или проверять данные по более сложным правилам. В этих случаях используют JavaScript.</p>
65
<p>Стандартной проверки иногда недостаточно. Например, если нужно выводить свои сообщения об ошибках или проверять данные по более сложным правилам. В этих случаях используют JavaScript.</p>
66
<p>Пример:</p>
66
<p>Пример:</p>
67
<form id="myForm"> <input type="email" id="email" name="email" required> <button type="submit">Отправить</button> </form> <script> const emailField = document.getElementById('email'); emailField.addEventListener('invalid', function() { this.setCustomValidity('Пожалуйста, введите корректный email'); }); emailField.addEventListener('input', function() { this.setCustomValidity(''); // Очищаем сообщение, если пользователь исправил ошибку }); </script><p>Теперь при неверном вводе браузер покажет сообщение "Пожалуйста, введите корректный email" вместо стандартного.</p>
67
<form id="myForm"> <input type="email" id="email" name="email" required> <button type="submit">Отправить</button> </form> <script> const emailField = document.getElementById('email'); emailField.addEventListener('invalid', function() { this.setCustomValidity('Пожалуйста, введите корректный email'); }); emailField.addEventListener('input', function() { this.setCustomValidity(''); // Очищаем сообщение, если пользователь исправил ошибку }); </script><p>Теперь при неверном вводе браузер покажет сообщение "Пожалуйста, введите корректный email" вместо стандартного.</p>
68
<p>Формы должны быть удобны не только для тех, кто видит экран и может управлять мышкой, но и для людей с ограниченными возможностями здоровья: тех, кто пользуется скринридерами или заполняет форму только с клавиатуры.</p>
68
<p>Формы должны быть удобны не только для тех, кто видит экран и может управлять мышкой, но и для людей с ограниченными возможностями здоровья: тех, кто пользуется скринридерами или заполняет форму только с клавиатуры.</p>
69
<p>Вот несколько вещей, на которые нужно обратить внимание, чтобы сделать форму доступной.</p>
69
<p>Вот несколько вещей, на которые нужно обратить внимание, чтобы сделать форму доступной.</p>
70
<p>Каждое поле должно иметь понятную подпись. Лучше связывать подпись с полем с помощью атрибутов for и id. Так проще попасть в поле: можно просто кликнуть по лейблу, и курсор сам перейдёт в нужное поле.</p>
70
<p>Каждое поле должно иметь понятную подпись. Лучше связывать подпись с полем с помощью атрибутов for и id. Так проще попасть в поле: можно просто кликнуть по лейблу, и курсор сам перейдёт в нужное поле.</p>
71
<label for="username">Имя пользователя:</label> <input type="text" id="username" name="username" required><em>Скриншот: Google Chrome / Skillbox Media</em><p>Если поля относятся к одной теме (например, личные данные), их лучше обернуть в <fieldset>. Внутри можно добавить заголовок <legend>.</p>
71
<label for="username">Имя пользователя:</label> <input type="text" id="username" name="username" required><em>Скриншот: Google Chrome / Skillbox Media</em><p>Если поля относятся к одной теме (например, личные данные), их лучше обернуть в <fieldset>. Внутри можно добавить заголовок <legend>.</p>
72
<fieldset> <legend>Личная информация</legend> <label for="firstName">Имя:</label> <input type="text" id="firstName" name="firstName"> <label for="lastName">Фамилия:</label> <input type="text" id="lastName" name="lastName"> </fieldset><p>Если нужно пояснить, что именно вводить, используйте дополнительный текст. Его можно связать с полем через aria-describedby.</p>
72
<fieldset> <legend>Личная информация</legend> <label for="firstName">Имя:</label> <input type="text" id="firstName" name="firstName"> <label for="lastName">Фамилия:</label> <input type="text" id="lastName" name="lastName"> </fieldset><p>Если нужно пояснить, что именно вводить, используйте дополнительный текст. Его можно связать с полем через aria-describedby.</p>
73
<label for="cardNumber">Номер карты:</label> <input type="text" id="cardNumber" name="cardNumber" aria-describedby="cardHelp" maxlength="19"> <div id="cardHelp">Введите 16 цифр без пробелов</div><p>Переход по клавише Tab должен идти по полям в правильном порядке. Избегайте лишнего tabindex, если в нём нет особой необходимости.</p>
73
<label for="cardNumber">Номер карты:</label> <input type="text" id="cardNumber" name="cardNumber" aria-describedby="cardHelp" maxlength="19"> <div id="cardHelp">Введите 16 цифр без пробелов</div><p>Переход по клавише Tab должен идти по полям в правильном порядке. Избегайте лишнего tabindex, если в нём нет особой необходимости.</p>
74
<p>CSS позволяет делать формы красивыми и приводить их к общему стилю сайта. Давайте стилизуем вот эту форму:</p>
74
<p>CSS позволяет делать формы красивыми и приводить их к общему стилю сайта. Давайте стилизуем вот эту форму:</p>
75
<form action="/contact" method="post"> <input type="text" name="name" required placeholder="Имя*"> <input type="email" name="email" required placeholder="Email*"> <textarea name="message" required placeholder="Сообщение*"></textarea> <button type="submit">Отправить</button> </form><p>Добавим к ней вот такие стили:</p>
75
<form action="/contact" method="post"> <input type="text" name="name" required placeholder="Имя*"> <input type="email" name="email" required placeholder="Email*"> <textarea name="message" required placeholder="Сообщение*"></textarea> <button type="submit">Отправить</button> </form><p>Добавим к ней вот такие стили:</p>
76
form { max-width: 420px; /* Ограничение формы по ширине */ margin: 0 auto; /* Выравнивание формы по центру */ padding: 20px; /* Внутренние отступы */ border: 1px solid #ccc; /* Обводка */ border-radius: 5px; /* Скругление */ } input, textarea, button { width: 100%; /* Ширина полей */ padding: 10px; /* Внутренние отступы */ margin: 0 0 10px; /* Отступы между полями */ border: 1px solid #ccc; /* Обводка */ border-radius: 5px; /* Скругление */ } textarea { height: 150px; /* Высота поля */ resize: none; /* Запрет на изменение ширины и высоты пользователем */ } button { background-color: #4cf50; /* Фоновый цвет */ color: #ffffff; /* Цвет текста */ cursor: pointer; /* Курсор в виде пальца */ } button:hover { opacity: 0.8; /* Прозрачность при наведении */ }<p>В итоге форма будет выглядеть вот так:</p>
76
form { max-width: 420px; /* Ограничение формы по ширине */ margin: 0 auto; /* Выравнивание формы по центру */ padding: 20px; /* Внутренние отступы */ border: 1px solid #ccc; /* Обводка */ border-radius: 5px; /* Скругление */ } input, textarea, button { width: 100%; /* Ширина полей */ padding: 10px; /* Внутренние отступы */ margin: 0 0 10px; /* Отступы между полями */ border: 1px solid #ccc; /* Обводка */ border-radius: 5px; /* Скругление */ } textarea { height: 150px; /* Высота поля */ resize: none; /* Запрет на изменение ширины и высоты пользователем */ } button { background-color: #4cf50; /* Фоновый цвет */ color: #ffffff; /* Цвет текста */ cursor: pointer; /* Курсор в виде пальца */ } button:hover { opacity: 0.8; /* Прозрачность при наведении */ }<p>В итоге форма будет выглядеть вот так:</p>
77
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Самые популярные формы на сайтах - это форма обратной связи, форма поиска и форма авторизации. Давайте напишем для них код. Стили мы используем те же, что и в прошлом разделе.</p>
77
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Самые популярные формы на сайтах - это форма обратной связи, форма поиска и форма авторизации. Давайте напишем для них код. Стили мы используем те же, что и в прошлом разделе.</p>
78
<p>Позволяет оставить сообщение администратору или службе поддержки.</p>
78
<p>Позволяет оставить сообщение администратору или службе поддержки.</p>
79
<form action="/contact" method="post"> <label for="contactName">Ваше имя:</label> <input type="text" id="contactName" name="name" required> <label for="contactEmail">Email:</label> <input type="email" id="contactEmail" name="email" required> <label for="contactSubject">Тема сообщения:</label> <select id="contactSubject" name="subject" required> <option value="">Выберите тему</option> <option value="support">Техническая поддержка</option> <option value="sales">Продажи</option> <option value="other">Другое</option> </select> <label for="contactMessage">Сообщение:</label> <textarea id="contactMessage" name="message" rows="5" required></textarea> <button type="submit">Отправить сообщение</button> </form><p>Вот так будет выглядеть форма в итоге:</p>
79
<form action="/contact" method="post"> <label for="contactName">Ваше имя:</label> <input type="text" id="contactName" name="name" required> <label for="contactEmail">Email:</label> <input type="email" id="contactEmail" name="email" required> <label for="contactSubject">Тема сообщения:</label> <select id="contactSubject" name="subject" required> <option value="">Выберите тему</option> <option value="support">Техническая поддержка</option> <option value="sales">Продажи</option> <option value="other">Другое</option> </select> <label for="contactMessage">Сообщение:</label> <textarea id="contactMessage" name="message" rows="5" required></textarea> <button type="submit">Отправить сообщение</button> </form><p>Вот так будет выглядеть форма в итоге:</p>
80
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Нужна, чтобы быстро находить информацию на сайте.</p>
80
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Нужна, чтобы быстро находить информацию на сайте.</p>
81
<form action="/search" method="get" role="search"> <label for="searchQuery" class="visually-hidden">Поиск по сайту:</label> <input type="search" id="searchQuery" name="q" placeholder="Что вы ищете?" required> <button type="submit">Найти</button> </form><em>Скриншот: Google Chrome / Skillbox Media</em><p>Используется для входа в личный кабинет.</p>
81
<form action="/search" method="get" role="search"> <label for="searchQuery" class="visually-hidden">Поиск по сайту:</label> <input type="search" id="searchQuery" name="q" placeholder="Что вы ищете?" required> <button type="submit">Найти</button> </form><em>Скриншот: Google Chrome / Skillbox Media</em><p>Используется для входа в личный кабинет.</p>
82
<form action="/login" method="post"> <label for="username">Логин:</label> <input type="text" id="username" name="username" required> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> <button type="submit">Войти</button> </form><em>Скриншот: Google Chrome / Skillbox Media</em><p>Чаще всего встречается при отправке документов или резюме. С ней часто бывают сложности из-за нетипичных атрибутов enctype у формы и accept у поля.</p>
82
<form action="/login" method="post"> <label for="username">Логин:</label> <input type="text" id="username" name="username" required> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> <button type="submit">Войти</button> </form><em>Скриншот: Google Chrome / Skillbox Media</em><p>Чаще всего встречается при отправке документов или резюме. С ней часто бывают сложности из-за нетипичных атрибутов enctype у формы и accept у поля.</p>
83
<form action="/upload" method="post" enctype="multipart/form-data"> <label for="fileUpload">Выберите файл:</label> <input type="file" id="fileUpload" name="document" accept=".pdf,.doc,.docx" required> <label for="fileDescription">Описание файла:</label> <textarea id="fileDescription" name="description" rows="3"></textarea> <button type="submit">Загрузить файл</button> </form><em>Скриншот: Google Chrome / Skillbox Media</em><p>Без name данные не попадут на сервер.</p>
83
<form action="/upload" method="post" enctype="multipart/form-data"> <label for="fileUpload">Выберите файл:</label> <input type="file" id="fileUpload" name="document" accept=".pdf,.doc,.docx" required> <label for="fileDescription">Описание файла:</label> <textarea id="fileDescription" name="description" rows="3"></textarea> <button type="submit">Загрузить файл</button> </form><em>Скриншот: Google Chrome / Skillbox Media</em><p>Без name данные не попадут на сервер.</p>
84
<!-- Ошибка --> <input type="text" placeholder="Имя"> <!-- Правильно --> <input type="text" name="name" placeholder="Имя"><p>Использовать GET для паролей или личных данных небезопасно: они попадут в адресную строку. Для таких случаев нужен POST.</p>
84
<!-- Ошибка --> <input type="text" placeholder="Имя"> <!-- Правильно --> <input type="text" name="name" placeholder="Имя"><p>Использовать GET для паролей или личных данных небезопасно: они попадут в адресную строку. Для таких случаев нужен POST.</p>
85
<p>Если <label> не связан с полем, скринридеры не смогут озвучить его корректно. Это сильно мешает пользователям с ограниченными возможностями здоровья.</p>
85
<p>Если <label> не связан с полем, скринридеры не смогут озвучить его корректно. Это сильно мешает пользователям с ограниченными возможностями здоровья.</p>
86
<p>Если форма загружает файлы, но нет атрибута enctype="multipart/form-data", файлы не отправятся.</p>
86
<p>Если форма загружает файлы, но нет атрибута enctype="multipart/form-data", файлы не отправятся.</p>
87
<p>Есть несколько приёмов, которые помогут сделать формы удобнее и надёжнее.</p>
87
<p>Есть несколько приёмов, которые помогут сделать формы удобнее и надёжнее.</p>
88
<p>HTML5 поддерживает много типов: email, tel, url, date, color, range и другие. Они помогают браузеру проверять данные и дают пользователю удобный интерфейс. Например, на телефоне при type="tel" сразу появляется клавиатура с цифрами.</p>
88
<p>HTML5 поддерживает много типов: email, tel, url, date, color, range и другие. Они помогают браузеру проверять данные и дают пользователю удобный интерфейс. Например, на телефоне при type="tel" сразу появляется клавиатура с цифрами.</p>
89
<p>Он нужен для описания группы полей в <fieldset>, но плохо стилизуется. Если нужно оформить заголовок красиво, можно оставить <legend> для доступности (и скрыть его с помощью класса visually-hidden), а видимый текст сделать обычным заголовком или абзацем.</p>
89
<p>Он нужен для описания группы полей в <fieldset>, но плохо стилизуется. Если нужно оформить заголовок красиво, можно оставить <legend> для доступности (и скрыть его с помощью класса visually-hidden), а видимый текст сделать обычным заголовком или абзацем.</p>
90
<p>Если используете tabindex, убедитесь, что переход по клавише Tab остаётся логичным. Слишком сложный порядок запутает пользователей.</p>
90
<p>Если используете tabindex, убедитесь, что переход по клавише Tab остаётся логичным. Слишком сложный порядок запутает пользователей.</p>
91
<ul><li><a>MDN: Тег <form></a></li>
91
<ul><li><a>MDN: Тег <form></a></li>
92
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>
92
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>