From 98ee875a62ffeacb83f8f2620837fc8f3d7a89b9 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Wed, 7 Aug 2024 01:26:10 +0300 Subject: [PATCH] [ru] replace old noteblock syntax with GFM syntax in `learn/forms` folder (#22693) * [ru] replace old noteblock syntax with GFM syntax in 'learn/forms' folder * [ru] fix flaws --- files/ru/learn/forms/form_validation/index.md | 48 ++++++++------ .../index.md | 30 +++++---- .../how_to_structure_a_web_form/index.md | 32 +++++----- .../sending_and_retrieving_form_data/index.md | 32 ++++++---- .../sending_forms_through_javascript/index.md | 48 +++++++------- .../ru/learn/forms/styling_web_forms/index.md | 47 +++++++------- .../learn/forms/user_input_methods/index.md | 64 +++++++++++-------- 7 files changed, 170 insertions(+), 131 deletions(-) diff --git a/files/ru/learn/forms/form_validation/index.md b/files/ru/learn/forms/form_validation/index.md index 065b886356d986..7379d9e58d08a4 100644 --- a/files/ru/learn/forms/form_validation/index.md +++ b/files/ru/learn/forms/form_validation/index.md @@ -34,7 +34,8 @@ slug: Learn/Forms/Form_validation - **Мы хотим защитить данные пользователей**. Принуждение пользователей вводить надёжные пароли облегчает защиту их аккаунтов. - **Мы хотим защитить себя**. Существует множество способов, позволяющих злоумышленникам с помощью незащищённых форм навредить приложению (смотрите [Безопасность вебсайтов](/ru/docs/Learn/Server-side/First_steps/Website_security)). - > **Предупреждение:** Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос. + > [!WARNING] + > Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос. ## Типы валидации на стороне клиента @@ -51,7 +52,7 @@ slug: Learn/Forms/Form_validation - [`minlength`](/ru/docs/Web/HTML/Attributes/minlength) и [`maxlength`](/ru/docs/Web/HTML/Attributes/maxlength): Задаёт минимальную и максимальную длину текстовых данных (строк) - [`min`](/ru/docs/Web/HTML/Attributes/min) и [`max`](/ru/docs/Web/HTML/Attributes/max): Задаёт минимальное и максимальное значение для поля, расчитанного на числовой тип данных - `type`: Определяет тип данных, на который рассчитано поле: число, email-адрес или какой-то другой предустановленный тип -- [`pattern`](/ru/docs/Web/HTML/Attributes/pattern): С помощью [регулярного выражения](/ru/docs/Web/JavaScript/Guide/Regular_Expressions), определяет шаблон, которому должны соответствовать вводимые данные. +- [`pattern`](/ru/docs/Web/HTML/Attributes/pattern): С помощью [регулярного выражения](/ru/docs/Web/JavaScript/Guide/Regular_expressions), определяет шаблон, которому должны соответствовать вводимые данные. Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными @@ -65,7 +66,8 @@ slug: Learn/Forms/Form_validation - Элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} или, в зависимости от ошибки, другим псевдоклассам (например, {{cssxref(":out-of-range")}}), которые позволяют применять определённые стили к элементам, не являющимся валидными. - Если пользователь пытается отправить данные, браузер заблокирует форму и выведет сообщение об ошибке. -> **Примечание:** Существует ошибки, которые не позволяют отправлять форму, в частности {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} или {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} или {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, или {{domxref('validityState.customError','customError')}}. +> [!NOTE] +> Существует ошибки, которые не позволяют отправлять форму, в частности {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} или {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} или {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, или {{domxref('validityState.customError','customError')}}. ## Примеры встроенной валидации форм @@ -131,17 +133,19 @@ input:valid { {{EmbedLiveSample("The_required_attribute", "100%", 80)}} -> **Примечание:** Рабочий пример можно найти на GitHub по адресу [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) (отдельно можно найти [исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html).) +> [!NOTE] +> Рабочий пример можно найти на GitHub по адресу [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) (отдельно можно найти [исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html).) Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке ("Заполните это поле") и блокируется отправка формы. Наличие атрибута `required` у любого элемента, который его поддерживает, означает, что элемент соответствует CSS-псевдоклассу {{cssxref(':required')}}, независимо от того, имеет он значение или нет. Если элемент {{HTMLElement("input")}} не содержит значение, он будет соответствовать псевдоклассу {{cssxref(':invalid')}}. -> **Примечание:** Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению [доступности](/ru/docs/Learn/Accessibility) WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя? +> [!NOTE] +> Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению [доступности](/ru/docs/Learn/Accessibility) WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя? ### Валидация с помощью регулярного выражения -Ещё одной полезной функцией валидации является атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern), который в виде значения принимает [Регулярное выражение](/ru/docs/Web/JavaScript/Guide/Regular_Expressions). Регулярное выражение (regex) — это шаблон, который может быть использован для сопоставления набора символов в текстовой строке, поэтому они идеально подходят для валидации формы и используются для множества других целей в JavaScript. +Ещё одной полезной функцией валидации является атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern), который в виде значения принимает [Регулярное выражение](/ru/docs/Web/JavaScript/Guide/Regular_expressions). Регулярное выражение (regex) — это шаблон, который может быть использован для сопоставления набора символов в текстовой строке, поэтому они идеально подходят для валидации формы и используются для множества других целей в JavaScript. Регулярные выражения достаточно сложны, и мы не будем подробно рассматривать эту тему в данной статье. Ниже приведены несколько примеров, чтобы дать вам представление о том, как они работают. @@ -152,7 +156,7 @@ input:valid { - `a|b` — Соответствует символу `a` или `b`. - `abc|xyz` — Соответствует в точности `abc` или в точности `xyz` (но не `abcxyz` или `a` или `y`, и так далее). -Есть еще много возможностей, которые мы не упомянули. Полный список со множеством примеров можно найти в документации по [Регулярным выражениям](/ru/docs/Web/JavaScript/Guide/Regular_Expressions) +Есть еще много возможностей, которые мы не упомянули. Полный список со множеством примеров можно найти в документации по [Регулярным выражениям](/ru/docs/Web/JavaScript/Guide/Regular_expressions) Давайте рассмотрим пример. Добавьте в атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern) следующий шаблон: @@ -178,7 +182,8 @@ input:valid { {{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}} -> **Примечание:** Рабочий пример можно найти на GitHub по адресу [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html).) +> [!NOTE] +> Рабочий пример можно найти на GitHub по адресу [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html).) В этом примере элемент {{HTMLElement("input")}} принимает одно из четырёх возможных значений: строку "banana", "Banana", "cherry", или "Cherry". Регулярные выражения чувствительны к регистру, но с помощью шаблона "Aa", вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы. @@ -186,9 +191,11 @@ input:valid { Если не пустое значение элемента {{HTMLElement("input")}} не соответствует шаблону регулярного выражения, `input` будет соответствовать псевдоклассу {{cssxref(':invalid')}}. -> **Примечание:** Некоторым типам элементов {{HTMLElement("input")}} для валидации с помощью регулярного выражения не требуется атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern). Например, поле с типом `email` валидирует значение по шаблону одного email-адреса или, если присутствует атрибут [`multiple`](/ru/docs/Web/HTML/Attributes/multiple), шаблону списка email-адресов, разделённых запятыми. +> [!NOTE] +> Некоторым типам элементов {{HTMLElement("input")}} для валидации с помощью регулярного выражения не требуется атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern). Например, поле с типом `email` валидирует значение по шаблону одного email-адреса или, если присутствует атрибут [`multiple`](/ru/docs/Web/HTML/Attributes/multiple), шаблону списка email-адресов, разделённых запятыми. -> **Примечание:** Элемент {{HTMLElement("textarea")}} не поддерживает атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern). +> [!NOTE] +> Элемент {{HTMLElement("textarea")}} не поддерживает атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern). ### Ограничение длины вводимых значений @@ -247,7 +254,8 @@ div { {{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}} -> **Примечание:** Рабочий пример можно найти на GitHub по адресу [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html).) +> [!NOTE] +> Рабочий пример можно найти на GitHub по адресу [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html).) > **Примечание:** `` (и другие типы, такие как `range` и `date`) могут также принимать атрибут [`step`](/ru/docs/Web/HTML/Attributes/step), который задаёт шаг увеличения или уменьшения значения при использовании кнопок вверх и вниз. В примере выше мы явно не указывали атрибут `step`, поэтому он получает значение по умолчанию, равное `1`. Это значит, что дробные числа, такие как 3.2, будут не валидными. @@ -339,9 +347,10 @@ input:focus:invalid { {{EmbedLiveSample("Full_example", "100%", 420)}} -В статье [Атрибуты валидации](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation#validation-related_attributes) можно найти полный список атрибутов, которые можно использовать для ограничения допустимых значений ввода и типов полей `input`, которые их поддерживают. +В статье [Атрибуты валидации](/ru/docs/Web/HTML/Constraint_validation#validation-related_attributes) можно найти полный список атрибутов, которые можно использовать для ограничения допустимых значений ввода и типов полей `input`, которые их поддерживают. -> **Примечание:** Рабочий пример можно найти на GitHub по адресу [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html).) +> [!NOTE] +> Рабочий пример можно найти на GitHub по адресу [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html).) ## Валидация форм с помощью JavaScript @@ -349,7 +358,7 @@ input:focus:invalid { ### Constraint Validation API -Большинство браузеров поддерживают [Constraint Validation API](/ru/docs/Web/API/Constraint_validation), который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм: +Большинство браузеров поддерживают [Constraint Validation API](/ru/docs/Learn/Forms/Form_validation), который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм: - [`HTMLButtonElement`](/ru/docs/Web/API/HTMLButtonElement) (представляет элемент [`