-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update(HTML): web/html/element/input/email (#3620)
* update(HTML): web/html/element/input/email * update(HTML): web/html/element/input/email * Apply suggestions from code review Co-authored-by: Alina Listunova <[email protected]> --------- Co-authored-by: Alina Listunova <[email protected]>
- Loading branch information
Showing
1 changed file
with
7 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,7 +25,10 @@ browser-compat: html.elements.input.type_email | |
|
|
||
| ## Додаткові атрибути | ||
|
|
||
| На додачу до атрибутів, що працюють в усіх елементах {{HTMLElement("input")}}, незалежно від їхнього типу, поля `email` підтримують наступні атрибути. | ||
| На додачу до [глобальних атрибутів](/uk/docs/Web/HTML/Global_attributes) та атрибутів, що працюють на всіх елементах {{HTMLElement("input")}}, незалежно від їхніх типів, поля електронної пошти підтримують наступні атрибути. | ||
|
|
||
| > [!NOTE] | ||
| > Глобальний атрибут [`autocorrect`](/uk/docs/Web/HTML/Global_attributes/autocorrect) можна додати до полів електронної пошти, проте доступне в ньому значення завжди буде `off`. | ||
| ### list | ||
|
|
||
|
|
@@ -92,15 +95,15 @@ browser-compat: html.elements.input.type_email | |
| > [!NOTE] | ||
| > Крім цього, критично необхідно пам'ятати, що користувач може погратися з вашим HTML за лаштунками, тож ваш сайт _не повинен_ використовувати цю валідацію для жодних потреб безпеки. Ви _повинні_ перевірити адресу електронної пошти на боці сервера, при будь-якій операції, на безпеку якої може повпливати введений текст. | ||
| ### Просте поле електронної пошти | ||
| ### Базове поле електронної пошти | ||
|
|
||
| Наразі всі браузери, що мають реалізацію такого елемента, реалізовують його як стандартне текстове поле з базовими можливостями валідації. Проте специфікація дозволяє браузерам широкий погляд на це. Наприклад, елемент може бути інтегрований зі вбудованою адресною книгою користувацького пристрою, аби дозволити вибір адрес електронної пошти з її списку. У своєму найбазовішому варіанті поле `email` може бути реалізовано так: | ||
|
|
||
| ```html | ||
| <input id="emailAddress" type="email" /> | ||
| ``` | ||
|
|
||
| {{EmbedLiveSample('proste-pole-elektronnoi-poshty', 600, 40)}} | ||
| {{EmbedLiveSample('bazove-pole-elektronnoi-poshty', 600, 40)}} | ||
|
|
||
| Зверніть увагу, що це поле вважається дійсним, коли порожнє, а також коли введена одна коректно відформатована адреса, а інакше – дійсним не вважається. Якщо додати атрибут [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi), то приймаються лише коректно відформатовані адреси електронної пошти; тоді поле вже не вважається дійсним, коли порожнє. | ||
|
|
||
|
|
@@ -292,7 +295,7 @@ label::after { | |
|
|
||
|  | ||
|
|
||
| Якщо так все й залишити, то буде хоча б валідація коректних адрес електронної пошти. Але хочеться піти іще трохи далі – пересвідчитись, що адреса електронної пошти має форму `[ім'якористувача]@beststartupever.com`. Саме для цього застосуємо [`pattern`](/uk/docs/Web/HTML/Element/input#pattern-patern). Задамо атрибут `pattern` зі значенням `[email protected]`. Цей простий регулярний вираз вимагає рядка, що складається зі щонайменше одного символу будь-якого роду, після якого "@", а потім – доменне ім'я "beststartupever.com". | ||
| Якщо так все й залишити, то буде хоча б валідація коректних адрес електронної пошти. Але хочеться піти іще трохи далі – пересвідчитись, що адреса електронної пошти має форму `[ім'якористувача]@beststartupever.com`. Саме для цього застосуємо [`pattern`](/uk/docs/Web/HTML/Element/input#pattern-patern). Задамо атрибут `pattern` зі значенням `[email protected]`. Цей регулярний вираз вимагає рядка, що складається зі щонайменше одного символу будь-якого роду, після якого "@", а потім – доменне ім'я "beststartupever.com". | ||
|
|
||
| Зверніть увагу, що це й близько не адекватний фільтр для дійсних адрес електронної пошти: такий регулярний вираз дозволяє штуки роду " @beststartupever.com" (зверніть увагу на пробіл на початку) або "@@beststartupever.com", що геть не є дійсними адресами. Проте браузер запускає над уведеним текстом і стандартний фільтр адрес електронної пошти, _і_ наш власний патерн. Як наслідок, виходить валідація, що має суть "пересвідчитись, що це нагадує дійсну адресу електронної пошти, і якщо це так, то пересвідчитись що це також адреса на beststartupever.com." | ||
|
|
||
|
|
||