У цьому посібнику ви дізнаєтеся всі важливі аспекти поля введення для електронної пошти та URL-адрес у формах HTML. Мета полягає в тому, щоб показати вам, як ефективно реалізувати валідацію цих введень і налаштувати стилізацію для різних станів введення. Це покращить користувацький досвід і якість даних, які ви збираєте.
Найважливіші висновки
- Ви дізнаєтеся основу побудови та валідації для електронної пошти та URL за допомогою HTML.
- Також ви дізнаєтеся, як ви можете забезпечити візуальний зворотній зв'язок для користувачів, якщо введені дані недійсні, використовуючи CSS.
- Пояснюється використання шаблонів для додаткової валідації електронної пошти та URL.
Покрокова інструкція
1. Створення основного поля введення для електронної пошти
Почніть з створення стандартного елемента введення для електронної пошти. Вам потрібно встановити тип як "email", щоб браузер автоматично валідував введення.
Тепер HTML поводиться до поля введення так, що воно очікує адресу електронної пошти і надає візуальний зворотній зв'язок у разі неправильного введення. Як тільки користувач починає введення, фон змінюється на рожевий, щоб підказати, що щось не так.
2. Валідація адреси електронної пошти
Валідація електронної пошти відбувається за допомогою простих правил. Має бути принаймні один символ "@" і принаймні ще один символ. Це основне правило валідації NLP. Однак це правило валідації недостатнє для гарантії існування адреси електронної пошти.
Прикладом недійсної адреси електронної пошти є "bla@". У такому випадку відправлення форми блокується, і користувач отримує повідомлення про помилку.
3. Використання шаблонів для більш точної валідації
Для досягнення більш точної валідації ви можете використовувати атрибут "pattern". За допомогою регулярного виразу (Regex) ви можете вказати, що адреса електронної пошти повинна відповідати певним вимогам, наприклад, конкретній доменній назві.
За допомогою цієї додаткової валідації ви гарантуєте, що будуть прийняті лише дійсні адреси електронної пошти, наприклад, тільки адреси Gmail або GMX.
4. Обов'язкове введення та стилізація
Для того щоб переконатися, що поле електронної пошти заповнено, ви можете додати атрибут "required". Якщо користувач спробує відправити форму без введення, він одразу отримає візуальний зворотній зв'язок.
Для стилізації недійсних вводів в CSS ви можете використовувати селектор ":invalid". Це призведе до того, що фон поля стане червоним, щоб попередити користувача, що введення некоректне.
5. Створення поля введення для URL-адрес
Аналогічно до електронної пошти, важливо також створити відповідний елемент введення для URL-адрес. Встановіть тип на "url", щоб браузер також валідував введення тут.
6. Валідація URL-адреси
Основні вимоги для дійсної URL-адреси включають те, що вона має починатися з "http://" або "https://", і мати принаймні один наступний символ. Якщо користувач просто вводить "https", цього недостатньо.
Те ж саме стосується інших протоколів, таких як "ftp". Якщо введення не відповідає умовам, браузер надає зворотній зв'язок і не дозволяє відправити форму.
7. Розширена валідація з використанням шаблонів для URL-адрес
Для більш точної валідації для певних шаблонів, таких як "https://www.example.com", вам також слід використовувати атрибут "pattern", щоб допомогти вашим користувачам вводити правильні URL-адреси.
8. Зручність користування на мобільних пристроях
Великою перевагою використання типів "email" та "url" у формах є покращена зручність користування на мобільних пристроях. Клавіатура оптимально адаптується для спрощення введення електронних адрес і URL-адрес.
Підсумок
У цьому посібнику ми розглянули основні критерії для перевірки електронних адрес і URL-адрес у веб-формах. Ви дізналися, як виконувати як прості, так і розширені перевірки та налаштовувати зворотний зв'язок від користувача за допомогою CSS для створення кращого користувацького досвіду.
