7.1 Текстове поле
HTML надає безліч типів вводу даних для елементів форм, які дають можливість користувачам вводити дані у різних форматах, таких як текст, електронна пошта, дати та багато іншого. Розглянемо докладно різні типи вводу даних і їх використання.
Елемент <input type="text"> використовується для вводу однорядкового тексту. Це найбазовіший і часто використовуваний тип вводу.
Приклад використання:
<label for="name">Ім'я:</label>
<input type="text" id="name" name="name">
Атрибути
maxlength: обмежує максимальну кількість символівplaceholder: текст-заповнювач, який відображається всередині поля вводу, поки користувач не почне вводити даніrequired: вказує, що поле обов'язкове до заповнення
Приклад з атрибутами:
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="Введіть ім'я користувача" required>
7.2 Поля для чисел
Елемент <input type="number"> використовується для вводу числових значень. Він дозволяє обмежувати ввід лише числами і може включати стрілки для збільшення або зменшення значення.
Приклад використання:
<label for="quantity">Кількість:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
Атрибути
min: встановлює мінімально допустиме значенняmax: встановлює максимально допустиме значенняstep: визначає крок зміни значенняvalue: встановлює початкове значення
7.3 Поля для електронної пошти
Елемент <input type="email"> призначений для вводу адрес електронної пошти. Він перевіряє, чи відповідає введений текст формату адреси електронної пошти.
Приклад використання:
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
Атрибути
multiple: дозволяє вводити кілька адрес електронної пошти, розділених комамиpattern: встановлює регулярний вираз для додаткової перевірки введених даних
Приклад з атрибутами:
<label for="emails">Email адреси (розділені комами):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 Поля для телефонного номера
Елемент <input type="tel"> використовується для вводу телефонних номерів. Він не виконує перевірку формату номера, але дозволяє налаштувати маску вводу через атрибут pattern.
Приклад використання:
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
Атрибути
pattern: встановлює регулярний вираз для перевірки формату введеного номера.
Приклад з атрибутами:
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 Поля для дат
Елемент <input type="date"> використовується для вводу дати. У підтримуваних браузерах з'являється віджет календаря для зручного вибору дати.
Приклад використання:
<label for="birthday">Дата народження:</label>
<input type="date" id="birthday" name="birthday">
Атрибути
min: встановлює мінімально допустиму датуmax: встановлює максимально допустиму дату
Приклад з атрибутами:
<label for="appointment">Дата зустрічі:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 Поля для введення часу
Елемент <input type="time"> використовується для введення часу. У підтримуваних браузерах з'являється віджет вибору часу.
Приклад використання:
<label for="meeting_time">Час зустрічі:</label>
<input type="time" id="meeting_time" name="meeting_time">
Атрибути
min: встановлює мінімально допустимий часmax: встановлює максимально допустимий часstep: визначає крок зміни часу
Приклад з атрибутами:
<label for="alarm">Будильник:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 Поля для введення URL
Елемент <input type="url"> використовується для введення веб-адрес (URL). Він перевіряє, чи відповідає введений текст формату URL.
Приклад використання:
<label for="website">Веб-сайт:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
Атрибути
pattern: встановлює регулярний вираз для додаткової перевірки введених даних.
Приклад з атрибутами:
<label for="personal_website">Особистий веб-сайт:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 Поля для введення паролів
Елемент <input type="password"> використовується для введення паролів. Введені дані приховуються, замінюючись символами (наприклад, зірочками або точками).
Приклад використання:
<label for="password">Пароль:</label>
<input type="password" id="password" name="password">
Атрибути
maxlength: обмежує максимальну кількість символівplaceholder: текст-заповнювачrequired: вказує, що поле обов'язкове для заповнення
Приклад з атрибутами:
<label for="new-password">Новий пароль:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Введіть пароль" required>
7.9 Поля для діапазону значень
Елемент <input type="range"> використовується для введення значень у певному діапазоні. Він відображається у вигляді повзунка.
Приклад використання:
<label for="volume">Гучність:</label>
<input type="range" id="volume" name="volume">
Атрибути
min: встановлює мінімально допустиме значенняmax: встановлює максимально допустиме значенняstep: визначає крок зміни значенняvalue: встановлює початкове значення
Приклад з атрибутами:
<label for="brightness">Яскравість:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 Поля для вибору кольору
Елемент <input type="color"> використовується для вибору кольору. У підтримуючих браузерах з'являється віджет вибору кольору.
Приклад використання:
<label for="favcolor">Виберіть ваш улюблений колір:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
Атрибути
value: встановлює початковий колір.
7.11 Поля для пошуку
Елемент <input type="search"> використовується для введення пошукових запитів. У більшості браузерів він має вбудовані стилі та функціональність для очищення введеного тексту.
Приклад використання:
<label for="search">Пошук:</label>
<input type="search" id="search" name="search" placeholder="Введіть пошуковий запит">
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