HTML для начинающих - Полный курс (2025). Урок №4: Формы

Урок 4 курса HTML для начинающих: создание форм, тег form и его атрибуты, типы input, связь label с полями, радиокнопки, чекбоксы и textarea.

Key Takeaways

Формы создаются тегом form, поля тегом input с атрибутом type
Атрибут name обязателен, иначе данные не уйдут на сервер
Label должен быть связан с input для удобства и доступности
Метод POST подходит для чувствительных данных, GET передаёт данные в URL

What the video covers

Назначение форм в HTML: ввод данных пользователем и отправка их на сервер (авторизация, поиск, обратная связь)
Тег form как контейнер полей, атрибуты action, method (GET и POST), autocomplete и target
Тег input и его атрибут type; разные типы полей (text, email, tel, radio, checkbox)
Атрибуты placeholder, name и value: подсказки, имена параметров для сервера и значения полей
Связь label и input через атрибуты for и id либо вложением input внутрь label
Группировка полей с помощью div и fieldset с legend
Радиокнопки с одинаковым name для выбора одного варианта и значение по умолчанию через checked
Чекбокс с атрибутом required, блокирующим отправку без отметки
Кнопка submit для отправки формы
Поле textarea для многострочного текста и пример вывода отзывов на странице

Chapters

Зачем нужен атрибут name у поля формы?

Атрибут name задаёт имя, под которым значение поля отправляется на сервер. Без него данные из поля не будут переданы.

Чем отличаются методы GET и POST в форме?

GET передаёт данные в открытом виде в URL, а POST отправляет их в теле запроса, что подходит для чувствительных данных, например при авторизации.

Как связать подпись label с полем input?

Можно указать у label атрибут for, равный id поля input, либо вложить input внутрь тега label без for и id.

Full Transcript — Download SRT & Markdown

Speaker A

Привет Сегодня мы научимся создавать формы разберёмся для чего они нужны какие типы полей бывают и какие теги используются для их создания Готов давай начинать форма в HTML позволяет пользователям вводить данные и отправлять их на сервер они используются для авторизации поиска обратной связи и

Speaker A

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

Speaker A

свяжемся как раз Для этого нам нужна форма на сайте Давайте её создадим здесь я предлагаю использовать уже знакомый Tag HR визуально разделим И начнём создавать форму самого главного тега гфо гфо - это контейнер для Всех элементов формы он указывает браузеру что всё что

Speaker A

находится внутри него будет частью формы гфо Как мы можем видеть имеет некоторые атрибуты атрибут Action в нём мы должны указать адрес куда будет происходить отправка формы Так как у нас нету сервера то есть нету backend части которая будет обрабатывать отправку

Speaker A

формы для страции Я здесь напишу https следующий атрибут который содержит гфо - это метод Метод отвечает за то как будут передаваться данные если мы используем метод Get то значения Из полей ввода формы которые заполнит пользователь будут передаваться в открытом виде в URL

Speaker A

Если же мы используем метод пост то данные будут отправлены в теле запроса это как раз актуально для чувствительных данных таких как авторизация или вот как в нашем случае связаться с нами ещё один атрибут тега форм - это автокот он

Speaker A

отвечает за то что Будет ли браузер подсказывать нам значение для разных полей вода я у себя его отключу чтобы не палить свои почты также как и для тега ссылка для тега форм мы можем указать атрибут Target со значением Blank и

Speaker A

тогда у нас отправка формы будет происходить в новом окне вообще по умолчанию после отправки формы у нас происходит перезагрузка страниц теперь перейдём к созданию полей ввода для этого используем универсальный тег Input Tag Input позволяет создавать разные типы полей для этого у него есть атрибут

Speaker A

Type Давайте сохраним посмотрим в браузере вот мы видим у нас появилось поле ввода если мы на него Клик то он установится в фокусе и мы можем вводить туда различные значения но сейчас в нём нет никаких подписей нет никаких

Speaker A

