<form>
- 25 января 2023
✔️ Актуальный | Альтернативы: нет |
Тег <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"
.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Справочник по HTML
Введение
Структура HTML-документа: <!DOCTYPE>
, <html>
, <head>
и <body>
.
Основные HTML-теги
Форматирование текста: <b>
, <i>
, <u>
, <strong>
, <em>
и другие.
Абзацы и разрывы строк: <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>
Проверка и тестирование документа
💡 Авторы и редакторы — Евгений Шкляр, Лена Цимбалист, Настя Ткачёва, Саша Ермайкина.
Вёрстка, оформление — Саша Ермайкина.
- 12 сентября 2023

<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>
используется для вставки на страницу какого-то содержимого, например, видео с 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>
:
value
— значение на шкале измерений. Обязательный атрибут, значение должно находиться междуmin
иmax
min
— минимальное значение.max
— максимальное значение.low
— нижнее пороговое значение.high
— верхнее пороговое значение.optimum
— оптимальное пороговое значение.
Вместо тега <meter>
можно использовать <div>
или <span>
с CSS-стилями.
- 8 августа 2023

Показ текста при отключенном 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>
может содержать только элементы <li>
. Но внутри <li>
можно использовать изображения, ссылки, текст и другие списки.
Браузеры могут не отображать меню, если оно не содержит хотя бы один элемент <li>
.
- 7 августа 2023

Вставка строки в HTML-таблицу. Тег <tr>
✔️ Актуальный |
Тег <tr>
создаёт в таблице строку. Он содержит ячейки <td>
или заголовки <th>
.
Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan
.
Если необходимо создать таблицу без использования тега <tr>
, можете воспользоваться другими тегами для создания разметки, например,<div>
, <ul>
или <dl>
. Однако это может затруднить стилизацию таблицы с помощью CSS.
- 7 августа 2023

Подвал таблицы. Тег <tfoot>
✔️ Актуальный |
Тег <tfoot>
создаёт нижнюю часть таблицы — с результатами или другой информацией. Он используется вместе с тегами <table>
и <tbody>
для структурирования содержимого HTML-таблицы.
Тег <tfoot>
— необязательный. Таблица может иметь верхний и нижний колонтитул, но не обязана иметь ни то, ни другое. Если вы не хотите использовать тег <tfoot>
, можете заменить его на <div>
, <section>
или <footer>
.
- 7 августа 2023

Как создать шаблон с разметкой. Тег <template>
✔️ Актуальный |
Тег <template>
создаёт на странице шаблоны с разметкой, которые можно использовать многократно без копирования кода. Это упрощает работу с динамическим содержимым JavaScript и ускоряет загрузку страницы.
Например, вот шаблон для карточки товара:
<template>
<div class="card">
<h2></h2>
<img src="">
<p></p>
<button></button>
</div>
</template>
⚠️ Содержимое шаблона не отображается на странице, пока не будет склонировано и вставлено в документ при помощи JavaScript.
- 7 августа 2023

Элемент списка в HTML. Тег <li>
✔️ Актуальный |
Тег <li>
используется для создания элементов списка. Тег может быть вложен в элемент маркированного списка — <ul>
, нумерованного списка — <ol>
или меню — <menu>
.
В маркированном списке:
В нумерованном списке:
- 7 августа 2023