Теги, связанные с формами

Articles

В этой статье объясняются теги, связанные с формами.

Это объясняет различные поля формы, такие как текстовые поля и выпадающие меню.

YouTube Video

Теги, связанные с формами

Тег `<form>`

1<form action="/submit" method="post">...</form>

Тег <form> используется для определения всей формы.
Атрибут action указывает место назначения, а атрибут method задает метод (GET или POST).
Вы также можете указать атрибут target, аналогичный тегу <a>.

Тег `<input>` (текстовое поле ввода)

1<input type="text" name="username" placeholder="Enter your username">

<input type="text"> создает однострочное текстовое поле ввода. Пользователи могут вводить любой текст.
Атрибут placeholder указывает текст описания, который появляется, когда поле ввода пусто. Это помогает пользователям легко понять ожидаемый ввод. Этот текст автоматически исчезает, когда начинается ввод.
- placeholder подходит для предоставления дополнительной информации и не подходит для важных инструкций, таких как обязательный ввод. В таких случаях следует использовать метку.

Тег `<input>` (поле ввода пароля)

1<input type="password" name="password" placeholder="Type your password here">

<input type="password"> создает поле для ввода пароля. Введенные символы скрыты и замаскированы для обеспечения безопасности.

Тег `<input>` (поле ввода адреса электронной почты)

1<input type="email" name="email" placeholder="Enter your email">

<input type="email"> создает поле для ввода адреса электронной почты с проверкой правильного формата.

Тег `<input>` (чекбокс)

Subscribe to newsletter

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

<input type="checkbox"> создает флажок. При наличии нескольких опций пользователи могут выбрать несколько элементов.

Тег `<input>` (переключатель)

Male
Female

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

<input type="radio"> создает переключатель, позволяющий выбрать только одну опцию из набора.

Тег `<input>` (кнопка отправки)

1<input type="submit" value="Submit">

<input type="submit"> создает кнопку для отправки данных формы.
Значение атрибута value включается в данные формы при отправке.

`<input>` тег (кнопка сброса)

1<input type="reset" value="Reset">

<input type="reset"> создает кнопку для сброса всех введенных значений в форме.

`<input>` тег (скрытое поле)

1<input type="hidden" name="userid" value="12345">

<input type="hidden"> создает скрытое поле, которое не отображается на экране и используется для отправки данных на сервер при отправке формы.

Тег `<input>` (выбор цвета)

1<input type="color" name="favcolor" value="#ff0000">

<input type="color"> отображает выбор цвета и создает поле ввода для выбора цвета пользователем.

Тег `<input>` (поле ввода даты)

1<input type="date" name="birthday">

<input type="date"> создает поле ввода даты с отображением календаря для выбора даты.

Тег `<input>` (поле ввода времени)

1<input type="time" name="appointment_time">

<input type="time"> создает поле ввода времени с отображением выбора времени.

`<input>` тег (поле для загрузки файла)

1<input type="file" name="resume">

<input type="file"> создает поле ввода для выбора и загрузки файлов пользователями.
Атрибут enctype тега form должен быть установлен как multipart/form-data.

`<input>` тег (числовое поле)

1<input type="number" name="quantity" min="1" max="10">

<input type="number"> создает поле ввода чисел с возможностью задания минимального, максимального значений и шага (увеличение/уменьшение).

`<input>` тег (поле выбора диапазона чисел)

1<input type="range" name="volume" min="0" max="100" value="50">

<input type="range"> создает поле ввода, где пользователи могут выбрать значение в пределах заданного диапазона с помощью ползунка.

`<textarea>` тег

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

Тег <textarea> создает многострочное текстовое поле ввода. Подходит для ввода длинного текста или комментариев.

`<select>` тег

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

Тег <select> создает выпадающее меню, а варианты задаются с помощью тэга <option>. Пользователи могут выбрать один или несколько элементов.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

Для включения множественного выбора добавьте атрибут multiple. Указание этого атрибута отображает варианты в виде спискового поля.