подсказок пользователь не понимает что в него вводить Давайте это исправим для этого можно использовать атрибут placeholder это подпись внутри самого инпута как Подсказка для пользователя что мы от него ждём допустим введите имя Всё теперь пользователь понимает что мы

Speaker A

хотим чтобы он сюда ввёл Ну как только мы начнём что-то вводить всё плейсхолдер исчезает также обязательный атрибут - это не атрибут name указывает Как будет называться отправляемой значение на сервер То есть если мы не укажем то данные введённые в этот Input не будут

Speaker A

отправлены на сервер имя пользователя так и назовём username допустим username пользователь вводит Вася и на сервере мы получаем username равно вас также к тегу Input мы можем добавить подпись делается это с помощью тега Label внутри тега Label напишем имя и сразу видим у Label

Speaker A

есть атрибут for нужен для того чтобы связать lael и Input только в inp мы Для этого должны указать ещё один атрибут И называется он ID ID у инпута и for у Label должны быть одинаковыми Ну допустим тоже username теперь у нас есть

Speaker A

поле ввода и подпись к нему и вот как раз атрибут for и int ID у инпута служит для связи между этими двумя тегами для того чтобы мы могли кликнуть на йл и при этом оказаться в фокусе внутри инпута

Speaker A

Это улучшает доступность и является хорошей практикой Давайте добавим следующее поле для ввода для этого скопирую Label и Input следующее поле у нас будет email обратите внима у inp Type email теперь перейдём в браузер и видим что у нас появилось второе поле с

Speaker A

подписью email эти теги строчные поэтому они выстраиваются в одну строку что не очень красиво и Давайте используем Tag div г обёртку чтобы разделить эти поля ввода создаём Tag div и оборачиваем лейл с инпутов чтобы они выстроились друг под

Speaker A

друга также для группировки полей вода мы можем использовать специальный тег нам нужно обернуть все дивы внутрь него и также задать специальный тег Legend он добавляет за головок у нас это будет контактные данные Давайте создадим следующее поле это будет поле телефон

Speaker A

для этого скопирую один из дивов только здесь у инпута уже будет тайп не email а T пользователи которые откроют наш сайт с телефона у них сразу откроется клавиатура для ввода номера также заменяем значение всех атрибутов на фон в лейбле напишем номер телефона и здесь

Speaker A

в плейсхолдер тоже введите номер Ну так просто меняя атрибут тайп инпута мы создаём разные поля для ввода значений в форме У нас есть уже имя пользователя email номер телефона давайте для того чтобы затронуть как можно больше различных типов инпута добавим ещё

Speaker A

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

Speaker A

просить у пользователя ка какой вид связи для него предпочтительный Поэтому в лейбле напишем предпочитаемый способ связи а после инпута создадим ещё один йл который будет Как раз связан вот с этим инпутов намм не нужен refer F мы зададим для ID и для связи с lael а name

Speaker A

должен быть одинаковый name у двух инпутов с типом радио именно у одной связки то есть предпочитаемый способ связи тип радио У нас два инпута два лейбла то есть здесь мы пишем телефон а здесь email и здесь у нас email но на

Speaker A

сервер летит как я уже говорил атрибут name указывает Под каким именем мы отправляем значение на сервер а значение мы должны указать ещё в одном специальном атрибуте он называется value здесь мы укажем фон а здесь email То есть если пользователь выберет

Speaker A

предпочитаемый способ связи email то на сервер у нас отправится Вот это имя preferred со значением email Если же выберет телефон то полетит preferred со значением фон Так у нас поля ввода вылезли за тег fieldset надо его опустить вниз прямо по тег фом Да теперь

Speaker A

всё чётко внутри формы fset группирует контактные данные имя email номер телефона и предпочитаемый способ связи телефон или email то есть пользователь может кликать выбирать что ему предпочтительней а также мы можем задать значение по умолчанию через атрибут Check для инпута укажем что

Speaker A

предпочитаемый способ связи по умолчанию будет email установили телефон перезагрузили страницу и видим что значение по умолчанию установилось на email как мы и хотим а также сейчас для связи Label и Input мы используем for и ID но есть ещё один вариант просто взять

