Home

Форми

Зміст

  1. Елемент form
  2. Елемент label
  3. Елемент input
  4. Атрибут autofocus placeholder
  5. Пошта і пароль
  6. Радіо-кнопки
  7. Чекбокси (прапорці)
  8. Числа
  9. Повзунки
  10. Дата та час
  11. Елемент textarea
  12. Елемент select
  13. Елемент datalist
  14. Групування полів fieldset і legend
  15. Валідація
  16. Обов'язкові поля
  17. Регулярний вираз
  18. Псевдокласи стану
  19. :enabled і :disabled
  20. Форма від ментора

Форми

form

Елемент form

  • form/ name="signup_form" autocomplete="on" novalidate /form
  • В елемента form немає обов'язкових атрибутів, тому в прикладі наведені кілька корисних необов'язкових
  • name - унікальне ім'я форми на поточній веб-сторінці. Використовується як на сервері, так і на клієнті під час роботи з формою
  • autocomplete - визначає, чи може браузер автоматично заповнювати значення всіх елементів форми. Має всього два значення off і on
  • novalidate - атрибут-прапорець, не має значення. Каже браузеру не перевіряти валідність введених даних під час відправлення форми
  • По кліку на button type="submit" , вона «відправляється», що призводить до перезавантаження поточної сторінки

Елемент label

  • Елемент label пов'язує опис (мітку) з інтерактивним елементом форми.
  • Якщо елемент форми, наприклад поле введення, вкладається в label, зв'язок створюється браузером автоматично
  • Якщо елемент форми не вкладений в label, необхідно явно зв'язати їх за допомогою атрибута id елемента, що зв'язується, і атрибута for мітки.

Елемент input

  • Універсальний елемент для створення різноманітних полів введення. Тип поля визначається атрибутом type, значення якого за замовчуванням text
  • input type="text" name="username"
  • Ім'я поля повинно бути унікальним всередині форми.

  • Атрибут autofocus

    Поле введення, якому заданий цей атрибут, автоматично отримає фокус під час завантаження сторінки, і в ньому можна відразу набирати текст. За замовчуванням атрибут не встановлений для жодного поля. Атрибут autofocus - логічний.

  • Атрибут placeholder

    Дозволяє відображати текст-підказку про те, які дані необхідно ввести в поле, коли елемент input порожній

Пошта і пароль

  • form

            input type="email" name="email" placeholder="xxx@ukr.net"
        input type="password" name="password" minlength="4" maxlength="6" placeholder="****"
        input type="tel" name="phone" placeholder="067-548xxxx"

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

  • Якщо задати атрибуту type значення radio - інпут перетвориться у перемикач
  • Кожній радіо-кнопці в групі задається однакове значення атрибута name, інакше браузер не знатиме, що це група.

  • Choose a color:

    input type="radio" name="color" value="blue" checked

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

  • Дозволяють вибирати довільну кількість значень

  • Choose a color:

    input type="checkbox" name="color" value="blue" checked

Числа

  • Звичайні текстові поля приймають буквально все: цифри, літери, пробіли, розділові знаки тощо
  • Для того, щоб дозволити вводити тільки числа, використовується тип поля number
  • input type="number" name="weight" min="0" max="200" step="0.5" value="0"

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

  • Зараз єдина користь від застосування поля типу tel полягає у відображенні віртуальної клавіатури для введення телефонних номерів у мобільних браузерах, яка містить цифри, але не літери.

Повзунки

  • Тип range використовується для створення повзунків з цілими і дробовими значеннями
  • Атрибути min і max встановлюють діапазон значень, а step контролює крок
  • Браузери не надають жодної візуальної зворотної інформації про встановлене значення. Це робиться за допомогою JavaScript і додаткової розмітки.

Дата та час

  • У браузерах є вбудований календар, в якому користувач може вибрати необхідну дату та/або час
  • Атрибути min і max дозволяють встановити мінімальні і максимальні дати, за умови використання правильного формату.
  • замість нативного календаря найчастіше використовують готові JavaScript-бібліотеки.

