0Pricing
Frontend Academy · Урок

Формы: input, label, button

Создавайте доступные формы HTML с подписанными полями, разными типами input, текстовыми областями, списками select и кнопками отправки.

«Формы: input, label, button» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужны HTML-формы?

Формы — основной способ отправки данных на сервер: для входа в систему, поиска, оформления заказа и обратной связи. Браузеры предоставляют множество встроенных возможностей — проверку данных, ввод с клавиатуры и мобильные клавиатуры, — которые доступны автоматически при использовании встроенных элементов форм.

Элемент <form>

Элемент <form> объединяет все связанные элементы управления. Атрибут action задаёт URL, на который отправляются данные, а method задаёт GET или POST. В одностраничных приложениях часто отменяют отправку по умолчанию и обрабатывают её с помощью JavaScript.

<form action="/submit" method="POST">
  <!-- inputs go here -->
</form>

Текстовые поля и поля электронной почты

Элемент <input> — основной рабочий элемент форм. Атрибут type изменяет его поведение. Используйте type="text" для произвольного текста, а type="email" для адресов электронной почты: он проверяет формат и показывает подходящую мобильную клавиатуру.

<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">

Пароль, число и другие типы

Другие полезные типы полей: password (скрывает символы), number (проверяет числовое значение и показывает счётчики), date (показывает средство выбора даты), range (ползунок), checkbox (логический переключатель), radio (выбор одного варианта из нескольких).

<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">

Элемент &lt;label&gt; — важен для доступности

У каждого поля ввода должна быть связанная с ним метка <label>. Метка сообщает пользователям и программам чтения с экрана назначение поля. При нажатии на метку фокус переходит к полю ввода. Используйте атрибут for, совпадающий со значением id поля.

<label for="username">Username</label>
<input type="text" id="username" name="username">

Textarea и Select

Используйте <textarea> для многострочного текста (например, комментариев). Используйте <select> с дочерними элементами <option> для вариантов в раскрывающемся списке. Всегда добавляйте пустой вариант по умолчанию с подсказкой вроде «Выберите категорию».

<textarea name="message" rows="4" placeholder="Write your message..."></textarea>

<select name="level">
  <option value="">Select level...</option>
  <option value="a1">A1 Beginner</option>
  <option value="b1">B1 Intermediate</option>
</select>

Флажки и переключатели

Объединяйте связанные флажки с помощью <fieldset> и <legend>. Переключатели с одинаковым name позволяют выбрать только один вариант. Для каждого нужна собственная подпись.

<fieldset>
  <legend>Preferred languages</legend>
  <label><input type="checkbox" name="lang" value="js"> JavaScript</label>
  <label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>

Кнопки: отправка, сброс и обычная кнопка

<button type="submit"> отправляет форму. type="reset" очищает все поля. type="button" по умолчанию ничего не делает и используется вместе с обработчиками событий JavaScript. Всегда задавайте тип — по умолчанию выполняется отправка.

<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>

Группировка полей ввода с помощью &lt;fieldset&gt;

<fieldset> визуально и семантически объединяет связанные элементы управления. Обязательный <legend> задаёт заголовок. Программы чтения с экрана объявляют легенду перед каждым элементом управления в группе, предоставляя необходимый контекст.

Атрибут name — что отправляется

При отправке формы браузеры отправляют пару name=value для каждого элемента управления. Включаются только элементы управления с атрибутом name. Для флажков отправляются только выбранные.

<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->

Автозаполнение и автодополнение

Задавайте для атрибута autocomplete такие значения, как email, given-name, new-password или current-password, чтобы менеджеры паролей и функция автозаполнения браузера правильно заполняли формы.

<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">

Быстрая проверка

Каково назначение атрибута for у элемента <label>?

Итоги: доступные HTML-формы

Каждому полю ввода нужна подпись. Выбирайте подходящий тип поля для данных. Объединяйте связанные элементы управления с помощью fieldset. Используйте button type=submit для отправки. Прежде чем добавлять JavaScript, задействуйте встроенные возможности форм — проверку, навигацию с клавиатуры и автозаполнение.

Часто задаваемые вопросы

Урок «Формы: input, label, button» бесплатный?

Да — полный текст урока «Формы: input, label, button» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Формы: input, label, button»?

Создавайте доступные формы HTML с подписанными полями, разными типами input, текстовыми областями, списками select и кнопками отправки. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Формы: input, label, button»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Структура документа: DOCTYPE, html, head, body
  2. Семантические теги: header, nav, main, article, footer
  3. Текст, изображения, ссылки и списки
  4. Формы: input, label, button
← Назад к Frontend Academy