Элементы формы HTML
Атрибуты формы настроили сам тег form. Элементы формы — части внутри: подписи, области текста, списки, кнопки, группировка. Этот урок картографирует набор. Типы input дальше.
Зачем элементы формы
Голый form только с атрибутами не собирает ответы. Нужны элементы управления. textarea вместо однострочного input или select вместо свободного текста меняет удобство и данные.
Прямой ответ
1) Каждому видимому контролю — label. 2) input для многих однострочных. 3) textarea многострочный. 4) select+option фиксированный список. 5) button для действий. 6) fieldset+legend группа. action/method на внешнем form.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
fieldset профиля со смешанными контролями
Маленький редактор профиля: одна группа, многострочное bio, уровень из списка, кнопка сохранить.
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>
Читаем демо профиля
- fieldset+legend именуют группу
- textarea лучше для bio
- select/option ограничивают уровень
- у каждого контроля id и name
- submit отправляет форму
- action/method из прошлого урока
Настройки: радио и типы кнопок
Иногда ответ взаимоисключающий. Радио делят name. Label на каждом варианте. Сравните submit, reset и button.
<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>
Читаем демо настроек
- радио с одним name — одна группа
- радио в label делает текст кликабельным
- legend заголовок Theme
- submit отправляет; reset очищает — не сохраняет
- остальные типы input позже
Выбор нужного контроля
- короткий ответ/email/пароль: input
- длинный текст: textarea
- фиксированный список: select или радио
- сгруппировать раздел: fieldset+legend
- назвать: label
- отправить: button type=submit
Практика — собрать элементы
- Скопируйте профиль; смените legend и добавьте option
- Временно замените textarea на input
- Второй fieldset для заметок
- Радио темы; клик по label
- Clear затем Save
- Вынесите контроль за form
- Фраза: элементы — подписанные контроли внутри; атрибуты на form — другой слой
Частые ошибки
- Контроли без label
- заголовок div вместо legend
- submit или поля вне form
- однострочный input для длинных сообщений
- забыть name
- считать reset сохранением на сервер
- думать, что урок заменяет action/method
Кратко
- Элементы формы — контроли внутри form
- label, input, textarea, select, button, fieldset/legend покрывают большинство UI новичка
- Всегда подписывайте; группируйте fieldset
- Подбирайте контроль под вопрос
- Атрибуты form и типы input — разные слои
- далее: типы input
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху