В този учебен материал ще научите всички важни аспекти на полетата за въвеждане на имейл адреси и URL адреси във HTML формуляри. Целта е да ви покажем как ефективно да извършите валидация на тези въвеждания и как да приспособите стилинга за различните състояния на въвеждане. Това не само ще подобри потребителския опит, но и качеството на данните, които събирате.
Най-важни изводи
- Ще научите основната структура и валидация за имейл и URL чрез HTML.
- Също така ще научите как да предоставите визуален отзив на потребителите, когато въведените данни са невалидни.
- Ще бъдат обяснени използването на шаблони за допълнителна валидация на имейл адреси и URL адреси.
По стъпково ръководство
1. Създаване на основно въвеждане за имейл
Започнете със създаването на стандартен елемент за въвеждане за имейл. Трябва да зададете типа като "имейл", така че браузърът да валидира въвеждането автоматично.
Входното поле вече ще бъде обработвано от 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, за да създадете по-добър потребителски опит.
