generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
111 lines (83 loc) · 6.38 KB
/
description.ru.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
---
name: Поле для ввода текста
theory: |
Основной элемент форм в HTML — поле для ввода. Оно реализуется с помощью тега `<input>` и позволяет задать различные поля для ввода данных: текст, пароли, чекбоксы, радио кнопки, кнопки отправки, загрузка файла, ввод даты и так далее.
Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:
* Текст
* Пароли
* Чекбоксы
* Радио кнопки
Самый простой способ использования `<input>` — создание текстового поля для ввода. Именно `<input>` присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег `<input>` и указать у него атрибут `type` со значением `text`:
```html
<form>
<input type="text">
</form>
```
<div class="hexlet-basics-example my-3">
<form>
<input type="text">
</form>
</div>
## Тег label
Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег `<label>`. Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.
```html
<form>
<label>Введите имя</label>
<input type="text">
</form>
```
На самом деле недостаточно просто указать `label`, нужно его связать с полем формы. Это необходимо для однозначной связи, ведь полей может быть много.
Для связи `label` используется один из двух вариантов:
* Связь по атрибуту `id`. Для этого у тега `<input>` указывается атрибут `id` с произвольным именем, а у `<label>` добавляется атрибут `for` с таким же именем, как и значение `id` у элемента `input`
```html
<form>
<label for="name">Введите имя</label>
<input type="text" id="name">
</form>
```
* Связь через вложенность. Вы обратили внимание, что `<label>` — это парный тег? Для связи можно вложить `input` внутрь `label`, тогда они автоматически свяжутся друг с другом
```html
<form>
<label>Введите имя
<input type="text">
</label>
</form>
```
## Атрибут placeholder
Встречаются ситуации, когда для поля есть описание, но совершенно непонятно, в каком формате нужно заполнить данные. Например, вначале указать имя, а потом фамилию, или наоборот? Чтобы помочь пользователю сориентироваться используется атрибут `placeholder` у тега `<input>`. Значение этого атрибута будет выведено внутри текстового поля.
```html
<form>
<label for="name">Введите имя и фамилию</label>
<input type="text" id="name" placeholder="Иван Иванов">
</form>
```
<div class="hexlet-basics-example my-3">
<form>
<label for="name">Введите имя и фамилию</label>
<input type="text" id="name" placeholder="Иван Иванов">
</form>
</div>
## Другие текстовые поля
Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение `password` для атрибута `type`:
```html
<form>
<label for="pin">Введите пинкод</label>
<input type="password" id="pin" placeholder="1234">
</form>
```
<div class="hexlet-basics-example my-3">
<form>
<label for="pin">Введите пинкод</label>
<input type="password" id="pin" placeholder="1234">
</form>
</div>
В стандарте HTML5 появилось ещё несколько интересных типов для тега `<input>`, которые реализуют обычное текстовое поле, но имеют свою реализацию. Например:
* `email`
* `number`
* `search`
* `tel`
* `url`
Их назначение в том, что значения автоматически проверяются браузером на корректность. Например, если ввести значение `email`, то браузер будет ожидать корректный шаблон для Email адреса. В противном случае он сам укажет, что значение неверное при попытке отправить форму.
Мобильные устройства также не обходят стороной эти поля. В современных версиях мобильных операционных систем клавиатура подстраивается под тип поля, которое заполняется. Если выставлен тип `email`, то на клавиатуру сразу будет добавлен символ `@`, чтобы его не приходилось искать в дополнительных символах
instructions: |
Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы создайте 2 текстовых поля