Урок. HTML. Типи вводу. Input type

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. HTML. Типи вводу

Цей розділ описує різні типи вводу для елемента <input>.


HTML Input Types

Це різні типи вводу, які можна використовувати в HTML:


Тип Text (текст)

<input type="text"> визначає однорядкове поле вводу тексту:

Приклад:

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:

First name:

Last name:

Тип вводу Password (пароль)

<input type="password"> визначає поле вводу паролю:

Приклад:

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:

User name:

User password:

Символи в полі пароля маскуються (показано як зірочки або чорні кола).


Тип вводу Submit (Відправити)

<input type="submit"> визначає кнопку для відправки даних форми до обробника форм.

Обробник форм зазвичай є сторінкою сервера зі сценарієм для обробки вхідних даних. Обробник форм вказано в атрибуті action форми:

Приклад:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:

First name:

Last name:


Якщо ви не вкажете атрибут значення кнопки "Відправити", кнопка отримає текст за замовчуванням:

Приклад:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>
Спробуйте самі! »

Тип вводу Reset (Скидання)

<input type="reset"> визначає кнопку скидання, яка скидає всі значення форми до значень за замовчуванням

Приклад:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:

First name:

Last name:


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


Тип вводу Radio

<input type="radio"> визначає перемикач (кнопку radio).

Кнопки radio дозволяють користувачеві вибрати ТІЛЬКИ ОДИН з обмеженого числа варіантів:

Приклад:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:

Male
Female
Other

Тип вводу Checkbox (прапорець)

<input type="checkbox"> визначає прапорець.

Прапорці дозволяють користувачеві вибрати опції ZERO або MORE для обмеженого вибору.

Приклад:

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:

I have a bike
I have a car

Тип вводу Button (кнопка)

<input type="button"> визначає кнопку:

Приклад:

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Спробуйте самі! »

Таким чином HTML-код буде відображатися в браузері:


HTML5 Input Types

HTML5 додав кілька нових типів вводу:

Нові типи вводу даних, які не підтримуються старішими веб-браузерами, будуть вести себе як <input type="text">.


Тип вводу Color (колір)

<input type="color"> використовується для полів вводу, які повинні містити колір.

Залежно від підтримки веб-браузера у полі вводу може відображатися вибір кольорів.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Спробуйте самі! »

Тип вводу Date (дата)

<input type="date"> використовується для полів вводу, які повинні містити дату.

Залежно від підтримки веб-браузера у полі вводу може відображатися вибір дати.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Birthday:
  <input type="date" name="bday">
</form>
Спробуйте самі! »

Можна також використовувати атрибути min та max для додавання обмежень на дати:

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Спробуйте самі! »

Тип вводу Datetime-local

<input type="datetime-local"> вказує поле вводу дати та часу, у якому немає часового поясу.

Залежно від підтримки веб-браузера у полі вводу може відображатися вибір дати.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Спробуйте самі! »

Тип вводу email (електронна пошта)

<input type="email"> використовується для полів вводу, які повинні містити адресу електронної пошти.

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

Деякі смартфони розпізнають тип електронної пошти та додають ".com" на клавіатуру, щоб відповідати введенню електронної пошти.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  E-mail:
  <input type="email" name="email">
</form>
Спробуйте самі! »

Тип вводу File (файл)

<input type="file"> визначає поле вибору файлу і кнопку "Огляд" для завантаження файлів.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Select a file: <input type="file" name="myFile">
</form>
Спробуйте самі! »

Тип вводу Month (місяць)

<input type="month"> дозволяє користувачеві вибрати місяць і рік.

Залежно від підтримки веб-браузера у полі вводу може відображатися вибір дати.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Спробуйте самі! »

Тип вводу Number (номер)

<input type="number"> визначає числове поле вводу.

Ви також можете встановити обмеження щодо того, які числа приймаються.

У наступному прикладі відображається числове поле вводу, в якому можна ввести значення від 1 до 5:

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Спробуйте самі! »

Обмеження вводу

Це список деяких загальних обмежень вводу (деякі з них нові в HTML5):

Атрибут Опис
disabled Вказує, що поле вводу має бути вимкнено
max Вказує максимальне значення для поля вводу
maxlength Вказує максимальну кількість символів для поля вводу
min Вказує мінімальне значення для поля вводу
pattern Визначає регулярний вираз для перевірки вхідного значення
readonly Вказує, що поле вводу лише для читання (не може бути змінено)
required Вказує, що поле вводу обов'язкове (має бути заповнене)
size Вказує ширину (у символах) поля вводу
step Визначає допустимі інтервали номерів для поля вводу
value Вказує значення за замовчуванням для поля вводу

Ви дізнаєтеся більше про обмеження вводу в наступному розділі.

У наступному прикладі відображається числове поле вводу, в якому можна ввести значення від 0 до 100, кроками 10. Значення за замовчуванням - 30:

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Спробуйте самі! »

Тип вводу Range (діапазон)

<input type="range"> визначає елемент керування для вводу числа, точне значення якого не є важливим (наприклад, повзунок). Стандартний діапазон від 0 до 100. Проте ви можете встановити обмеження щодо того, які числа приймаються з атрибутами min, max та step:

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  <input type="range" name="points" min="0" max="10">
</form>
Спробуйте самі! »

Тип вводу Search (пошук)

<input type="search"> використовується для пошукових полів (поле пошуку поводиться як звичайне текстове поле).

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
Спробуйте самі! »

Тип вводу Tel (телефон)

<input type="tel"> використовується для полів вводу, які повинні містити номер телефону.

Примітка: Тип tel в даний час підтримується лише у Safari 8.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
Спробуйте самі! »

Тип вводу Time (час)

<input type="time"> дозволяє користувачеві вибрати час (без часового поясу).

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Спробуйте самі! »

Тип вводу Url (веб-адреса)

<input type="url"> використовується для полів вводу, які повинні містити URL-адресу.

Залежно від підтримки веб-браузера, поле URL може бути автоматично перевірено під час подання. Деякі смартфони розпізнають тип URL-адреси та додають ".com" до клавіатури, щоб відповідати введенню URL.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Спробуйте самі! »

Тип вводу Week (тиждень)

<input type="week"> дозволяє користувачеві вибрати тиждень і рік.

Залежно від підтримки веб-браузера у полі вводу може відображатися вибір дати.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
Спробуйте самі! »

Перевірте себе вправами!


HTML Атрибут Input Type

Тег Опис
<input type=""> Визначає тип вводу для відображення

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.