# Формы

Ter `<form>` контейнер для формы размещенной на странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

У него есть следующие атрибуты:

1. **action** - ссылка на файл, который должен будет обработать данные\
   формы.
2. **method** - метод запроса на сервер, есть два основных значения: GET и\
   POST. По умолчанию GET
3. **target** - указывает как будут отображены результаты, в текущем окне\
   либо новой вкладке.
4. **autocomplete** - контролирует автозаполнение форм, имеет\
   проблемы с кроссбраузерностью.

| GET                                                                                                                                                                                                                                                                                | POST                                                                                                                                                                                                                                                                                                      |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). | Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др. |

В html5 добавили **update и delete. <<**

### Элементы формы, тег \<input> <a href="#elementy-formy-teg-input" id="elementy-formy-teg-input"></a>

Тег \<input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом \<input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

`<input type="text" name="inp" value=" same value " />`

Имеет следующие обязательные атрибуты:

1. **name** - имя элемента формы
2. **value** - значение, которое будет передано на сервер
3. **type** - тип поля

#### Типы элементов формы, атрибут type <a href="#tipy-elementov-formy-atribut-type" id="tipy-elementov-formy-atribut-type"></a>

1. `input type="text"` - элемент формы, создает текстовое поле для ввода.
2. `input type="password"` - элемент формы, который реализует текстовое поле для ввода пароля. При этом все символы внутри заменяются на маркер "точка".
3. `input type="checkbox"` - элемент формы, который реализует квадратное поле с галочкой. Имеет два состояния - выбранный и не выбранный.
4. `input type="radio"` - элемент формы, который реализует radio-переключатель. Имеет два состояния - выбранный и не выбранный.
5. `input type="email"` - тип ввода данных почтового адреса
6. `input type="url"` - тип ввода данных url
7. `input type="date"` - тип ввода данных даты
8. `input type="time"` - тип ввода данных времени
9. `input type="datetime"` - тип ввода данных объединяет предыдущие 2-а в один
10. `input type="month"` - тип ввода данных месяца
11. `input type="week"` - тип ввода данных номера недели
12. `input type="number"` - тип ввода данных числа(но не телефонных номеров)
13. `input type="range"` - тип ввода данных range отображается в виде ползунка
14. `input type="search"` - тип ввода данных search. Разница с "text" чисто стилистическая. Так же в Safary есть уникальный атрибут добавляющий историю недавних запросов.
15. `input type="tel"` - используется для ввода телефонного номера.
16. `input type="color"` - позволяет пользователю ввести значение цвета выбрав из палитры.

#### Создание кнопок на форме <a href="#sozdanie-knopok-na-forme" id="sozdanie-knopok-na-forme"></a>

Есть несколько основных способов реализовать кнопки в разметке.

Первый - использовать элементы input с особенным значением атрибута type (submit, reset):

1. `type="submit"` - элемент формы, который реализует кнопку отправки данных на сервер. При нажатии формируется запрос и отправляется файлу, указанному в атрибуте action^"".
2. `type="reset"` - элемент формы, который реализует кнопку очистки полей формы. При этом поля не просто очищаются от внесенных данных, но и восстанавливают значения по умолчанию.

Второй - создание элемента input со значением атрибута type = button. При этом созданная кнопка может реализовать любой функционал, указанный в ее дополнительных атрибутах обработчиков событий.

`<inputtype="button" name="button" value="Do" onclick="ToDo()" />`

#### Выпадающий список, тег \<select>...\</select> <a href="#vypadayushii-spisok-teg-selectselect" id="vypadayushii-spisok-teg-selectselect"></a>

Тег `select`- тег, контейнер, содержащий в себе описание выпадающего списка. Каждый элемент списка описан внутри с помощью отдельного тега option. Содержимое тега `option` будет отображено пользователям в качестве элементов выпадающего списка, но на сервер будут отправлены именно значения атрибутов `value` и `name`.

```
<select name="select">
    <option value="fl">TeKCTl</option> 
    <optionvalue="f2">TeKCT2</option> 
    <option value="f3">TeKCT3</option> 
    <optionvalue="f4">TeKCT4</option> 
    <option value="f5">TeKCT5</option>
</select>
```

Если Вам необходимо реализовать список с многозначным выбором, то следует указать атрибут

`multiple="multiple"`

#### Различные типы тега \<input> <a href="#razlichnye-tipy-tega-input" id="razlichnye-tipy-tega-input"></a>

Также есть еще несколько особенных типов элементов input:

1- `type = "hidden"` - элемент формы, который не отображается пользователю, при этом передается на сервер при отправке. Используется для передачи параметров, которые не должны быть видны либо изменяться пользователем.

1. `type = "file"` - элемент формы, предназначенный для создания поля выбора загрузки файла. Реализован в каждом браузере по-разному.

#### Группировка элементов формы, тег \<fieldset> <a href="#gruppirovka-elementov-formy-teg-fieldset" id="gruppirovka-elementov-formy-teg-fieldset"></a>

Тег `<fieldset>` предназначен для группирования элементов формы. Такая\
&#x20;группировка облегчает работу с формами, содержащими большое число\
&#x20;данных.

