Формы

#1 Основы

<form action="#"></form>
тег используется для создания формы HTML для ввода данных пользователя. Аттрибут action - определяет , куда посылать данные формы , когда форма была отправлена.
<input></input>
создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент. С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.
<textarea></textarea>
используется вместо элемента input type="text", когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега.
<select></select> и <option></option>
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента select. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент. Для добавления в список пунктов используются элементы option, которые располагаются внутри select.
<label></label>
Надписи к элементам формы создаются с помощью элемента label. Существует два способа группировки надписи и поля. Если поле находится внутри элемента
<button></button>
создает кликабельные кнопки. В отличие от кнопок, созданных input (input type="submit", input type="image", input type="reset", input type="button"), внутрь элемента button можно поместить контент — текст или изображение. Для корректного отображения элемента button разными браузерами нужно указывать атрибут type, например, button type="submit". Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Пример простой формы #1 (связка for - id)
Пример простой формы #2 (связка по вложенности)

#2 Группировка элементов формы

<fieldset></fieldset>
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
<legend></legend>
определяет заголовок для элемента fieldset
Личные данные:



#3 Основные значения type для input

  • type="text" - поле для ввода текстовой информации(значение по умолчанию)

  • type="email" - поле для ввода email

  • type="number" - поле для ввода цифр

  • type="password" - поле для ввода пароля

  • type="file" - поле для загрузки файлов

  • type="checkbox" - для группы полей этого типа - можно выбрать только несколько из группы

    связка в группу по аттрибуту name c одинаковым значением

  • type="radio" - для группы полей этого типа - можно выбрать только один из группы

    связка в группу по аттрибуту name c одинаковым значением

расширенная инфо по всем типам input

#4 Основные аттрибуты для input

( Смотрим в инструментах разработчика)

  • placeholder - задает короткую подсказку, описывающую ожидаемое значение элемента

  • value - задает значение элемента по умолчанию

  • name - используется для обращения к полю в JavaScript или на данные поля после отправки формы (обязательно для свзяки полей типа checkbox и radio в группу)

  • readonly - указывает, что поле ввода доступно только для чтения. Эл-т не редактируется, но отправляется при отправке формы, фокусится.

  • required - обязательное для заполнения поле, форма не будет отправлена пока поле не заполнено

  • checked - указывает, что элемент input должен быть предварительно выбран при загрузке страницы (для type="checkbox" или type="radio")

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

  • multiple - указывает, что пользователь может ввести более одного значения в элемент (например прикрепить несколько файлов в поле типа file, или для select)

расширенная инфо по всем аттрибутам input