Формы HTML

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

<form></form>: элемент которым обозначается начало и конец формы. Содержимым данного элемента являются: элементы формы, текст, а так же различные элементы HTML использующиеся для придания структуры и семантического значения элементам формы и связанному с ними контенту. Не должен содержать элемент form.
action="URL-адрес": указывает путь к сценарию обработки данных формы. Если сценарий расположен на странице с формой, то значение атрибута следует оставить пустым.
method="GET/POST": указывает метод, которым будут переданы данные формы сценарию.

Метод GET встраивает преобразованные данные в URL-запрос, отделяя их от URL-адреса знаком вопроса ? . Можно использовать для сохранения в избранном/закладках результаты обработки данных формы. Не подходит для передачи конфиденциальных данных. При помощи данного метода нельзя загружать данные на сервер.

Метод POST более предпочтителен, так как содержимое этого запроса доступно только серверу, не имеет ограничений по количеству передаваемых символов.

name="имя переменной": указывает имя переменной элемента формы. При помощи имени переменной элемента формы происходит присваивание данных введенных пользователем переменной сценария.

Текстовые поля

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

пример однострочного текстового поля
text - однострочное текстовое поле. Предназначено для ввода одного слова или строки.
`<form> <input type="text" value="текст"> </form>`

<textarea></textarea>: многострочное текстовое поле. Содержимое данного элемента будет отображаться как исходный текст.
cols="числовое значение": ширина текстового поля исчисляемое символами.
rows="числовое значение": высота текстового поля исчисляемое строками.
wrap="soft/hard": определяет должен ли текст сохранять переносы строк при отправке формы. Значение soft - не сохраняет, значение hard - сохраняет.
placeholder="информация": значение данного атрибута будет показано в форме ввода текста по умолчанию и исчезнет при активации пользователем данной формы. В элементе textarea данный атрибут работает при отсутствии пробелов или любых символов между открывающим и закрывающим тегом.

пример использования атрибута placeholder
`<textarea cols="30" rows="2" placeholder="подсказка"></textarea>`

возможные значения атрибута type элемента input
password - поле ввода пароля. Скрывает вводимые символы.
`<form> <input type="password" value="пароль"> </form>`

email - поле ввода почтового адреса. Осуществляет проверку правильности ввода электронного адреса. Возможно не поддерживается всеми браузерами.
`<form> <input type="email" placeholder="введите ваш e-mail"> </form>`

search - поле ввода поискового запроса.
`<form> <input type="search" placeholder="поиск"> </form>`

tel - поле ввода телефонного номера.
`<form> <input type="tel" placeholder="телефонный номер"> </form>`

url - поле ввода адреса сайта.
`<form> <input type="url" placeholder="адрес сайта"> </form>`

В зависимости от типа поля ввода мобильные операционные системы могут предоставлять различные типы клавиатуры.

<datalist></datalist>: является контейнером для возможных вариантов автозаполнения текстового поля типа input.
<option></option>: обозначает пункт списка, в который помещается вариант автозаполнения.

Чтобы связать datalist с input у элемента input указывается атрибут list с значением равным значению id элемента datalist.

пример создания списка
`<input type="text" list="qwe"> <datalist id="qwe"> <option>первый вариант</option> <option>второй вариант</option> </datalist>`

Кнопки

кнопки отправки и сброса данных
submit - кнопка отправки данных на сервер. reset - сброс данных введенных в форму.
`<form> <input type="text"> <input type="submit"> <input type="reset"> </form>`

Текст кнопок можно изменить, задав его в виде значения атрибуту value.

прочие виды кнопок
image - кнопка-изображение.
`<form> <input type="image" src="1.jpg"> </form>`

button - кнопка без функций. Используется для создания кнопки с собственными функциями, например при помощи JavaScript. У данного типа кнопки нет текста по умолчанию.
`<form> <input type="button" value="кнопка без функций"> </form>`

<button></button>: элемент позволяющий создавать кнопку без функций. Содержимым данного элемента может быть текст либо изображение.

Переключатели и флажки

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

<label></label>: элемент применяется для связи текста и соответствующего ему элемента формы. Браузеры основанные на чтении с экрана получат соответствующую информацию. Так же касание контента связанного с элементом формы приведет к выбору этого элемента. Если связь между контентом и элементом формы не установлена, то форму можно активировать только при непосредственном касании элемента формы.

