# Елемент \<input>

Елемент <mark style="background-color:red;">\<input></mark> є одним з основних елементів для отримання від користувача даних на веб-сайті. Він може бути використаний для різних типів введення, таких як текст, пароль, чекбокси, радіокнопки, кнопки тощо.&#x20;

Тип поля (інпута) визначається атрибутом <mark style="background-color:red;">type</mark>.

## Текстовий input

Щоб створити текстове поле його атрибуту <mark style="background-color:red;">type</mark> дають значення <mark style="background-color:red;">text</mark> (це також значення за замовчанням). Це однорядкове поле вводу, яке приймає будь-які символи.

```html
<input type="text" id="username" name="username">
```

Щоб обробити введені дані після відправки форми, потрібно, щоб кожне поле введення мало унікальний розпізнавальний знак - це атрибут <mark style="background-color:red;">name</mark>. Цей атрибут повинен мати унікальне значення в межах форми. Коли відправляється форма, то на сервер передається звʼязка: імʼя поля і його значення. Тому кожен інпут повинен мати атрибут <mark style="background-color:red;">name</mark>.&#x20;

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FhUxcGgLIAm3yKsNGyBwf%2Fsending-input-variable-to-server-653369.6274c935.png?alt=media&#x26;token=28ef7f5d-7848-46b7-86be-695fe0b0c695" alt="" width="375"><figcaption></figcaption></figure>

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

Атрибут <mark style="background-color:red;">autofocus</mark> використовують для встановлення автоматичного фокусу на елемент вводу (зазвичай текстовому полю або кнопці) при завантаженні сторінки. Це означає, що цей елемент зможе отримувати введення від користувача без потреби клікати на ньому.&#x20;

Автофокус за замовчанням не встановлений на жодному елементі форми. Афтофокус також не може бути у кількох елементів одночасно. Його ставлять на поле з якого варто користувачу починати заповнювати форму.

```html
<input type="text" id="username" name="username" autofocus>
```

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

Атрибут <mark style="background-color:red;">placeholder</mark> використовують для надання короткого тексту-підказки у полі вводу або елементі форми. Цей текст з'являється у полі вводу до того, як користувач введе власний текст. Атрибут <mark style="background-color:red;">placeholder</mark> призначений для надання користувачам вказівок щодо того, яку інформацію слід вводити в поле вводу.

```html
<input type="text" name="username" placeholder="Введіть ваше ім'я">
```

{% embed url="<https://codepen.io/khomiak/pen/WNPxvWd>" %}

## Пошта

Якщо в полі введення для атрибуту <mark style="background-color:red;">type</mark> задати значення <mark style="background-color:red;">email</mark>, то ми створимо інпут для введення електронної пошти.&#x20;

```html
<input type="email" id="email" name="email">
```

На перший погляд, ніякої різниці з текстовим полем. Але браузер в такому випадку надає можливість вибрати електронну пошту з адресної книги. Якщо форму відкрити на мобільному пристрої, то відкриється відповідна клавіатура для зручності введення електронної пошти, зокрема із символом @.

## Пароль

Для типу <mark style="background-color:red;">password</mark>, значення пароля буде візуально замінено на маркери з міркувань безпеки.&#x20;

```html
<input type="password" id="password" name="password">
```

{% embed url="<https://codepen.io/khomiak/pen/NWorGoe>" %}

## Числа <a href="#chisla" id="chisla"></a>

Якщо полю введення встановити значення <mark style="background-color:red;">number</mark>, то буде інпут для введення тільки числових значень. Всі символи крім цифр (і крапки) будуть ігноруватися.

```html
<label>
  Number of items:
  <input type="number" id="quantity" name="quantity" min="1" max="100">
</label>
```

Атрибутами <mark style="background-color:red;">min</mark> і <mark style="background-color:red;">max</mark> задають мінімальне і максимальне допустиме значення (діапазон введення).

За замовчанням вводити можна тільки цілі числа. Цю поведінку поля введення можна змінити за допомогою атрибуту <mark style="background-color:red;">step</mark>. Він задає крок зміни числа. За замовчанням його значення <mark style="background-color:red;">1</mark>.

{% embed url="<https://codepen.io/khomiak/pen/ZEwOQmK>" %}

## Радіо-кнопки (перемикачі) <a href="#radio-knopki-peremikachi" id="radio-knopki-peremikachi"></a>

Якщо в інпуті задати атрибуту <mark style="background-color:red;">type</mark> значення <mark style="background-color:red;">radio</mark>, то він перетвориться у перемикач (радіо-кнопку, radio button).

Радіо-кнопки йдуть групами, і серед них можна обрати лише одне значення.

Щоб обʼєднати радіо-кнопки в одну групу, їм дають однакове значення атрибута <mark style="background-color:red;">name</mark>.

```html
<input type="radio" id="male" name="gender" value="male">
<label for="male">Чоловік</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Жінка</label>
```

{% embed url="<https://codepen.io/khomiak/pen/BaMzKqW>" %}

В радіо-кнопку не можна вводити дані. Значення вибору потрібно задавати в атрибуті <mark style="background-color:red;">value</mark>. Це значення буде передане на сервер під час відправки форми.

Атрибут-прапорець <mark style="background-color:red;">checked</mark> вказує на те, який перемикач буде обраний (відмічений) за замовчуванням. У групі радіо-кнопок в стані <mark style="background-color:red;">checked</mark> може бути тільки один елемент.

## Чекбокси (прапорці) <a href="#chekboksi-praporci" id="chekboksi-praporci"></a>

Якщо в інпуті задати атрибуту <mark style="background-color:red;">type</mark> значення <mark style="background-color:red;">checkbox</mark>, то він перетвориться у прапорець (чекбокси, checkbox). На відміну від радіокнопок  тут можна обирати довільну кількість значень. Тут можна також задавати атрибут-прапорець <mark style="background-color:red;">checked</mark>.

```html
<input type="checkbox" id="uk" name="lang" value="uk" checked>
<label for="uk">Українська</label>
  
<input type="checkbox" id="en" name="lang" value="en">
<label for="en">Англійська</label>

  <input type="checkbox" id="es" name="lang" value="es">
<label for="es">Іспанська</label>
```

Чекбокси можуть іти як в групі, так і по одинці (наприклад згода на обробку даних під час реєстрації)

```html
<input type="checkbox" id="agreement" name="agreement">
<label for="agreement">Даю згоду на обробку даних</label>
```

{% embed url="<https://codepen.io/khomiak/pen/bGzeewv>" %}

## Телефонні номери <a href="#telefonni-nomeri" id="telefonni-nomeri"></a>

Якщо в інпуті задати атрибуту <mark style="background-color:red;">type</mark> значення <mark style="background-color:red;">tel</mark>, то це буде поле введення телефонних номерів. Можливі різні формати задання номера телефона. Якщо вводити це поле з телефона, то буде доступна телефонна номерна клавіатура.

```html
<label for="tel">Телефон: </label>
<input type="tel" id="tel" name="tel">
```

{% embed url="<https://codepen.io/khomiak/pen/ZEwOOvd>" %}

## Повзунки <a href="#povzunki" id="povzunki"></a>

Якщо в інпуті задати атрибуту <mark style="background-color:red;">type</mark> значення <mark style="background-color:red;">range</mark>, то це буде повзунок з цілими і дробовими значеннями. Атрибути <mark style="background-color:red;">min</mark> і <mark style="background-color:red;">max</mark> визначають діапазон значень, а <mark style="background-color:red;">step</mark> - крок. Щоб встановити значення, потрібно перетягнути повзунок у потрібну позицію між мінімальним і максимальним значеннями.

Щоб контролювати поточне значення повзунка зазвичай використовують JavaScript.

{% embed url="<https://codepen.io/khomiak/pen/NWorrEE>" %}

## Дата та час <a href="#data-ta-chas" id="data-ta-chas"></a>

У браузерах є вбудований календар за допомогою якого користувач може обрати дату, час або одразу і дату і час (типи <mark style="background-color:red;">date</mark>, <mark style="background-color:red;">time</mark> і <mark style="background-color:red;">datetime-local</mark>).  Атрибути <mark style="background-color:red;">min</mark> і <mark style="background-color:red;">max</mark> дозволяють встановити мінімальні та максимальні дати, за умови використання правильного формату.

```html
<input type="date" id="birthdate" name="birthdate">
<input type="time" id="meeting-time" name="meeting-time">
<input type="datetime-local" id="meeting-datetime" name="meeting-datetime">
```

{% embed url="<https://codepen.io/khomiak/pen/ZEwOpVK>" %}

Стилізувати стандартні інпути дати та часу важко, тому в розробці зазвичай використовують сторонні бібліотеки.

## Завантаження файлу

Якщо тип інпуту - <mark style="background-color:red;">file</mark>, то буде поле вводу для вибору файлу для відсилання на сервер.

```html
<input type="file" id="file" name="file">
```

## Сховане поле

Якщо тип інпуту - <mark style="background-color:red;">hidden</mark>, то це сховане поле вводу, яке не відображається на сторінці, але може бути використане для передачі даних на сервер.

```html
<input type="hidden" id="user-id" name="user-id" value="123">
```

## Кнопки та їх інпути-відповідники

Якщо тип інпуту - <mark style="background-color:red;">submit</mark>, то це кнопка для відправлення форми.

Якщо тип інпуту - <mark style="background-color:red;">reset</mark>, то це кнопка для скидання значень форми до їхніх початкових значень.

```html
<input type="submit" value="Надіслати">
<input type="reset" value="Скинути">
```

Можна задати і традиційно кнопками

```html
<button type="submit">Submit</button>
<button type="reset">Reset</button>
```

Інпут можна зробити також як кнопку задавши тип <mark style="background-color:red;">button</mark>.&#x20;

```html
<input type="button" value="Натисніть мене" onclick="myFunction()">
```