✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Альтернативы: нет

Тег <form> используется для создания HTML-формы, в которой пользователь может ввести данные. Этот тег определяет область, в которой содержится контент формы, а также указывает на сервер, куда отправлять данные формы.

<form action="url-обработчика" method="метод">
  <!-- контент формы -->
</form>

Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST.

Атрибуты тега <form>:

  • action — адрес, на который будут отправлены данные формы.
  • method — метод отправки данных: GET или POST.
  • target — окно или фрейм, в котором будет открыт результат отправки данных формы.
  • name — имя формы, которое используется для её идентификации при отправке данных на сервер.
  • autocomplete — может ли браузер запоминать введённые пользователем данные для автозаполнения.
  • enctype — способ кодирования данных формы при отправке на сервер.
  • novalidate — указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.

Пример использования атрибутов тега <form>:

<form action="/search" method="GET" target="_blank" name="search-form" autocomplete="on" enctype="multipart/form-data" novalidate>
  <!-- контент формы -->
</form>

Примеры использования

Форма для входа на сайт:

<form action="/login" method="POST">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="Войти">
</form>

Этот код создаёт форму для входа на сайт с полями для ввода имени пользователя и пароля. Данные будут отправлены на сервер по адресу /login методом POST.

Форма обратной связи:

<form action="/feedback" method="POST">
  <label for="name">Ваше имя:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

  <label for="message">Сообщение:</label>
  <textarea id="message" name="message"></textarea><br>

  <input type="submit" value="Отправить">
</form>

Здесь мы создаём форму обратной связи с полями для ввода имени, электронной почты и сообщения. Данные будут отправлены на сервер по адресу /feedback методом POST.

Форма с выбором опции:

<form action="/options" method="GET">
  <label for="color">Выберите цвет:</label>
  <select id="color" name="color">
    <option value="red">Красный</option>
    <option value="green">Зелёный</option>
    <option value="blue">Синий</option>
  </select><br>

  <label for="size">Выберите размер:</label>
  <input type="radio" id="size-small" name="size" value="small">
  <label for="size-small">Маленький</label>
  <input type="radio" id="size-medium" name="size" value="medium">
  <label for="size-medium">Средний</label>
  <input type="radio" id="size-large" name="size" value="large">
  <label for="size-large">Большой</label><br>

  <input type="submit" value="Выбрать">
</form>

Этот пример создаёт форму с выпадающим списком цветов и группой радиокнопок для выбора размера. Данные будут отправлены на сервер по адресу /options методом GET.

Для чего использовать тег <form>

  • Для формы обратной связи, в которой пользователь может оставить контактные данные и сообщение.
  • Для формы поиска на сайте.
  • Для формы регистрации — формы, в которой пользователь вводит данные для создания учётной записи или входа в личный кабинет.
  • Для формы оформления заказа.
  • Для формы оплаты, в которой пользователь может ввести данные банковской карты и подтвердить оплату.
  • Для анкеты или опроса, в которых пользователи могут выбрать один или несколько вариантов ответов.

Глобальные атрибуты

Тег <form> поддерживает все глобальные атрибуты HTML.

Ограничения

Тег может содержать только определённые элементы формы, такие как <input>, <label>, <button>, <select>, <textarea> и некоторые другие. Он не может содержать другие блочные элементы, такие как <div> или <p>.

Нюансы

  • Не рекомендуется использовать вложенные формы.
  • Если использовать метод GET, параметры формы будут отображены в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.
  • Для отправки файлов на сервер необходимо использовать атрибут enctype="multipart/form-data".

👉 Другие теги для создания форм

<input><button><select><optgroup><option><textarea><label><fieldset><legend><datalist><output><progress><meter><dialog><details><summary>


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Справочник по HTML

Введение

Структура HTML-документа: <!DOCTYPE>, <html>, <head> и <body>.

Основные HTML-теги

Форматирование текста: <b>, <i>, <u>, <strong>, <em> и другие.

Заголовки: <h1> до <h6>

Абзацы и разрывы строк: <p>, <br>

Списки: <ul>, <ol>, <li>, <dl>, <dt>, <dd>

Ссылки: <a>

Картинки: <img>

Атрибуты и мета-теги

Глобальные атрибуты: class, id, style.

Атрибуты событий: onclick, onload и т. д.

Основные мета-теги: charset, viewport, description.

Формы

Элемент формы: <form>

Поля ввода: <input>, <textarea>, <button>, <select>, <option>.

Валидация форм разными способами.

Таблицы

Основная структура таблицы: <table>, <tr>, <td>, <th>

Расширенные функции таблицы: <caption>, <colgroup>, <col>, <thead>, <tfoot>, <tbody>

Аудио, видео, встроенные элементы

Аудио и видео: <audio>, <video>

Встроенные элементы: <embed>, <iframe>, <object>

Семантика, структура и доступность

Семантические теги: <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, <figcaption>

Цитаты и источники: <blockquote>, <q>, <cite>

Основы веб-доступности.

Дополнительные элементы

Интерактивные элементы: <details>, <summary>

Скрипты: <script>, <noscript>

Шаблоны: <template>

Проверка и тестирование документа

Валидатор W3C.

💡 Авторы и редакторы — Евгений Шкляр, Лена Цимбалист, Настя Ткачёва, Саша Ермайкина.

