134 lines
14 KiB
Markdown
134 lines
14 KiB
Markdown
---
|
||
title: Forms
|
||
localeTitle: формы
|
||
---
|
||
## формы
|
||
|
||
Элемент HTML Form определяет форму, которая используется для сбора пользовательского ввода. Примеры:
|
||
|
||
```html
|
||
|
||
<form>
|
||
contents
|
||
</form>
|
||
```
|
||
|
||
HTML-форма содержит элементы формы.
|
||
|
||
Элементы формы - это разные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и т. Д.
|
||
|
||
|
||
Внутри тегов формы есть также 2 важных атрибута:
|
||
**action** содержит адрес, который определяет, куда будет отправлена информация формы;
|
||
**method** может быть либо GET, либо POST и определяет, как будет отправлена информация формы.
|
||
|
||
Элемент <fieldset></fieldset> используется для группировки элементов, связанных друг с другом, разделяя форму на логические фрагменты.
|
||
|
||
Большинство полей формы создает элемент <input> . Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
|
||
|
||
Атрибуты тега input:
|
||
|
||
accept - Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file">. Возможные значения:
|
||
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc"
|
||
audio/* — разрешает загрузку аудиофайлов
|
||
video/* — разрешает загрузку видеофайлов
|
||
image/* — разрешает загрузку изображений
|
||
media_type — указывает на медиа-тип загружаемых файлов.
|
||
|
||
alt - Определяет альтернативный текст для изображений, указывается только для <input type="image">.
|
||
|
||
autocomplete Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
|
||
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
|
||
off — отключает автозаполнение для полей форм.
|
||
|
||
autofocus Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
|
||
|
||
checked Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio".
|
||
|
||
disabled Отключает возможность редактирования и копирования содержимого поля.
|
||
|
||
form Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
|
||
|
||
formaction Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы.
|
||
|
||
height Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_submit.gif" height="50">. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
|
||
|
||
list Является ссылкой на элемент <datalist>, содержит его id.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
|
||
|
||
max Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week
|
||
|
||
maxlength Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
|
||
|
||
min Позволяет ограничить допустимый ввод числовых данных минимальным значением.
|
||
|
||
multiple Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
|
||
|
||
name Определяет имя, которое будет использоваться для доступа к элементу <form>, к примеру, в таблицах стилей css. Является аналогом атрибута id.
|
||
|
||
placeholder Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
|
||
|
||
readonly Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
|
||
|
||
required Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
|
||
|
||
size Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text, search, tel, url, email и password.
|
||
|
||
src Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">.
|
||
|
||
step Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
|
||
|
||
type - button — создает кнопку.
|
||
checkbox — превращает поле ввода во флажок, который можно установить или очистить.
|
||
|
||
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
|
||
|
||
date — позволяет вводить дату в формате дд.мм.гггг.
|
||
|
||
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
|
||
|
||
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
|
||
E-mail:
|
||
file — позволяет загружать файлы с компьютера пользователя.
|
||
|
||
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
|
||
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
|
||
|
||
Submit
|
||
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
|
||
|
||
number — предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
|
||
|
||
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
|
||
|
||
radio — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить.
|
||
|
||
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
|
||
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
|
||
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
|
||
|
||
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
|
||
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
|
||
|
||
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
|
||
|
||
url — поле предназначено для указания URL-адресов.
|
||
|
||
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
|
||
Укажите неделю:
|
||
|
||
value Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
|
||
|
||
width Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
|
||
|
||
Кнопки.
|
||
Элемент <button></button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.
|
||
|
||
Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.
|
||
|
||
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
|
||
|
||
Флажки и переключатели в формах.
|
||
Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.
|
||
|
||
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked, то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
|