Speaker A

Input и положить его внутрь T Label теперь нам не нужен for и ID видим ничего не изменилось также по клику на email то есть на мы Встаём в фокус нашего ипу оба варианта применимы на практике Используйте тот который вам

Speaker A

больше нравится так следующее поле предлагаю сделать чекбокс для этого возьмём div с интом установим тип checkbox в lael Можем написать допустим даю согласие на хранение данных gre тип checkbox name тоже должен быть уникальный и здесь placeholder нам не

Speaker A

нужен Смотрим Да и у нас появился чекбокс можем чекбокс можно сделать уже прожарювання если пользователь снимет галочку и попытается отправить форму он не сможет это сделать потому что это поле у нас обязательное давайте для демонстрации этого как раз добавим кнопку то есть

Speaker A

создадим ещё один div а внутри него создадим Tag Button Button и тип должен быть submit то есть отправить и добавим надпись что это отправить входим в браузер М давайте снимем галочку и попытаемся отправить видим что мы не можем это делать так как мы установили

Speaker A

атрибут required для чекбокса А сейчас чекбокс не прожарку введём какое-то имя email номер телефона скажем что он телефон даю Согласие отправляем данные вот и происходит отправка формы на вот этот ул и так как мы используем метод Get мы

Speaker A

видим все данные которые ввёл пользователь атрибут name в инпуте то есть username значение Вите email Ну значение что я ввёл да О это значение предпочитаемый способ связи о и agree on agree on - это мы checkbox да то есть

Speaker A

здесь мы тоже можем указать value Yes да что пользователь согласен для отправки формы мы будем использовать JavaScript поэтому и метод и Action мы можем отсюда Удалить Мы будем прописывать это в жава скрипте также будем делать валидацию полей сейчас я предлагаю добавить ещё

Speaker A

одно поле ввода создадим ещё один div и здесь создадим поле для ввода текст позволяет создавать нам многострочные поля для ввода А здесь в name также создадим л это будет дополнительный комментарий может быть какие-то пожелания или дополнительные требования от нашего пользователя name coms и ID

Speaker A

тоже coms здесь напишем комментарий перейдём в браузер и посмотрим у нас появилась текст эрия здесь мы можем потянуть за угол и изменить размеры здесь мы можем вводить что угодно ещё мы можем делать дополнительную кнопку которая будет не отправлять форму а

Speaker A

очищать допустим если пользователь ввёл много данных в поля но потом понял что хочет вообще по новой всё ввести он может на нажать кнопку типом т и когда он нажмёт Очистить все поля затрубном разобрали тексте предлагаю создать ещё одну форму Только на этот

Speaker A

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

Speaker A

комментария какая-то дата Март 20 и вот эти три параграфа мы обернётся имя автора сам текст комментария сам текст отзыва и дату и таких у нас будет три вот у нас появилось три отзыва Витя Катя Олег и мы хотим а добавить возможность

Speaker A

пользователю на нашем сайте оставлять отзыв для этого также вот в разделе отзывы создаём заголовок оставить отзыв и здесь создаём форму Здесь нам Action не нужен и fset мы тоже здесь не будем использовать просто создаём div а Label labels

Speaker A

lael значением имя также Input можно здесь для примера засунуть его внутрь йл чтобы не использовать for ID то есть холдер также ваше имя копируем здесь будет не inp а текст здесь я забыл про name конечно же name нужно указать

Speaker A

прошлые кнопки мы использовали для отправки Button с типом submit в этой Давайте используем Input также с типом submit по умолчанию он имеет value отправить а мы напишем отправить отзыв и теперь в нашем разделе отзывы Появилась возможность оставить отзыв Теперь ты

Speaker A

умеешь создавать формы и работать со основными её элементами в следующем видео мы перейдём к изучению CSS Ставь лайк подписывайся на канал увидимся в следующем видео

Topics:HTMLформытег forminputlabelрадиокнопкичекбоксыфронтенд для начинающихверсткавеб-разработка

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools