Елемент <input>

Елемент <input> є одним з основних елементів для отримання від користувача даних на веб-сайті. Він може бути використаний для різних типів введення, таких як текст, пароль, чекбокси, радіокнопки, кнопки тощо.

Тип поля (інпута) визначається атрибутом type.

Текстовий input

Щоб створити текстове поле його атрибуту type дають значення text (це також значення за замовчанням). Це однорядкове поле вводу, яке приймає будь-які символи.

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

Щоб обробити введені дані після відправки форми, потрібно, щоб кожне поле введення мало унікальний розпізнавальний знак - це атрибут name. Цей атрибут повинен мати унікальне значення в межах форми. Коли відправляється форма, то на сервер передається звʼязка: імʼя поля і його значення. Тому кожен інпут повинен мати атрибут name.

Атрибут autofocus

Атрибут autofocus використовують для встановлення автоматичного фокусу на елемент вводу (зазвичай текстовому полю або кнопці) при завантаженні сторінки. Це означає, що цей елемент зможе отримувати введення від користувача без потреби клікати на ньому.

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

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

Атрибут placeholder

Атрибут placeholder використовують для надання короткого тексту-підказки у полі вводу або елементі форми. Цей текст з'являється у полі вводу до того, як користувач введе власний текст. Атрибут placeholder призначений для надання користувачам вказівок щодо того, яку інформацію слід вводити в поле вводу.

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

Пошта

Якщо в полі введення для атрибуту type задати значення email, то ми створимо інпут для введення електронної пошти.

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

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

Пароль

Для типу password, значення пароля буде візуально замінено на маркери з міркувань безпеки.

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

Числа

Якщо полю введення встановити значення number, то буде інпут для введення тільки числових значень. Всі символи крім цифр (і крапки) будуть ігноруватися.

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

Атрибутами min і max задають мінімальне і максимальне допустиме значення (діапазон введення).

За замовчанням вводити можна тільки цілі числа. Цю поведінку поля введення можна змінити за допомогою атрибуту step. Він задає крок зміни числа. За замовчанням його значення 1.

Радіо-кнопки (перемикачі)

Якщо в інпуті задати атрибуту type значення radio, то він перетвориться у перемикач (радіо-кнопку, radio button).

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

Щоб обʼєднати радіо-кнопки в одну групу, їм дають однакове значення атрибута name.

<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>

В радіо-кнопку не можна вводити дані. Значення вибору потрібно задавати в атрибуті value. Це значення буде передане на сервер під час відправки форми.

Атрибут-прапорець checked вказує на те, який перемикач буде обраний (відмічений) за замовчуванням. У групі радіо-кнопок в стані checked може бути тільки один елемент.

Чекбокси (прапорці)

Якщо в інпуті задати атрибуту type значення checkbox, то він перетвориться у прапорець (чекбокси, checkbox). На відміну від радіокнопок тут можна обирати довільну кількість значень. Тут можна також задавати атрибут-прапорець checked.

<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>

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

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

Телефонні номери

Якщо в інпуті задати атрибуту type значення tel, то це буде поле введення телефонних номерів. Можливі різні формати задання номера телефона. Якщо вводити це поле з телефона, то буде доступна телефонна номерна клавіатура.

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

Повзунки

Якщо в інпуті задати атрибуту type значення range, то це буде повзунок з цілими і дробовими значеннями. Атрибути min і max визначають діапазон значень, а step - крок. Щоб встановити значення, потрібно перетягнути повзунок у потрібну позицію між мінімальним і максимальним значеннями.

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

Дата та час

У браузерах є вбудований календар за допомогою якого користувач може обрати дату, час або одразу і дату і час (типи date, time і datetime-local). Атрибути min і max дозволяють встановити мінімальні та максимальні дати, за умови використання правильного формату.

<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">

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

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

Якщо тип інпуту - file, то буде поле вводу для вибору файлу для відсилання на сервер.

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

Сховане поле

Якщо тип інпуту - hidden, то це сховане поле вводу, яке не відображається на сторінці, але може бути використане для передачі даних на сервер.

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

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

Якщо тип інпуту - submit, то це кнопка для відправлення форми.

Якщо тип інпуту - reset, то це кнопка для скидання значень форми до їхніх початкових значень.

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

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

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

Інпут можна зробити також як кнопку задавши тип button.

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