1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Формы - важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Для этого в HTML существуют специальные конструкции, которые говорят браузеру, какие поля может использовать пользователь и как их обрабатывать.</p>
1
<p>Формы - важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Для этого в HTML существуют специальные конструкции, которые говорят браузеру, какие поля может использовать пользователь и как их обрабатывать.</p>
2
<p>Тема форм достаточно большая, чтобы описать ее в рамках одного урока, ведь со всеми возможными нюансами это может вылиться в целый курс. Не бойтесь - в этом уроке вы узнаете достаточно, чтобы научиться делать хорошие формы.</p>
2
<p>Тема форм достаточно большая, чтобы описать ее в рамках одного урока, ведь со всеми возможными нюансами это может вылиться в целый курс. Не бойтесь - в этом уроке вы узнаете достаточно, чтобы научиться делать хорошие формы.</p>
3
<h2>Создание формы</h2>
3
<h2>Создание формы</h2>
4
<p>Для отделения формы от остальных участков верстки используется специальный тег <form>. Если его не использовать, то браузер не поймет, какие именно данные нужно отправить. Ведь на странице может быть не одна, а сразу несколько различных форм.</p>
4
<p>Для отделения формы от остальных участков верстки используется специальный тег <form>. Если его не использовать, то браузер не поймет, какие именно данные нужно отправить. Ведь на странице может быть не одна, а сразу несколько различных форм.</p>
5
<p>Сервер - удаленный компьютер, на котором хранится весь проект. Сейчас вы смотрите на страницу, которая сгенерирована на сервере и отдана вам по определенному адресу. Этот адрес указан сейчас в вашем браузере.</p>
5
<p>Сервер - удаленный компьютер, на котором хранится весь проект. Сейчас вы смотрите на страницу, которая сгенерирована на сервере и отдана вам по определенному адресу. Этот адрес указан сейчас в вашем браузере.</p>
6
<p>Примером взаимодействия с формой является любой сайт-поисковик. Например, Google или Yandex. Вы вводите поисковый запрос, который отправляется на сервер. Сервер обрабатывает результат и выдает вам подходящие сайты. Это взаимодействие происходит с помощью серверных языков программирования, таких как PHP, Ruby и так далее. В рамках верстки мы не можем влиять на то, как обработается результат. Результат верстки - набор тегов, с помощью которых браузер соберет данные и отправит их на сервер.</p>
6
<p>Примером взаимодействия с формой является любой сайт-поисковик. Например, Google или Yandex. Вы вводите поисковый запрос, который отправляется на сервер. Сервер обрабатывает результат и выдает вам подходящие сайты. Это взаимодействие происходит с помощью серверных языков программирования, таких как PHP, Ruby и так далее. В рамках верстки мы не можем влиять на то, как обработается результат. Результат верстки - набор тегов, с помощью которых браузер соберет данные и отправит их на сервер.</p>
7
<p>Тег <form> может принимать несколько различных атрибутов. Они не являются обязательными, но их использование может серьезно повлиять на работу. Самым главным из них является атрибут action. Этот атрибут позволяет указать путь к файлу на сервере, который будет обрабатывать отправленные данные. Если этот атрибут не указан, то данные будут отправлены на ту же страницу, где форма и находится.</p>
7
<p>Тег <form> может принимать несколько различных атрибутов. Они не являются обязательными, но их использование может серьезно повлиять на работу. Самым главным из них является атрибут action. Этот атрибут позволяет указать путь к файлу на сервере, который будет обрабатывать отправленные данные. Если этот атрибут не указан, то данные будут отправлены на ту же страницу, где форма и находится.</p>
8
<p>Смысл этого действия вы лучше поймете, если будете заниматься Backend разработкой. Например, на<a>языке PHP</a>или<a>Python</a>. Если сейчас вам кажется это сложным, то не отчаивайтесь. Разработчики всегда вам подскажут, куда стоит отправлять данные.</p>
8
<p>Смысл этого действия вы лучше поймете, если будете заниматься Backend разработкой. Например, на<a>языке PHP</a>или<a>Python</a>. Если сейчас вам кажется это сложным, то не отчаивайтесь. Разработчики всегда вам подскажут, куда стоит отправлять данные.</p>
9
<h2>Поля формы</h2>
9
<h2>Поля формы</h2>
10
<p>Одного тега <form> недостаточно для полноценного создания формы, ведь пользователь должен ввести какие-то данные. Самый простой способ - дать какое-то поле для ввода текста, куда пользователь может ввести информацию. В HTML для этого используется два тега:</p>
10
<p>Одного тега <form> недостаточно для полноценного создания формы, ведь пользователь должен ввести какие-то данные. Самый простой способ - дать какое-то поле для ввода текста, куда пользователь может ввести информацию. В HTML для этого используется два тега:</p>
11
<ul><li><input> - одиночный тег, в котором располагается небольшая информация. Это может быть телефон, email, дата рождения, имя и так далее.</li>
11
<ul><li><input> - одиночный тег, в котором располагается небольшая информация. Это может быть телефон, email, дата рождения, имя и так далее.</li>
12
<li><textarea> - парный тег, позволяющий пользователю ввести длинное сообщение. Это могут быть комментарии к заказу, отзыв.</li>
12
<li><textarea> - парный тег, позволяющий пользователю ввести длинное сообщение. Это могут быть комментарии к заказу, отзыв.</li>
13
</ul><h3>textarea</h3>
13
</ul><h3>textarea</h3>
14
<p>Самый простой тег - <textarea>. Его задача - создать большое поле для ввода текста.</p>
14
<p>Самый простой тег - <textarea>. Его задача - создать большое поле для ввода текста.</p>
15
<p><a>https://codepen.io/hexlet/pen/WNGPEjY</a></p>
15
<p><a>https://codepen.io/hexlet/pen/WNGPEjY</a></p>
16
<p>В примере вы можете увидеть два атрибута тега <textarea>: cols и rows. Они отвечают за количество символов и строк, которые доступны внутри <textarea>. Если контента будет больше, то появится полоса прокрутки.</p>
16
<p>В примере вы можете увидеть два атрибута тега <textarea>: cols и rows. Они отвечают за количество символов и строк, которые доступны внутри <textarea>. Если контента будет больше, то появится полоса прокрутки.</p>
17
<p>Попробуйте изменить размер элемента <textarea>. Это можно сделать потянув за правый нижний угол. Так вы можете увеличить не только ширину, но и высоту элемента.</p>
17
<p>Попробуйте изменить размер элемента <textarea>. Это можно сделать потянув за правый нижний угол. Так вы можете увеличить не только ширину, но и высоту элемента.</p>
18
<p>Такое поведение зачастую вредит нашему дизайну. Поэтому разработчики в большинстве случаев запрещают такое поведение. Тут есть несколько вариантов:</p>
18
<p>Такое поведение зачастую вредит нашему дизайну. Поэтому разработчики в большинстве случаев запрещают такое поведение. Тут есть несколько вариантов:</p>
19
<ul><li>Можно задать высоту и ширину элемента через CSS. Тогда браузер не даст растягивать элемент.</li>
19
<ul><li>Можно задать высоту и ширину элемента через CSS. Тогда браузер не даст растягивать элемент.</li>
20
<li>Использовать свойство resize со значением none. Его можно использовать, если не требуется поддержка некоторых мобильных браузеров и Internet Explorer. Полный список поддерживаемых браузеров можно посмотреть на сайте<a>Can I use</a>.</li>
20
<li>Использовать свойство resize со значением none. Его можно использовать, если не требуется поддержка некоторых мобильных браузеров и Internet Explorer. Полный список поддерживаемых браузеров можно посмотреть на сайте<a>Can I use</a>.</li>
21
</ul><p><a>https://codepen.io/hexlet/pen/vYXbpGx</a></p>
21
</ul><p><a>https://codepen.io/hexlet/pen/vYXbpGx</a></p>
22
<h3>input</h3>
22
<h3>input</h3>
23
<p>Большую группу полей можно создать, используя тег <input>, главным атрибутом которого является type. Он указывает на то, как именно браузер должен обработать элемент. Рассматривать каждое значение бессмысленно, так как такое количество информации быстро забудется, если ее не использовать.</p>
23
<p>Большую группу полей можно создать, используя тег <input>, главным атрибутом которого является type. Он указывает на то, как именно браузер должен обработать элемент. Рассматривать каждое значение бессмысленно, так как такое количество информации быстро забудется, если ее не использовать.</p>
24
<p>В этом уроке рассмотрим одни из самых популярных значений атрибута type.</p>
24
<p>В этом уроке рассмотрим одни из самых популярных значений атрибута type.</p>
25
<p><strong>type="text"</strong></p>
25
<p><strong>type="text"</strong></p>
26
<p>Самый простой вид <input>, который позволяет ввести любую пользовательскую информацию. Никаких проверок полей не происходит. Единственное исключение - удаление переносов строк перед отправкой на сервер. Если нужны данные с переносом текста, то используйте тег <textarea>.</p>
26
<p>Самый простой вид <input>, который позволяет ввести любую пользовательскую информацию. Никаких проверок полей не происходит. Единственное исключение - удаление переносов строк перед отправкой на сервер. Если нужны данные с переносом текста, то используйте тег <textarea>.</p>
27
<p><a>https://codepen.io/hexlet/pen/xxEMpOw</a></p>
27
<p><a>https://codepen.io/hexlet/pen/xxEMpOw</a></p>
28
<p>Заметьте, что сейчас поле никак не подписано и из-за этого абсолютно непонятно что надо ввести пользователю. Первое, что приходит в голову - добавить перед полем заголовок или параграф. Да, это создаст видимость описания поля. Но только видимость! С точки зрения семантики в таком варианте нет никакой связи между текстом и полем ввода. Это критично для пользователей, которые пользуются скринридерами, так как они не смогут связать название и поле для ввода.</p>
28
<p>Заметьте, что сейчас поле никак не подписано и из-за этого абсолютно непонятно что надо ввести пользователю. Первое, что приходит в голову - добавить перед полем заголовок или параграф. Да, это создаст видимость описания поля. Но только видимость! С точки зрения семантики в таком варианте нет никакой связи между текстом и полем ввода. Это критично для пользователей, которые пользуются скринридерами, так как они не смогут связать название и поле для ввода.</p>
29
-
<p><strong>Скринридер (Screen Reader)</strong>- устройство для чтения текста с экрана. Используется слепыми или слабовидящими людьми.</p>
29
+
<p><strong>Скринридер (Screen Reader)</strong>- устройство для чтения текста с экрана. Используется слепы��и или слабовидящими людьми.</p>
30
<p>Для связи поля и его названия используется тег <label>, внутри которого вставляется текст. Чтобы связать <label> и <input> используется один из двух вариантов. Они равнозначны, поэтому можете использовать тот, который удобен в конкретной ситуации.</p>
30
<p>Для связи поля и его названия используется тег <label>, внутри которого вставляется текст. Чтобы связать <label> и <input> используется один из двух вариантов. Они равнозначны, поэтому можете использовать тот, который удобен в конкретной ситуации.</p>
31
<ul><li>Связь по идентификатору. Для этого тегу <input> устанавливается уникальный id. Для тега <label> устанавливается атрибут for, значением которого является идентификатор ввода.</li>
31
<ul><li>Связь по идентификатору. Для этого тегу <input> устанавливается уникальный id. Для тега <label> устанавливается атрибут for, значением которого является идентификатор ввода.</li>
32
</ul><ul><li>Вложение <input> внутрь <label>. Такой способ помогает избавиться от указания идентификаторов, но может немного усложнить процесс стилизации.</li>
32
</ul><ul><li>Вложение <input> внутрь <label>. Такой способ помогает избавиться от указания идентификаторов, но может немного усложнить процесс стилизации.</li>
33
</ul><p><strong>Важно:</strong>все элементы, которые доступны пользователю для заполнения должны иметь тег <label>. Это элементы <input> и <textarea>. Это справедливо даже в случае визуального отсутствия подписи к полю.</p>
33
</ul><p><strong>Важно:</strong>все элементы, которые доступны пользователю для заполнения должны иметь тег <label>. Это элементы <input> и <textarea>. Это справедливо даже в случае визуального отсутствия подписи к полю.</p>
34
<p>Для скрытия элемента можно воспользоваться следующим CSS-кодом. В процессе вашего роста как разработчика, вы поймете все правила, описанные в данном коде. Обычно класс для скрытия элемента называют .sr-only. Вложенные в такой элемент дочерние элементы тоже будут скрыты. Такой элемент будет невидимым для пользователя, но его сможет "прочитать" скринридер. Название класса является сокращением от screen reader only.</p>
34
<p>Для скрытия элемента можно воспользоваться следующим CSS-кодом. В процессе вашего роста как разработчика, вы поймете все правила, описанные в данном коде. Обычно класс для скрытия элемента называют .sr-only. Вложенные в такой элемент дочерние элементы тоже будут скрыты. Такой элемент будет невидимым для пользователя, но его сможет "прочитать" скринридер. Название класса является сокращением от screen reader only.</p>
35
<p><strong>type="radio"</strong></p>
35
<p><strong>type="radio"</strong></p>
36
<p>Радиокнопки используются для выбора одного варианта из множества доступных. Почему такой тип называется radio? Есть мнение, что такое название тип получил от первых автомобильных радиоприемников. В них было доступно несколько радиостанций, но выбрать можно было только одну. Здесь смысл очень похож на принцип таких приемников.</p>
36
<p>Радиокнопки используются для выбора одного варианта из множества доступных. Почему такой тип называется radio? Есть мнение, что такое название тип получил от первых автомобильных радиоприемников. В них было доступно несколько радиостанций, но выбрать можно было только одну. Здесь смысл очень похож на принцип таких приемников.</p>
37
<p>Помимо атрибутов, которые использовались в прошлых примерах, для радиокнопок есть еще один важный атрибут - name. Он является уникальным для<em>группы</em>радиокнопок.</p>
37
<p>Помимо атрибутов, которые использовались в прошлых примерах, для радиокнопок есть еще один важный атрибут - name. Он является уникальным для<em>группы</em>радиокнопок.</p>
38
<p><a>https://codepen.io/hexlet/pen/XWjOEMP</a></p>
38
<p><a>https://codepen.io/hexlet/pen/XWjOEMP</a></p>
39
<p>Помимо атрибута name у радиокнопок используется атрибут value. Внутри него находится то значение, которое отправится на сервер.</p>
39
<p>Помимо атрибута name у радиокнопок используется атрибут value. Внутри него находится то значение, которое отправится на сервер.</p>
40
<p><strong>type="checkbox"</strong></p>
40
<p><strong>type="checkbox"</strong></p>
41
<p>Чекбоксы немного похожи на радиокнопки, но имеют существенное отличие - возможность выбора сразу нескольких значений. Представьте, что пользователь выбирает любимые блюда. Скорее всего, это не одно блюдо, а сразу несколько. Можно дать возможность просто их написать с помощью <textarea>, но грамотнее будет использовать чекбоксы.</p>
41
<p>Чекбоксы немного похожи на радиокнопки, но имеют существенное отличие - возможность выбора сразу нескольких значений. Представьте, что пользователь выбирает любимые блюда. Скорее всего, это не одно блюдо, а сразу несколько. Можно дать возможность просто их написать с помощью <textarea>, но грамотнее будет использовать чекбоксы.</p>
42
<p><a>https://codepen.io/hexlet/pen/gOwqedg</a></p>
42
<p><a>https://codepen.io/hexlet/pen/gOwqedg</a></p>
43
<h3>Списки</h3>
43
<h3>Списки</h3>
44
<p>Отдельным элементом формы являются списки. Представьте себе фильтр на сайте по продаже техники. Одновременно вы можете отфильтровать товары только в одной категории. Для этого можно использовать радиокнопки или даже чекбоксы в случае множественного выбора. Но есть еще один способ - использование списка.</p>
44
<p>Отдельным элементом формы являются списки. Представьте себе фильтр на сайте по продаже техники. Одновременно вы можете отфильтровать товары только в одной категории. Для этого можно использовать радиокнопки или даже чекбоксы в случае множественного выбора. Но есть еще один способ - использование списка.</p>
45
<p>Создание списка очень похоже на создание списка текста. В формах для этого используется тег <select>, пункты которого лежат внутри тегов <option>.</p>
45
<p>Создание списка очень похоже на создание списка текста. В формах для этого используется тег <select>, пункты которого лежат внутри тегов <option>.</p>
46
<p><a>https://codepen.io/hexlet/pen/ExgrEMB</a></p>
46
<p><a>https://codepen.io/hexlet/pen/ExgrEMB</a></p>
47
<p>В примере появился новый атрибут - selected. Он отвечает за то, какой элемент выбран по умолчанию. Если он не указан, то будет выбран первый элемент списка.</p>
47
<p>В примере появился новый атрибут - selected. Он отвечает за то, какой элемент выбран по умолчанию. Если он не указан, то будет выбран первый элемент списка.</p>
48
<p>Для элементов радиокнопок и чекбоксов для выбора по умолчанию используется атрибут checked</p>
48
<p>Для элементов радиокнопок и чекбоксов для выбора по умолчанию используется атрибут checked</p>
49
<p>Для списков доступен еще один интересный атрибут - multiple. С его помощью список становится похож на чекбоксы и позволяет выбрать сразу несколько пунктов.</p>
49
<p>Для списков доступен еще один интересный атрибут - multiple. С его помощью список становится похож на чекбоксы и позволяет выбрать сразу несколько пунктов.</p>
50
<p><a>https://codepen.io/hexlet/pen/MWjLVMz</a></p>
50
<p><a>https://codepen.io/hexlet/pen/MWjLVMz</a></p>
51
<h2>Отправка формы</h2>
51
<h2>Отправка формы</h2>
52
<p>В прошлом разделе мы рассмотрели различные способы взаимодействия пользователя и формы. Но это не имеет никакого смысла, если форма не будет отправлена. Для этого нужно создать элемент, при взаимодействии с которым будет отправлена форма.</p>
52
<p>В прошлом разделе мы рассмотрели различные способы взаимодействия пользователя и формы. Но это не имеет никакого смысла, если форма не будет отправлена. Для этого нужно создать элемент, при взаимодействии с которым будет отправлена форма.</p>
53
<p>Отправка формы может быть осуществлена одним из двух способов:</p>
53
<p>Отправка формы может быть осуществлена одним из двух способов:</p>
54
<ul><li>Создание <input> с типом submit. В этом случае создастся элемент в виде кнопки с именем, указанным в качестве значения атрибута value.</li>
54
<ul><li>Создание <input> с типом submit. В этом случае создастся элемент в виде кнопки с именем, указанным в качестве значения атрибута value.</li>
55
<li>Использование парного тега <button>. Такой способ больше развязывает руки, так как внутри такой кнопки может содержаться любой HTML код, при клике на который будет отправлена форма. Такой способ очень удобен для создания кнопки в виде иконки. Сейчас такой способ наиболее актуальный.</li>
55
<li>Использование парного тега <button>. Такой способ больше развязывает руки, так как внутри такой кнопки может содержаться любой HTML код, при клике на который будет отправлена форма. Такой способ очень удобен для создания кнопки в виде иконки. Сейчас такой способ наиболее актуальный.</li>
56
</ul><p><a>https://codepen.io/hexlet/pen/xxEMjwb</a></p>
56
</ul><p><a>https://codepen.io/hexlet/pen/xxEMjwb</a></p>
57
<h2>Разделение участков формы</h2>
57
<h2>Разделение участков формы</h2>
58
<p>Страшный сон пользователя - длинная форма без разделения на секции. К центру такой формы уже непонятно, для чего именно заполняются те или иные поля. Разделить форму можно несколькими способами:</p>
58
<p>Страшный сон пользователя - длинная форма без разделения на секции. К центру такой формы уже непонятно, для чего именно заполняются те или иные поля. Разделить форму можно несколькими способами:</p>
59
<ol><li><p><strong>Заголовки или визуальные разделители:</strong>Простой способ структурировать форму - добавить заголовки перед основными секциями. Это улучшает восприятие и делает форму более удобной.</p>
59
<ol><li><p><strong>Заголовки или визуальные разделители:</strong>Простой способ структурировать форму - добавить заголовки перед основными секциями. Это улучшает восприятие и делает форму более удобной.</p>
60
</li>
60
</li>
61
<li><p><strong>Использование HTML элементов для группировки:</strong>Вы можете разделить части формы с помощью блоков-оберток, таких как <div>, <section> или другие. Это помогает организовать форму, а также позволяет применить стили для каждой секции отдельно. Например, можно использовать тег <div> с классом для группировки полей:</p>
61
<li><p><strong>Использование HTML элементов для группировки:</strong>Вы можете разделить части формы с помощью блоков-оберток, таких как <div>, <section> или другие. Это помогает организовать форму, а также позволяет применить стили для каждой секции отдельно. Например, можно использовать тег <div> с классом для группировки полей:</p>
62
</li>
62
</li>
63
</ol><ol><li><strong>Использование fieldset и legend:</strong>браузеры предоставляют специальный механизм для разделения участков формы на логические секции - fieldset. Это можно рассматривать как более семантичную альтернативу блочным элементам, таким как <div> и <section>, но только для форм. В качестве заголовка выступает тег <legend>:</li>
63
</ol><ol><li><strong>Использование fieldset и legend:</strong>браузеры предоставляют специальный механизм для разделения участков формы на логические секции - fieldset. Это можно рассматривать как более семантичную альтернативу блочным элементам, таким как <div> и <section>, но только для форм. В качестве заголовка выступает тег <legend>:</li>
64
</ol><p><a>https://codepen.io/hexlet/pen/OJRdZYa</a></p>
64
</ol><p><a>https://codepen.io/hexlet/pen/OJRdZYa</a></p>
65
<h2>Текст внутри текстового поля</h2>
65
<h2>Текст внутри текстового поля</h2>
66
<p>Во всех примерах этого урока текстовые поля изначально были пустыми. Наверное вы часто видели, что до фокуса на поле есть текст предлагающий ввести данные или показывающий формат, в котором ожидаются данные.</p>
66
<p>Во всех примерах этого урока текстовые поля изначально были пустыми. Наверное вы часто видели, что до фокуса на поле есть текст предлагающий ввести данные или показывающий формат, в котором ожидаются данные.</p>
67
<p>За вывод такого текста отвечает атрибут placeholder, значением которого является текст, выводимый до ввода символов в поле</p>
67
<p>За вывод такого текста отвечает атрибут placeholder, значением которого является текст, выводимый до ввода символов в поле</p>
68
<p><a>https://codepen.io/hexlet/pen/xxEMzwr</a></p>
68
<p><a>https://codepen.io/hexlet/pen/xxEMzwr</a></p>
69
<p><strong>Важно:</strong>placeholder не является заменой тега <label>. Думайте о placeholder как об описании текстового поля, а <label> как об имени этого поля.</p>
69
<p><strong>Важно:</strong>placeholder не является заменой тега <label>. Думайте о placeholder как об описании текстового поля, а <label> как об имени этого поля.</p>
70
70