<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иmaxmin— минимальное значение.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