Елемент textarea

  • Створює багаторядкове текстове поле для введення великої кількості тексту
  • textarea name="feedback" rows="5" placeholder="Enter your message here..."//text area

  • За замовчуванням елемент text area можна розтягувати за горизонталлю і вертикаллю

  • Для того щоб контролювати можливість зміни розміру користувачем, в CSS є властивість resize.
  • resize: both | horizontal | vertical | none

Елемент select

  • Випадне меню - це альтернатива радіо-кнопкам, оскільки за замовчуванням дозволяє вибрати один з багатьох варіантів
  • Текст всередині елемента option відображається користувачеві, а значення атрибута value - це те, що буде використано під час відправлення форми.
  • select

Групування опцій

Елемент datalist

  • Автозаповнення. Під час введення символів у текстове поле пошукова система пропонує різні варіанти автозаповнення
  • Елемент datalist створює список попередньо встановлених значень, які можна вибирати під час набору в пов'язаному текстовому полі
  • Цей список прихований і стає доступним під час отримання інпутом фокуса і набору тексту в ньому.
  • Список, що створюється елементом datalist, зв'язується з текстовим полем за допомогою атрибута id. Його значення повинно збігатися зі значенням атрибута list тегу input.
  • -

Групування полів

fieldset і legend

Enter your contact details
Your favourite programming language
I want to receive

Валідація

  • Щоразу під час заповнення полів форми не в тому форматі, який вони очікують, ми отримуємо зворотний зв'язок у вигляді повідомлень. Так працюють форми реєстрації, оформлення замовлення та будь-які інші, де важливий формат даних, що вводяться.

  • Це називається валідація форми - перевірка коректності значень, що вводяться. Якщо дані правильні, форма буде відправлена, в іншому випадку буде відображено повідомлення про помилку, пояснюючи необхідні виправлення.
  • Існує два види валідації - на клієнті (в браузері) і на сервері (бекенді). На практиці ці два підходи завжди використовуються разом.
  • Валідація на клієнті - це перевірка, яка відбувається в браузері, перш ніж дані форми будуть відправлені на сервер.
  • Валідація на сервері - це остання лінія захисту веб-застосунку від неправильних або шкідливих даних.
  • У кожному сучасному браузері вбудована можливість валідації вмісту полів форми без використання JavaScript. Для цього використовується комбінація різних типів полів та їх атрибутів. Якщо користувач ввів невалідне значення, браузер покаже повідомлення.
  • Поведінка вбудованої валідації форм відрізняється між браузерами, тому на практиці використовують JavaScript-бібліотеки. Проте, варто знати основи HTML5-валідації.

Обов'язкові поля

  • Логічний атрибут required позначає поле форми як обов'язкове для заповнення.
  • Зовнішній вигляд повідомлення залежить від браузера і не може бути змінений за допомогою CSS.

  • Спробуйте відправити форму з прикладу, не заповнюючи поля пошти або пароля

  • Атрибути minlength і maxlength накладають обмеження на кількість символів, що вводяться
  • Атрибути min і max дозволяють перевірити входження чисельного значення у вказаний діапазон

  • Регулярний вираз

    Атрибут pattern дозволяє вказати регулярний вираз (шаблон), щодо якого буде перевірятися значення поля. За замовчуванням, у разі помилки валідації, браузер відобразить стандартний текст «Please match the requested format». Додатковий текст-підказку, який буде відображений у повідомленні від браузера, можна вказати в атрибуті title 

                            /input type="text" name="text" required 
                            pattern="^[a-zA-Z]+\s[a-zA-Z]+$" 
                            title="Username must be two words separated by space." /

Псевдокласи стану

Існує набір псевдокласів, створених спеціально для елементів форм, і жодним чином не впливають на інші елементи. За допомогою них можна оформляти поля форми за станом валідності введених даних або обов'язковості заповнення.

  • :enabled і :disabled

    Застосовуються до елементів input, select і button.

Форма від ментора