freeCodeCamp/guide/russian/css/forms/index.md

title	localeTitle
Forms	формы

формы

Элемент HTML Form определяет форму, которая используется для сбора пользовательского ввода. Примеры:

<form> 
  contents 
 </form> 

HTML-форма содержит элементы формы.

Элементы формы - это разные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и т. Д.

Внутри тегов формы есть также 2 важных атрибута: action содержит адрес, который определяет, куда будет отправлена информация формы; method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.

Элемент

используется для группировки элементов, связанных друг с другом, разделяя форму на логические фрагменты.

Большинство полей формы создает элемент . Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

Атрибуты тега input:

accept - Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc" audio/* — разрешает загрузку аудиофайлов video/* — разрешает загрузку видеофайлов image/* — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов.

alt - Определяет альтернативный текст для изображений, указывается только для .

autocomplete Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм.

autofocus Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.

checked Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio".

disabled Отключает возможность редактирования и копирования содержимого поля.

form Значение атрибута должно быть равно атрибуту id элемента

в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.

formaction Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы.

height Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.

list Является ссылкой на элемент , содержит его id.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.

max Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week

maxlength Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.

min Позволяет ограничить допустимый ввод числовых данных минимальным значением.

multiple Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.

name Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id.

placeholder Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).

readonly Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.

required Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.

size Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text, search, tel, url, email и password.

src Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .

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 Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

Кнопки. Элемент создает кликабельные кнопки. В отличие от кнопок, созданных (, , , ), внутрь элемента можно поместить контент — текст или изображение.

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type, например, .

Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.

Флажки и переключатели в формах. Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked, то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.