HTML Типи введення
В цій главі описуються різні типи введення для елемента <input>.
В перекладі з анг. input - ввод, введення (даних); type - тип (даних).
HTML Типи введення
Тут різні типи вводу, які ви можете використовувати в HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Input Type Text - Тип введення Text (Текст)
<input type="text"> визначає однорядкове поле вводу текста:
Приклад
<form>
Ім’я:<br>
<input type="text" name="firstname"><br>
Прізвище:<br>
<input type="text" name="lastname">
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
Ім’я:Прізвище:
Input Type Password - Тип введення Password (Пароль)
<input type="password"> визначає поле пароля:
Приклад
<form>
Ім’я користувача:<br>
<input type="text" name="username"><br>
Пароль користувача:<br>
<input type="password" name="psw">
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
Ім’я користувача:Пароль користувача:
Спробуйте заповнити поля! Символи в полі пароля маскуються (відображаються у вигляді зірочок або кульок).
Input Type Submit - Тип введення Submit (Надіслати)
<input type="submit"> визначає кнопку для відправки даних форми в обробник форм.
Обробник форм зазвичай являє собою серверну сторінку зі скриптом для обробки вхідних даних.
Обробник форми вказується в атрибуті action:
Приклад
<form action="/action_page.html">
Ім’я:<br>
<input type="text" name="firstname" value="Mickey"><br>
Прізвище:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Надіслати">
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
Якщо ви опустите атрибут значення кнопки відправки, кнопка отримає текст за замовчуванням:
Приклад
<form action="/action_page.html">
Ім’я:<br>
<input type="text" name="firstname" value="Mickey"><br>
Прізвище:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>
Спробуйте самі »
Input Type Reset - Тип введення Reset (Скидування)
<input type="reset"> визначає кнопку скидування, яка скидує всі значення форми до їх значень за замовчуванням:
Приклад
<form action="/action_page.html">
Ім’я:<br>
<input type="text" name="firstname" value="Mickey"><br>
Прізвище:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Надіслати">
<input type="reset">
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
Якщо ви зміните вхідні значення і потім натисните кнопку "Скидування", дані форми будуть скинуті до значень за замовчуванням.
Input Type Radio - Тип введення Radio (радіо-кнопка)
<input type="radio"> визначає радіо-кнопку.
Перемикачі (радіо-кнопки) дозволяють користувачу обрати ЛИШЕ ОДИН із обмеженої кількості варіантів:
Приклад
<form>
<input type="radio" name="gender" value="male" checked> Чоловік<br>
<input type="radio" name="gender" value="female"> Жінка<br>
<input type="radio" name="gender" value="other"> Інше
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
ЧоловікЖінка
Інше
Input Type Checkbox - Тип введення Checkbox (Прапорець)
<input type="checkbox"> визначає прапорець.
Прапорці дозволяють користувачу обрати НУЛЬ або БІЛЬШЕ варіантів із обмеженої кількості варіантів.
Приклад
<form>
<input type="checkbox" name="vehicle1" value="Bike"> Я маю байк<br>
<input type="checkbox" name="vehicle2" value="Car"> Я маю авто
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
Я маю байкЯ маю авто
Input Type Button - Тип введення Button (Кнопка)
<input type="button"> визначає кнопку:
Приклад
<input type="button" onclick="alert('Слава Україні!')" value="Тицни мене!">
Спробуйте самі »
Ось як HTML-код вище буде відображатись в браузері:
HTML5 Типи введення
HTML5 додав декілька нових типів вводу:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Нові типи вводу, які не підтримуються старими веббраузерами, будуть поводити себе як <input type="text">.
Input Type Color - Тип введення Color (Колір)
<input type="color"> використовується для полів вводу, які мають містити колір.
В залежності від підтримки браузера в полі вводу може відображатися палітра кольорів.
Приклад
<form>
Оберіть ваш улюблений колір:
<input type="color" name="favcolor">
</form>
Спробуйте самі »
Input Type Date - Тип введення Date (Дата)
<input type="date"> використовується для полів вводу, які мають містити дату.
В залежності від підтримки браузера в поле вводу може відображатися засіб вибора дати.
Ви також можете використовувати атрибути min та max щоб додати обмеження для дати:
Приклад
<form>
Введіть дату до 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Введіть дату після 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Спробуйте самі »
Input Type Datetime-local - Тип введення Datetime-local (Локальні дата/час)
<input type="datetime-local"> визначає поле вводу дати та часу, без часового поясу.
В залежності від підтримки браузера в поле вводу може відображатися засіб вибору дати.
Приклад
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Спробуйте самі »
Input Type Email - Тип введення Email (Електронна пошта)
<input type="email"> використовується для полей вводу, які мають містити адресу електронної пошти.
В залежності від підтримки браузера адреса електронної пошти може автоматично перевірятися при відправці.
Деякі смартфони розпізнають тип електронної пошти і додають ".com" до набору з клавіатури, щоб відповідати вводу електронної пошти.
Input Type File - Тип введення File (Файл)
<input type="file"> визначає поле вибору файлу і кнопку "Огляд" для завантаження файла.
Input Type Month - Тип введення Month (Місяць)
<input type="month"> дозволяє користувачу обрати місяць і рік.
В залежності від підтримки браузера в полі вводу може відображатися засіб вибору дати.
Приклад
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Спробуйте самі »
Input Type Number - Тип введення Number (Число)
<input type="number"> визначає числове поле вводу.
Ви також можете встановити обмеження на те, які числа приймаються.
В наступному прикладі показано числове поле вводу, де ви можете ввести значення від 1 до 5:
Приклад
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Спробуйте самі »
Обмеження на ввод
Список деяких загальних обмежень вводу:
| Атрибут | Опис |
|---|---|
| checked | Вказує, що поле вводу має бути попередньо обрано при завантаженні сторінки (для type="checkbox" або type="radio") |
| disabled | Вказує, що поле вводу має бути відключено |
| max | Визначає максимальне значення для поля вводу |
| maxlength | Визначає максимальну кількість символів для поля вводу |
| min | Визначає мінімальне значення для поля вводу |
| pattern | Визначає регулярний вираз для перевірки вхідного значення |
| readonly | Вказує, що поле вводу доступне тільки для читання (не може бути змінено) |
| required | Вказує, що поле вводу є обов’язковим (має бути заповнене) |
| size | Визначає ширину (в символах) поля вводу |
| step | Визначає допустимі інтервали номерів для поля вводу |
| value | Визначає значення за замовчуванням для поля вводу |
Ви дізнаєтесь більше про обмеження вводу в наступній главі.
В наступному прикладі показано числове поле вводу, в якому ви можете ввести значення від 0 до 100 з кроком 10. Значення за замовчуванням - 30:
Приклад
<form>
Quantity:
<input type="number" name="points"min="0" max="100" step="10" value="30">
</form>
Спробуйте самі »
Input Type Range - Тип введення Range (Діапазон)
<input type="range"> визначає елемент управління для вводу числа, точне значення якого немає значення (наприклад, елемент управління повзунка). Діапазон за замовчуванням від 0 до 100. Однак ви можете встановити обмеження на те, які числа приймаються з атрибутами min, max та step:
Input Type Search - Тип введення Search (Пошук)
<input type="search"> використовується для полів пошуку (поле пошуку поводить себе як звичайне текстове поле).
Input Type Tel - Тип введення Tel (Телефон)
<input type="tel"> використовується для полів вводу, які мають містити номер телефона.
Приклад
<form>
Телефон:
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Спробуйте самі »
Input Type Time - Тип введення Time (Час)
<input type="time"> надає можливість користувачу обрати чася (без часового поясу).
В залежності від підтримки браузера в полі вводу може відображатися вказівник часу.
Input Type Url - Тип введення Url (веб-адреса)
<input type="url"> використовується для полів вводу, які мають містити URL адресу.
В залежності від підтримки браузера, поле URL може бути автоматично перевірено при відправці.
Деякі смартфони розпізнають тип URL і додають ".com" до вводу на клавіатурі, щоб відповідати вводу URL.
Приклад
<form>
Додайте вашу домашню сторінку:
<input type="url" name="homepage">
</form>
Спробуйте самі »
Input Type Week - Тип введення Week (Тиждень)
<input type="week"> надає можливість користувачу обрати тиждень та рік.
В залежності від підтримки браузера в полі вводу може відображатися засіб вибору дати.
HTML Вправи
HTML атрибут Input Type
| Тег | Опис |
|---|---|
| <input type=""> | Визначає тип введення для відображення |
