New chapter: Input Fields

src/SUMMARY.md

@@ -48,3 +48,4 @@
     - [Работа с текстом элемента](web_apis/working_with_element_text.md)
     - [Поиск элементов внутри других элементов](web_apis/querying_elements_inside_other_elements.md)
     - [События](web_apis/events.md)
+    - [Поля ввода](web_apis/input_fields.md)

src/web_apis/input_fields.md

@@ -0,0 +1,66 @@
+# Поля ввода
+
+Один из способов взаимодействия пользователя со страницей — ввод данных в поля ввода. Для создания поля используется тег `<input>`, который не требует закрывающего тега.
+
+```html
+<input>
+```
+
+По-умолчанию все поля текстовые, но существует множество других типов полей. Тип поля можно указать в атрибуте `type`. В зависимости от типа браузер ограничивает то, какие значения пользователь может вводить. Некоторые типы полей выглядят отлично от текстовых, а браузер может показывать для них дополнительные элементы управления. Ниже показаны только несколько примеров полей разных типов.
+
+```html
+<!-- Текстовое поле. Этот тип используется по умолчанию -->
+<input type="text">
+<!-- Числовое поле. Браузер отобразит кнопки для увеличения и уменьшения числа -->
+<input type="number">
+<!-- Поле даты. Браузер позволит выбрать дату в календаре -->
+<input type="date">
+```
+
+Чтобы пользователю было понятно, что вводить в поле, к полям добавляют ярлыки. Обычно ярлык содержит только название поля. Ярлык создаётся при помощи тега `<label>` с атрибутом `for`, содержащим `id` того поля, к которому ярлык относится. 
+
+```html
+<label for="age-input">Возраст</label>
+<input type="number" id="age-input">
+```
+
+Конечно, написать название поля можно и в каком-то ещё теге, но использование `<label>` позволяет указать браузеру на связь между элементом ярлыка и элементом поля. Благодаря этому, например, браузер автоматически поставит курсор в поле ввода, если пользователь кликнет по ярлыку.
+
+Через JavaScript можно получить введённое пользователем значение поля или установить новое значение при помощи свойства `value`. Это свойство есть у всех объектов элементов `<input>`, а значение свойства всегда строчное, вне зависимости от типа поля.
+
+```js
+const someInput = document.querySelector("input");
+someInput.value;            // Возвращает текущее значение из поля
+someInput.value = "hello";  // Устанавливает в поле текст "hello"
+```
+
+### Пример
+
+Рассмотрим простую страницу, на которой есть поле для ввода текста и кнопка, по нажатию на которую на странице отображается длина текста в символах.
+
+```html
+<label for="text-input">Введите текст:</label>
+<input type="text" id="text-input">
+<button>Посчитать длину</button>
+<p>Длина текста: <span class="answer"></span></p>
+```
+
+```js
+const input = document.querySelector("input");
+const countButton = document.querySelector("button");
+const answer = document.querySelector(".answer");
+
+function displayAnswer() {
+    answer.innerText = input.value.length;
+}
+
+countButton.addEventListener("click", displayAnswer);
+```
+
+## Упражнения
+
+1. Реализуй страницу с простейшим калькулятором, складывающим два числа. На странице должны быть поля для ввода чисел и кнопка, по нажатию которой отображается сумма чисел.
+
+1. Реализуй страницу с числовом полем и кнопкой, по нажатию которой значение в поле должно удваиваться.
+
+1. Реализуй прототип страницы сайта поиска авиабилетов. У пользователя должна быть возможность ввести город отправления, город прибытия и дату полёта. Между полями ввода городов должна быть кнопка `⇄`, меняющая названия городов местами. Также на странице должна быть кнопка `Искать билеты`, по нажатию которой должно отображаться сообщение вида `Ищем билеты из <город отправления> в <город прибытия> на дату <дата полёта>`.