Загрузка...

HTML-формы

Адаптив подогнал ширины. Формы — новая глава: посетитель вводит и отправляет. Контейнер — form.

Зачем формы

Статика показывает; формы собирают. Без form браузер не знает, какие поля в одной отправке.

Прямой ответ

1) form с action и method. 2) элементы с name. 3) label for = id. 4) кнопка submit. Сначала разметка.

📊 Form parts at a glance

Part	Job	Beginner tip
form	Groups controls for one submission	Keep related fields inside one form
action	URL or path that receives the data	Practice paths are fine while learning
method	How the browser sends the payload	get puts data in the URL; post uses the request body
input (+ others)	Collects a value from the user	Always set name for submitted keys
label	Names the field for people and assistive tech	for must match the control id
submit	Triggers sending the form	Prefer type="submit" on buttons

Минимальный каркас формы

Начните с контейнера и двух атрибутов. Учебный путь достаточен.

Minimal form skeleton

html

<form action="/subscribe" method="post">
<!-- fields go here -->
</form>

Читаем каркас

form — граница отправки
action — путь приёма
post — тело
get — URL
404 без сервера ок при обучении

Поле с label + отправка

Хотя бы одно поле и способ отправить. for должен совпасть с id; задайте name.

Subscribe form with label

html

<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>

Читаем демо подписки

for и id связывают
name — ключ payload
type=email подсказка браузеру
button type=submit отправляет

GET против POST

get для закладки поиска; post когда данные не должны остаться в адресной строке.

Практика — маленькая форма подписки

form с post и учебным action
email input с label и name
button type=submit
проверьте отрисовку
вынесите input наружу на минуту

Частые ошибки

input вне form
нет name
кнопка без type=submit
несовпадение label/for
путать action и method

Кратко

form группирует поля для одной отправки
action + method описывают цель и стиль
label и name делают поле отправляемым
далее: атрибуты формы

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

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