Тег `<legend>` применяется для создания заголовка группы элементов\
&#x20;формы, которая определяется с помощью тега `<fieldset>`.

```
<fieldset>
    <legend>Группировка элементов</legend>
    ...
    Любое содержимое формы
    ...
</fieldset>
```

#### Тег \<textarea>...\</textarea> <a href="#teg-textareatextarea" id="teg-textareatextarea"></a>

`<textarea>` - тег, предназначенный для создания многострочного поля для ввода. Имеет специальные атрибуты rows cols, которые соответственно указывают его высоту и ширину.

`<textarea cols="100" rows="4">content</textarea>`

При этом, его реализация в разных браузерах тоже отличается. В некоторых, он приобретает возможность изменять размер, расширяться, в некоторых -отличается визуальным видом.

#### Устаревшие атрибуты элементов формы <a href="#ustarevshie-atributy-elementov-formy" id="ustarevshie-atributy-elementov-formy"></a>

В связи с развитием HTML некоторые элементы, а также атрибуты устарели и потеряли свою значимость, но так как сайты не «совершенствуются» самостоятельно, они еще воспринимаются в некоторых браузерах.

Ниже предоставлен список, некоторых из них:

1. **Align** - атрибут, отвечающий за выравнивание, работает не во всех полях для ввода.
2. Атрибуты **alt** и **title** отвечают за значение, которое пользователю браузер будет выдавать как подсказку при наведении на элемент, с текстом, написанном в этих атрибутах.
3. Атрибут **border** - устанавливает рамку вокруг элементов, в текущих версиях браузеров не работает.

#### Атрибут checked <a href="#atribut-checked" id="atribut-checked"></a>

Атрибут **checked** - отвечает за состояние элемента, выбран он или нет.

Используется для двух типов элемента input, при этом необходимо помнить об особенностях их группировки:

1. **Checkbox** - при группировке элементов с помощью одинакового значения атрибута name, в активное состояние могут быть установлены одновременно несколько элементов группы.
2. **Radio** - при группировке элементов с помощью одинакового значения\
   атрибута name, в активное состояние может быть установлен одновременно только один элемент группы.

#### Атрибут selected <a href="#atribut-selected" id="atribut-selected"></a>

Атрибут **selected** - атрибут, который устанавливает определенный элемент выпадающего списка, как значение по умолчанию.

```
<select name="select">
    <option value="film001n>2 smoking guns</option>
    <option value="film002">Bad Boys</option> 
    <option value="film003">Revenge</option>
    <option value="film004" selected="selected">Crow</option> 
    <option value="film005">Dead Man Walking</option> 
    <option value="film006">Wrong thing</option>
</select>
```

#### Атрибуты disabled и readonly <a href="#atributy-disabled-i-readonly" id="atributy-disabled-i-readonly"></a>

Атрибут **disabled** - указывает на то, что элемент формы должен отображаться пользователю не активным и быть не восприимчивым к изменениям пользователя.

Атрибут **readonly** позволяет сделать элемент не восприимчивым к изменениям пользователя.

Отличие между ними зависит от браузера, а точнее от реализации элементов с данными атрибутами.

#### Атрибуты size и maxlength <a href="#atributy-size-i-maxlength" id="atributy-size-i-maxlength"></a>

Для управления размерами текстовых полей и установкой максимально допустимых значений в разметке предусмотрены специальные атрибуты:

1. Атрибут **size** используется для указания размеров текстового поля для ввода.
2. Атрибут **maxlength** используется для того, чтобы задать максимально допустимое значение для текстового поля.

`<inputtype="text" name="first_name" value="Mickey" size="120" maxlength="100" />`

### Новые атрибуты элемента \<input> <a href="#novye-atributy-elementa-input" id="novye-atributy-elementa-input"></a>

1. `autocomplite` - по умолчанию поле ввода наследует состояние автозаполнения формы к которой относится. Автозаполнение для форм включено по умолчанию.
2. `min, max` - атрибуты ограничивают диапазон вводимых значений
3. `multiple` - в html5 не нов, но позволяет загружать несколько файлов `input type=file`
4. `pattern` - позволяет создавать регулярные выражения
5. `step` - отвечает за степень подробности вводимых данных
6. `list` - служит для связывания с элементом \<datalist> в котором есть заготовленные для выбора элементы и в случае отсутствия подходящего позволяет ввести и отправить свой вариант/информацию.
7. `autofocus` - курсор помещается в поле при загрузке страницы
8. `placeholder` - подсказка, для какой информации предназначено поле
9. `required` - поле должно быть проверенно и заполнено иначе информация не будет отправлена и браузер вернет ошибку
10. `form` - атрибут связывающий эл-ты(вынесенные из тега \<form>) с формой.

///

**Полезные ссылки и материалы к ДЗ**

<http://html5pattern.com/>

```
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post" enctype="multipart/form-data" >
...

<script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js"></script>
```

///

```
/* Placeholder reset style */
::-webkit-input-placeholder { /* WebKit browsers */
    color: #5c5e64;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #5c5e64;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #5c5e64;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #5c5e64;
}
```