Вёрстка, оформление — Саша Ермайкина.

  • 12 сентября 2023
<source>

<source>

Тег <source> нужен для указания адреса картинок в теге <picture>, аудио в теге <audio> или видео в теге <video>. Он не используется как отдельный тег.

<audio>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Ваш браузер не поддерживает аудиоэлемент.
</audio>

Для картинок:

<picture>
  <source media=""(min-width: 650px)" srcset="large-image.jpg">
  <source media=""(min-width: 465px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Изображение">
</picture>

Атрибуты тега <source>:

  • type: Определяет формат мультимедиа ресурса, например video/mp4 или image/jpeg.
  • src: Указывает на конкретный мультимедийный файл.
  • srcset: Предоставляет разные версии изображения, обычно для разных разрешений экрана.
  • sizes: Определяет, какой размер изображения должен быть выбран в зависимости от размера экрана устройства.
  • media: Определяет условия (например, минимальная ширина экрана), при которых данный источник должен быть использован.
  • width и height: Указывают размеры мультимедиа ресурса.
  • 8 августа 2023
Вставка элементов на страницу. Тег <object>

Вставка элементов на страницу. Тег <object>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <object> используется для вставки на страницу какого-то содержимого, например, видео с YouTube, PDF-файлов, Google Maps или других элементов. Этот тег может использоваться вместо устаревших <embed> и <applet>.

<object data="movie.mp4" width="400" height="300"></object>
<object data="music.mp3" width="200" height="50"></object>
<object data="document.pdf" width="500" height="600"></object>

Атрибуты тега <object>:

  • data — URL или относительный путь к объекту.
  • type — MIME-тип объекта.
  • name — имя объекта.
  • usemap — URL карты изображения.
  • width — ширина объекта.
  • height — высота объекта.
  • 8 августа 2023
Наглядное отображение чисел. Тег <meter>

Наглядное отображение чисел. Тег <meter>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <meter> используется для наглядного отображения числовых данных — например, надёжности пароля, уровня зарядки или громкости звука.

Атрибуты тега <meter>:

  • value — значение на шкале измерений. Обязательный атрибут, значение должно находиться между min и max
  • min — минимальное значение.
  • max — максимальное значение.
  • low — нижнее пороговое значение.
  • high — верхнее пороговое значение.
  • optimum — оптимальное пороговое значение.

Вместо тега <meter> можно использовать <div> или <span> с CSS-стилями.

  • 8 августа 2023
Показ текста при отключенном JavaScript. <noscript>

Показ текста при отключенном JavaScript. <noscript>

✔️ Актуальный

🏗️ Не семантический

📝 Спецификация

Содержимое тега <noscript> отображается в браузерах с отключенным JavaScript. Если JS включён, содержимое тега <noscript> игнорируется.

Внутри тега <noscript> можно использовать только ограниченное количество тегов, допустимых внутри <body>. В их числе <p>, <h1><h6>, <ul>, <ol>, <li>, <blockquote>, <address>, <hr>, <pre>, <figure>, <figcaption>, <table>.

  • 8 августа 2023
Добавление меню. Тег <menu>

Добавление меню. Тег <menu>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <menu> используется для создания меню на странице. Например, такого:

Тег <menu> может содержать только элементы <li>. Но внутри <li> можно использовать изображения, ссылки, текст и другие списки.

Браузеры могут не отображать меню, если оно не содержит хотя бы один элемент <li>.

  • 7 августа 2023
Вставка строки в HTML-таблицу. Тег <tr>

Вставка строки в HTML-таблицу. Тег <tr>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <tr> создаёт в таблице строку. Он содержит ячейки <td> или заголовки <th>.

Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan.

Если необходимо создать таблицу без использования тега <tr>, можете воспользоваться другими тегами для создания разметки, например,<div><ul> или <dl>. Однако это может затруднить стилизацию таблицы с помощью CSS.

  • 7 августа 2023
Подвал таблицы. Тег <tfoot>

Подвал таблицы. Тег <tfoot>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <tfoot> создаёт нижнюю часть таблицы — с результатами или другой информацией. Он используется вместе с тегами <table> и <tbody> для структурирования содержимого HTML-таблицы.

Тег <tfoot> — необязательный. Таблица может иметь верхний и нижний колонтитул, но не обязана иметь ни то, ни другое. Если вы не хотите использовать тег <tfoot>, можете заменить его на <div><section> или <footer>.

  • 7 августа 2023
Как создать шаблон с разметкой. Тег <template>

Как создать шаблон с разметкой. Тег <template>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <template> создаёт на странице шаблоны с разметкой, которые можно использовать многократно без копирования кода. Это упрощает работу с динамическим содержимым JavaScript и ускоряет загрузку страницы.

Например, вот шаблон для карточки товара:

<template>
  <div class="card">
    <h2></h2>
    <img src="">
    <p></p>
    <button></button>
  </div>
</template>

⚠️ Содержимое шаблона не отображается на странице, пока не будет склонировано и вставлено в документ при помощи JavaScript.

  • 7 августа 2023
Элемент списка в HTML. Тег <li>

Элемент списка в HTML. Тег <li>

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <li> используется для создания элементов списка. Тег может быть вложен в элемент маркированного списка — <ul>, нумерованного списка — <ol> или меню — <menu>.

В маркированном списке:

В нумерованном списке:

  • 7 августа 2023