diff --git a/html/inputmode/demos/basic/index.html b/html/inputmode/demos/basic/index.html index cd5fd2b00f..2b45550748 100644 --- a/html/inputmode/demos/basic/index.html +++ b/html/inputmode/demos/basic/index.html @@ -6,7 +6,7 @@ - + -
-
- - - - - - - - -
-
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/html/inputmode/images/tel_email.jpg b/html/inputmode/images/tel_email.jpg deleted file mode 100644 index b696f638d4..0000000000 Binary files a/html/inputmode/images/tel_email.jpg and /dev/null differ diff --git a/html/inputmode/images/tel_email.png b/html/inputmode/images/tel_email.png new file mode 100644 index 0000000000..c96c053d0b Binary files /dev/null and b/html/inputmode/images/tel_email.png differ diff --git a/html/inputmode/images/tel_numeric.jpg b/html/inputmode/images/tel_numeric.jpg deleted file mode 100644 index f66485bb60..0000000000 Binary files a/html/inputmode/images/tel_numeric.jpg and /dev/null differ diff --git a/html/inputmode/images/tel_numeric.png b/html/inputmode/images/tel_numeric.png new file mode 100644 index 0000000000..28b46d298e Binary files /dev/null and b/html/inputmode/images/tel_numeric.png differ diff --git a/html/inputmode/images/tel_phone.jpg b/html/inputmode/images/tel_phone.jpg deleted file mode 100644 index 839159d5b2..0000000000 Binary files a/html/inputmode/images/tel_phone.jpg and /dev/null differ diff --git a/html/inputmode/images/tel_phone.png b/html/inputmode/images/tel_phone.png new file mode 100644 index 0000000000..1717d45b93 Binary files /dev/null and b/html/inputmode/images/tel_phone.png differ diff --git a/html/inputmode/images/tel_text.jpg b/html/inputmode/images/tel_text.jpg deleted file mode 100644 index 9f7e5ce712..0000000000 Binary files a/html/inputmode/images/tel_text.jpg and /dev/null differ diff --git a/html/inputmode/images/tel_text.png b/html/inputmode/images/tel_text.png new file mode 100644 index 0000000000..2b5f18c548 Binary files /dev/null and b/html/inputmode/images/tel_text.png differ diff --git a/html/inputmode/images/tel_url.jpg b/html/inputmode/images/tel_url.jpg deleted file mode 100644 index 65e736b6d7..0000000000 Binary files a/html/inputmode/images/tel_url.jpg and /dev/null differ diff --git a/html/inputmode/images/tel_url.png b/html/inputmode/images/tel_url.png new file mode 100644 index 0000000000..9e158d8763 Binary files /dev/null and b/html/inputmode/images/tel_url.png differ diff --git a/html/inputmode/index.md b/html/inputmode/index.md index b0ad885305..b6355ea07c 100644 --- a/html/inputmode/index.md +++ b/html/inputmode/index.md @@ -3,6 +3,9 @@ title: "Атрибут `inputmode`" description: "Если нужно ввести только цифры зачем показывать всю клавиатуру? Подсказка для браузера какой набор символов нужен." authors: - webdb81 +contributors: + - skorobaeus + - tatianafokina keywords: - тип клавиатуры related: @@ -44,13 +47,13 @@ tags: Используется стандартная клавиатура устройства пользователя. Является значением по умолчанию, учитывает локализацию устройства пользователя. -![Пример клавиатуры для ввода текста](images/tel_text.jpg) +![Пример клавиатуры для ввода текста](images/tel_text.png) ### `numeric` Числовая раскладка клавиатуры. Чаще всего используется для полей ввода, ожидающих цифры: код доступа, номер документа, почтовый индекс и т.п. -![Пример клавиатуры для ввода числовых значений](images/tel_numeric.jpg) +![Пример клавиатуры для ввода числовых значений](images/tel_numeric.png) В сочетании с атрибутами `pattern`, `minlength` и `maxlength` позволяет настроить поле ввода для разных вариантов использования. @@ -62,7 +65,7 @@ tags: Ввод номера телефона на клавиатуре, которая использует числа от 0 до 9, звёздочку * и решётку #. -![Пример клавиатуры для ввода номера телефона](images/tel_phone.jpg) +![Пример клавиатуры для ввода номера телефона](images/tel_phone.png) При использовании этого значения, для поля ввода рекомендуется указывать тип `tel`: @@ -74,7 +77,7 @@ tags: Клавиатура, оптимизированная для ввода электронной почты. Символы @ и точка . могут располагаться в более удобном месте. Может иметь отдельные кнопки для ввода доменов первого уровня (.com, .ru). -![Пример клавиатуры для ввода электронной почты](images/tel_email.jpg) +![Пример клавиатуры для ввода электронной почты](images/tel_email.png) При использовании этого значения, для поля ввода рекомендуется указывать тип `email`: @@ -94,11 +97,11 @@ tags: Используется клавиатура, оптимизированная для ввода ссылок. Может иметь отдельные кнопки для ввода доменов первого уровня (.com, .ru). Символы точки . и косой черты / могут располагаться в более удобных местах. -![Пример клавиатуры для ввода ссылок](images/tel_url.jpg) +![Пример клавиатуры для ввода ссылок](images/tel_url.png) Посмотрите на смартфоне или планшете, как будут изменяться клавиатуры для полей ввода. - + ## Подсказки diff --git a/html/novalidate/demos/form-validation/index.html b/html/novalidate/demos/form-validation/index.html index 18fd04bbd0..331b432295 100644 --- a/html/novalidate/demos/form-validation/index.html +++ b/html/novalidate/demos/form-validation/index.html @@ -1,97 +1,263 @@ - Форма с отключённой валидацией — novalidate — Дока + Форма с отключённой валидацией — Атрибут novalidate — Дока - + -
- <form novalidate> - - - - -
- - +
+
+ + <form novalidate>
- Спасибо, ваш отзыв отправлен! - + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
Спасибо, ваш отзыв отправлен 🎉
+
+
diff --git a/html/novalidate/index.md b/html/novalidate/index.md index 4b9f56cdc8..d2f641587e 100644 --- a/html/novalidate/index.md +++ b/html/novalidate/index.md @@ -3,6 +3,9 @@ title: "Атрибут `novalidate`" description: "Отключает валидацию формы. Зачем нам валидация формы браузером, когда у нас есть JavaScript?" authors: - vchychuzhko +contributors: + - skorobaeus + - tatianafokina editors: - tachisis keywords: @@ -36,31 +39,54 @@ tags: ```html
- - - - -
- +
+ +
+
+ + +
+
+ + +
+
+ +
+ ``` ### Результат - + Хоть некоторые поля являются обязательными к заполнению, и даже есть поле с типом `email`, вы всё равно сможете отправить пустую форму. Но как только вы уберёте атрибут `novalidate` с помощью кнопки «Вернуть валидацию», браузер не даст отправить форму, пока все поля не будут заполнены верно.