Тег `<optgroup>`

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

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

`<label>` тег

Username:

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

Тег <label> задает метки для полей ввода, флажков и радио-кнопок, улучшая удобство использования и доступность.
Например, нажатие на подпись (label) может сфокусировать поле ввода или переключить чекбокс.

Тег `<fieldset>`

Personal Information Name:

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

Тег <fieldset> группирует связанные элементы управления формы, а тег <legend> задает заголовок для группы.

`<button>` тег

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

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

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

Когда указан атрибут type="submit", кнопка действует как кнопка отправки формы. При клике на эту кнопку форма, содержащая ее, будет отправлена.

Когда указано type="reset", это работает как кнопка сброса для формы. Нажатие на нее сбросит все поля ввода в форме и вернет их в исходное состояние.

Если атрибут type не указан, некоторые браузеры могут рассматривать его как type="submit", поэтому рекомендуется явно указать тип, чтобы гарантировать ожидаемое поведение.
Тег <button> может содержать другой HTML-контент между открывающим и закрывающим тегами, что позволяет создавать кнопки с иконками или сложным текстом.
Для кнопки отправки с использованием тега <input> значение атрибута value включается в данные формы, но с тегом <button> оно по умолчанию не отправляется.

Указав атрибуты name и value для тега <button>, его значение можно отправить как часть данных формы.

Тег `<datalist>`

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

Тег <datalist> предоставляет список доступных для выбора опций для элемента <input>. Пользователи могут либо выбрать из списка, либо ввести собственное значение.

Тег `<output>`

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

Тег <output> отображает результат вычислений или взаимодействий пользователя. Он используется для динамического отображения результатов расчетов в формах или скриптах.
Для атрибута for укажите идентификаторы элементов формы, которые вы хотите связать, разделяя их пробелами.

Тег `<progress>`

70%

1<progress value="70" max="100">70%</progress>

Тег <progress> показывает пользователям прогресс выполнения задачи. Например, он может визуально показать прогресс загрузки файла или установки.

Тег `<meter>`

60%

1<meter value="0.6">60%</meter>

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

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Теги, связанные с медиа Проверка форм

Теги, связанные с формами

YouTube Video

Теги, связанные с формами

Тег <form>

Тег <input> (текстовое поле ввода)

Тег <input> (поле ввода пароля)

Тег <input> (поле ввода адреса электронной почты)

Тег <input> (чекбокс)

Тег <input> (переключатель)

Тег <input> (кнопка отправки)

<input> тег (кнопка сброса)

<input> тег (скрытое поле)

Тег <input> (выбор цвета)

Тег <input> (поле ввода даты)

Тег <input> (поле ввода времени)

<input> тег (поле для загрузки файла)

<input> тег (числовое поле)

<input> тег (поле выбора диапазона чисел)

<textarea> тег

<select> тег

Тег <optgroup>

<label> тег

Тег <fieldset>

<button> тег

Тег <datalist>

Тег <output>

Тег <progress>

Тег <meter>

YouTube Video

Тег `<form>`

Тег `<input>` (текстовое поле ввода)

Тег `<input>` (поле ввода пароля)

Тег `<input>` (поле ввода адреса электронной почты)

Тег `<input>` (чекбокс)

Тег `<input>` (переключатель)

Тег `<input>` (кнопка отправки)

`<input>` тег (кнопка сброса)

`<input>` тег (скрытое поле)

Тег `<input>` (выбор цвета)

Тег `<input>` (поле ввода даты)

Тег `<input>` (поле ввода времени)

`<input>` тег (поле для загрузки файла)

`<input>` тег (числовое поле)

`<input>` тег (поле выбора диапазона чисел)

`<textarea>` тег

`<select>` тег

Тег `<optgroup>`

`<label>` тег

Тег `<fieldset>`

`<button>` тег

Тег `<datalist>`

Тег `<output>`

Тег `<progress>`

Тег `<meter>`