Формы
#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