Существует два способа связи элемента формы с контентом при помощи элемента label:

Неявная ассоциация - когда элемент формы вместе с контентом помещается в элемент label (пример radio)

Явная ассоциация - когда только контент помещается в элемент label, а атрибуту for элемента label присваивается значение равное значению атрибута id соответствующего элемента формы (пример chekbox)

radio - переключатель.
Одинаковое значение атрибута name у переключателей,
устанавливает взаимосвязь между ними объединяя их в группу.
Наличие атрибута checked в элементе input типа radio установит переключатель в это положение.
Так же доступен вариант установки выбранного элемента в виде: checked="checked"


<form>
    <label><input type="radio" name="color"></label>
    <label><input type="radio" name="color" checked></label>
    <label><input type="radio" name="color"></label>
</form>

checkbox - флажок.
Атрибут name обязателен и должен ?иметь одинаковое имя?


<form>
    <table>
        <tr>
            <td><label for="green">Зеленый</label></td>
            <td><label for="blue">Синий</label></td>
            <td><label for="red">Красный</label></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="color" id="green"></td>
            <td><input type="checkbox" name="color" id="blue" checked></td>
            <td><input type="checkbox" name="color" id="red"></td>
        </tr>
    </table>
</form>

Списки

<select></select>: позволяет создать раскрывающийся или прокручиваемый список. Раскрывающийся список позволяет выбрать только один пункт списка. Прокручиваемый список позволяет выбрать несколько вариантов.

пример раскрывающегося списка
`<p>Какой из этих президентов России по вашему мнению наиболее эффективен? <form> <select> <option>Ельцин</option> <option>Медведев</option> <option>Путин</option> </select> </form> </p>`
Какой из этих президентов России по вашему мнению наиболее эффективен?

size="число": числовое значение данного атрибута устанавливает количество отображаемых пунктов списка.
multiple: наличие данного атрибута позволяет выбрать несколько пунктов списка при удержании клавиши ctrl или shift. Если данный атрибут задан для элемента select, то даже без атрибута size список станет прокручиваемым.
selected="selected": наличие данного атрибута у элемента option делает его содержимое выбранным по умолчанию.

пример прокручиваемого списка
`<p>Какие из этих призидентов России по вашему мнению наиболее эффективны? <form> <select size="3" multiple> <option>Ельцин</option> <option>Медведев</option> <option selected="selected">Путин</option> </select> </form> </p>`
Какие из этих президентов России по вашему мнению наиболее эффективны?

Если у элемента option присутствует атрибут value, то сценарию будет передано значение данного атрибута, если этот атрибут отсутствует, то будет передано содержимое элемента option.

Пункты раскрывающегося и прокручиваемого списка можно группировать под различными заголовками.

<optgroup></optgroup>: группирует элементы option. Значение атрибута label присвоенного элемету optgroup станет заголовком группы.

группировка пунктов на примере прокручиваемого списка
<p>Каких из этих президентов России и США осуществляли совместные переговоры? <form> <select size="8" multiple> <optgroup label="Президенты РФ:"> <option>Борис Ельцин</option> <option>Дмитрий Медведев</option> <option>Владимир Путин</option> </optgroup> <optgroup label="Президенты США:"> <option>Борис Ельцин</option> <option>Дмитрий Медведев</option> <option>Владимир Путин</option> </optgroup> </select> </form> </p>
Каких из этих президентов России и США осуществляли совместные переговоры?

Элементы выбора файла

Предназначены для передачи файлов с компьютера пользователя серверу.

пример кнопки загрузки файлов
file - кнопка загрузки файлов.
`00<form action="name.php" method="POST" enctype="multipart/from-data"> <input type="file" name="photo"> <input type="reset"><input type="submit"> </form>`
Загрузить фотографию

action указывает путь к сценарию, которому будет передан файл. enctype содержит тип кодирования. Для передачи файлов используется метод POST .

Скрытый элемент формы

Используется для передачи данных скрытых от пользователя.

пример скрытого элемента формы
hidden - скрытый элемент формы.
`<form> <input type="hidden" name="variable" value="значение"> </form>`

Задачей данного типа формы являтся скрытая передача значения атрибута value серверу.