diff options
| author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
| commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
| tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/learn/forms | |
| parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
| download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip | |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/learn/forms')
8 files changed, 92 insertions, 92 deletions
diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.html index fcb841f313..4668beaac3 100644 --- a/files/ru/learn/forms/form_validation/index.html +++ b/files/ru/learn/forms/form_validation/index.html @@ -53,41 +53,41 @@ original_slug: Learn/HTML/Forms/Валидация_формы <ul> <li>"Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)</li> - <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделенные тире, за ними слеуют четыре цифры)</li> + <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделённые тире, за ними слеуют четыре цифры)</li> <li>"Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"somebody@example.com")</li> <li>"Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"</li> </ul> -<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет - оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> +<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохранёнными в базе данных; если нет - оно выдаёт вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> <p>Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:</p> <ul> <li><strong>Мы хотим получить нужные данные в нужном формате</strong> — наши приложения не будут работать должным образом, если данные нашего пользователя хранятся в неправильном формате, если они вводят неправильную информацию или вообще не передают информацию.</li> - <li><strong>Мы хотим защитить учетные записи наших пользователей</strong> — заставляя наших пользователей вводить защищенные пароли, это упрощает защиту информации об их учетной записи.</li> - <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищенными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> + <li><strong>Мы хотим защитить учётные записи наших пользователей</strong> — заставляя наших пользователей вводить защищённые пароли, это упрощает защиту информации об их учётной записи.</li> + <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищёнными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> </ul> <h3 id="Различные_типы_валидации_формы">Различные типы валидации формы</h3> -<p>Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:</p> +<p>Существует два разных типа проверки формы, с которыми вы столкнётесь в Интернете:</p> <ul> - <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как дает мгновенный ответ. Ее можно далее подразделить на: + <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как даёт мгновенный ответ. Её можно далее подразделить на: <ul> <li><strong>JavaScript</strong> проверка выполняется с использованием JavaScript. Полностью настраиваемая.</li> <li><strong>Встроенная проверка формы, </strong>используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.</li> </ul> </li> - <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдает ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> + <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдаёт ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> </ul> <p>В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.</p> <h2 id="Использование_встроенной_проверки_формы">Использование встроенной проверки формы</h2> -<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то еще, и шаблон, которому это должно соответствовать. Если введенные данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> +<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то ещё, и шаблон, которому это должно соответствовать. Если введённые данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> <p>Когда элемент валидный, следующие утверждения верны:</p> @@ -113,7 +113,7 @@ original_slug: Learn/HTML/Forms/Валидация_формы <p>В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки {{HTMLElement("input")}} элементов.</p> -<p>Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> +<p>Начнём с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> <pre class="notranslate"><form> <label for="choose">Would you prefer a banana or cherry?</label> @@ -132,7 +132,7 @@ input:valid { <p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p> -<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жестком диске.</p> +<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жёстком диске.</p> <h3 id="Требуемый_атрибут_required">Требуемый атрибут (required)</h3> @@ -146,7 +146,7 @@ input:valid { <button>Submit</button> </form></pre> -<p>Также обратите внимание на CSS, включенный в файл примера:</p> +<p>Также обратите внимание на CSS, включённый в файл примера:</p> <pre class="notranslate">input:invalid { border: 2px dashed red; @@ -160,7 +160,7 @@ input:valid { border: 2px solid black; }</pre> -<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая черная граница, когда он валидный. Попробуйте новое поведение в приведенном ниже примере:</p> +<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая чёрная граница, когда он валидный. Попробуйте новое поведение в приведённом ниже примере:</p> <p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> @@ -202,7 +202,7 @@ input:valid { <ul> <li><code>[Ll].*k</code> — Один символ L, в верхнем или нижнем регистре, за ним следует ни одного или несколько символов любого типа за которыми следует <code>k</code> в нижнем регистре.</li> <li><code>[A-Z][A-Za-z' -]+</code> — Один символ верхнего регистра, за которым следует один или несколько символов, которые представляют собой букву верхнего или нижнего регистра, тире, апостроф или пробел. Это можно использовать для проверки названия городов / городов англоязычных стран, которые должны начинаться с заглавной буквы, но не содержать других символов. Примеры из UK включая Manchester, Ashton-under-lyne, и Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придется сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> + <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придётся сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> </ul> <p>В любом случае, давайте реализуем пример - обновим ваш HTML, чтобы добавить атрибут шаблона, например:</p> @@ -230,7 +230,7 @@ input:valid { <p>На этом этапе попробуйте изменить значение внутри атрибута <code>pattern</code> чтобы сопоставить некоторые из примеров, которые вы видели ранее, и посмотрите, как это влияет на значения, которые вы можете ввести, чтобы сделать входное значение валидным. Попробуйте написать свои собственные, и посмотрите, как это работает! Попробуйте сделать их связанными с фруктами, где это возможно, поэтому ваши примеры имеют смысл!</p> <div class="note"> -<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введенное значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделенных запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве еще одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> +<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введённое значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделённых запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве ещё одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> </div> <div class="note"> @@ -263,7 +263,7 @@ input:valid { <ul> <li>Здесь вы увидите, что мы задали полю <code>text</code> <code>minlength</code> <code>maxlength</code> равную 6 — такая же длина, как banana и cherry. Ввод меньшего количества символов будет отображаться как невалидный, а вводить больше в большинстве браузеров невозможно.</li> - <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введенные вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> + <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введённые вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> </ul> <div class="hidden"> @@ -384,7 +384,7 @@ input:focus:invalid { <h3 id="Индивидуальные_сообщения_об_ошибках">Индивидуальные сообщения об ошибках</h3> -<p>Как видно из приведенных выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> +<p>Как видно из приведённых выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> <p>Эти автоматизированные сообщения имеют два недостатка:</p> @@ -447,7 +447,7 @@ email.addEventListener("input", function (event) { <h3 id="API_проверки_валидности_HTML5">API проверки валидности HTML5</h3> -<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надежным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> +<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надёжным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> <h4 id="Свойства_API_проверки_валидности">Свойства API проверки валидности</h4> @@ -571,7 +571,7 @@ email.addEventListener("input", function (event) { <h5 id="CSS">CSS</h5> -<p>Этот CSS задает стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> +<p>Этот CSS задаёт стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> <pre class="brush: css notranslate">/* Это просто, чтобы сделать пример более приятным */ body { @@ -659,7 +659,7 @@ form.addEventListener("submit", function (event) { // сообщение об ошибке. error.innerHTML = "I expect an e-mail, darling!"; error.className = "error active"; - // И мы предотвращаем отправку формы путем отмены события + // И мы предотвращаем отправку формы путём отмены события event.preventDefault(); } }, false);</pre> @@ -668,11 +668,11 @@ form.addEventListener("submit", function (event) { <p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> -<p>API ограничений валидации дает вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> +<p>API ограничений валидации даёт вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> <h3 id="Проверка_форм_без_встроенного_API">Проверка форм без встроенного API</h3> -<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все еще можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> +<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все ещё можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> <p>Чтобы проверить форму, вы должны задать себе несколько вопросов:</p> @@ -774,13 +774,13 @@ input:focus.invalid { <h5 id="JavaScript_2">JavaScript</h5> -<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжелой работы.</p> +<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжёлой работы.</p> <pre class="brush: js notranslate">// Существует меньше способов выбрать узел DOM с устаревшими браузерами var form = document.getElementsByTagName('form')[0]; var email = document.getElementById('mail'); -// Ниже приведен трюк для достижения следующего узла Element Element в DOM +// Ниже приведён трюк для достижения следующего узла Element Element в DOM // Это опасно, потому что вы можете легко построить бесконечный цикл. // В современных браузерах вам следует использовать элемент element.nextElementSibling var error = email; @@ -867,9 +867,9 @@ addEvent(form, "submit", function () { </li> </ul> -<h4 id="Удаленная_проверка">Удаленная проверка</h4> +<h4 id="Удалённая_проверка">Удалённая проверка</h4> -<p>В некоторых случаях может быть полезно выполнить некоторую удаленную проверку. Такая проверка необходима, когда данные, введенные пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> +<p>В некоторых случаях может быть полезно выполнить некоторую удалённую проверку. Такая проверка необходима, когда данные, введённые пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> <p>Выполнение такой проверки требует принятия нескольких мер предосторожности:</p> diff --git a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html b/files/ru/learn/forms/how_to_build_custom_form_controls/index.html index d3ac58ca0b..130f358cad 100644 --- a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ru/learn/forms/how_to_build_custom_form_controls/index.html @@ -15,7 +15,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p class="summary">Существует много случаев, когда возможностей <a href="/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">стандартных виджетов HTML форм</a> недостаточно. Если вы хотите <a href="/en-US/docs/Advanced_styling_for_HTML_forms">придать лучший вид</a> каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.</p> -<p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмем пример: переделка элемента {{HTMLElement("select")}} .</p> +<p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .</p> <div class="note"> <p><strong>Замечание:</strong> Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.</p> @@ -23,13 +23,13 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h2 id="Дизайн_структура_и_семантика">Дизайн, структура и семантика</h2> -<p>В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно четко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существующего виджета, состояния и реакции которого хорошо известны, так что вы сможете просто подражать им насколько это возможно.</p> +<p>В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно чётко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существующего виджета, состояния и реакции которого хорошо известны, так что вы сможете просто подражать им насколько это возможно.</p> <p>В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:</p> <p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> -<p>Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развернутое состояние (справа).</p> +<p>Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развёрнутое состояние (справа).</p> <p>С точки зрения реакций нужно чтобы наш виджет взаимодействовал как с мышью, так и с клавиатурой, так же как и стандартный виджет. Давайте сначала определим, как виджет приходит в каждое состояние:</p> @@ -51,10 +51,10 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <ul> <li>пользователь кликает на него</li> <li>пользователь нажимает клавишу Tab, и он получает фокус</li> - <li>виджет был в развернутом состоянии и пользователь кликает на виджет.</li> + <li>виджет был в развёрнутом состоянии и пользователь кликает на виджет.</li> </ul> </dd> - <dt>Виджет в развернутом состоянии:</dt> + <dt>Виджет в развёрнутом состоянии:</dt> <dd> <ul> <li>виджет в любом другом состоянии и пользователь кликает на него</li> @@ -68,7 +68,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <dt>Значение изменяется когда:</dt> <dd> <ul> - <li>пользователь кликает на один-из-вариантов когда виджет в развернутом состоянии</li> + <li>пользователь кликает на один-из-вариантов когда виджет в развёрнутом состоянии</li> <li>пользователь нажимает клавиши стрелка вверх или вниз когда виджет в активном состоянии</li> </ul> </dd> @@ -81,11 +81,11 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <li>когда курсор мыши находится над вариантом, он подсвечен и ранее подсвеченный вариант возвращается в его обычное состояние</li> </ul> -<p>Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдет если пользователь нажмет клавишу "tab" когда виджет в развернутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.</p> +<p>Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдёт если пользователь нажмёт клавишу "tab" когда виджет в развёрнутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.</p> -<p>Другой забавный пример: что произойдет, если пользователь нажмет клавишу вверх или вниз когда виджет находится в развернутом состоянии? Это немного сложнее. Если вы предположите, что активное и развернутое состояние полностью различны, то ответом снова будет "ничего не произойдет" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развернутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развернутом состоянии (мы определили только то, что произойдет, когда виджет развернется, но ничего более).</p> +<p>Другой забавный пример: что произойдёт, если пользователь нажмёт клавишу вверх или вниз когда виджет находится в развёрнутом состоянии? Это немного сложнее. Если вы предположите, что активное и развёрнутое состояние полностью различны, то ответом снова будет "ничего не произойдёт" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развёрнутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развёрнутом состоянии (мы определили только то, что произойдёт, когда виджет развернётся, но ничего более).</p> -<p>В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять ее, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет, не стесняйтесь <a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">выполнять пользовательские тесты</a>. Этот процесс называется UX Design (<a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC">Дизайн взаимодействия с пользователем</a>). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:</p> +<p>В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять её, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет, не стесняйтесь <a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">выполнять пользовательские тесты</a>. Этот процесс называется UX Design (<a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC">Дизайн взаимодействия с пользователем</a>). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:</p> <ul> <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> @@ -99,7 +99,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h3 id="Определение_структуры_и_семантики_HTML">Определение структуры и семантики HTML</h3> -<p>Теперь, когда основной функционал виджета определен, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:</p> +<p>Теперь, когда основной функционал виджета определён, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:</p> <pre class="brush: html"><!-- Это основной контейнер для нашего виджета. Атрибут tabindex позволяет пользователю переместить фокус на виджет. @@ -123,7 +123,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets </div></pre> -<p>Обратите внимание на использование имен классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придется жестко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.</p> +<p>Обратите внимание на использование имён классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придётся жёстко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.</p> <h3 id="Создание_внешнего_вида_с_помощью_CSS">Создание внешнего вида с помощью CSS</h3> @@ -131,7 +131,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h4 id="Обязательные_стили">Обязательные стили</h4> -<p>Обязательные стили - это те, которые необходимы для обработки трех состояний нашего виджета..</p> +<p>Обязательные стили - это те, которые необходимы для обработки трёх состояний нашего виджета..</p> <pre class="brush: css">.select { /* Это создаст контекст позиционирования для списка вариантов */ @@ -142,7 +142,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets display : inline-block; }</pre> -<p>Еще нам нужен дополнительный класс <code>active,</code> чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль еще и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.</p> +<p>Ещё нам нужен дополнительный класс <code>active,</code> чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль ещё и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.</p> <pre class="brush: css">.select .active, .select:focus { @@ -155,7 +155,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>Теперь давайте стилизуем список опций:</p> -<pre class="brush: css">/* Селектор .select здесь применен для удобства (<a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B0%D1%85%D0%B0%D1%80">синтаксический сахар</a>), чтобы быть уверенными, +<pre class="brush: css">/* Селектор .select здесь применён для удобства (<a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B0%D1%85%D0%B0%D1%80">синтаксический сахар</a>), чтобы быть уверенными, что определяемые классы находятся в нашем виджете. */ .select .optList { /* Это позволит нам быть уверенными, что список вариантов будет показан ниже значения @@ -165,11 +165,11 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets left : 0; }</pre> -<p>Еще нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развернутого состояния, т.к. они не совсем совпадают.</p> +<p>Ещё нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развёрнутого состояния, т.к. они не совсем совпадают.</p> <pre class="brush: css">.select .optList.hidden { /* Это самый простой из доступных способов путь скрыть список, - а о доступности мы еще поговорим в конце */ + а о доступности мы ещё поговорим в конце */ max-height: 0; visibility: hidden; }</pre> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <pre class="brush: css">.select { /* Все размеры будут выражены в em по соображениям удобства (чтобы быть уверенными, что виджет будет изменять размер если пользователь будет - использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчета что + использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчёта что 1em == 16px что является умолчанием для большинства браузеров. Если вы затрудняетесь с преобразованием px в em, попробуйте http://riddle.pl/emcalc/ */ font-size : 0.625em; /* это (10px) новый размер шрифта для нашего контекста для значения @@ -200,7 +200,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ /* Первое объявление - для браузеров не поддерживающих линейный градиент. - Второе объявление - потому что основанные на WebKit браузеры еще не избавились от префикса в нем. + Второе объявление - потому что основанные на WebKit браузеры ещё не избавились от префикса в нем. Если вам нужна поддержка устаревших браузеров, попробуйте http://www.colorzilla.com/gradient-editor/ */ background : #F0F0F0; background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); @@ -263,8 +263,8 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets min-width : 100%; /* В случае, если список слишком длинный, его содержимое не будет помещаться по вертикали - (что автоматически добавит полосу прокрутки), но этого никогда не произойдет по горизонтали - (потому что мы не установили ширину и содержимое списка будет регулировать ее + (что автоматически добавит полосу прокрутки), но этого никогда не произойдёт по горизонтали + (потому что мы не установили ширину и содержимое списка будет регулировать её автоматически. Если это будет невозможно - содержимое будет обрезано.) */ max-height: 10em; /* 100px */ overflow-y: auto; @@ -296,7 +296,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <tr> <th scope="col" style="text-align: center;">Основное состояние</th> <th scope="col" style="text-align: center;">Активное состояние</th> - <th scope="col" style="text-align: center;">Развернутое состояние</th> + <th scope="col" style="text-align: center;">Развёрнутое состояние</th> </tr> </thead> <tbody> @@ -325,18 +325,18 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h3 id="Почему_он_не_работает">Почему он не работает?</h3> -<p>Прежде чем мы начнем, запомните одну важную вещь о JavaScript: в браузере <strong>это ненадежная технология</strong>. Когда вы создаете пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:</p> +<p>Прежде чем мы начнём, запомните одну важную вещь о JavaScript: в браузере <strong>это ненадёжная технология</strong>. Когда вы создаёте пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:</p> <ul> <li>Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.</li> - <li>Скрипт не загружается. Это один из самых распространенных случаев, особенно в мобильном мире, где сеть не очень надежная.</li> + <li>Скрипт не загружается. Это один из самых распространённых случаев, особенно в мобильном мире, где сеть не очень надежная.</li> <li>Скрипт глючит.Вы должны всегда учитывать эту возможность.</li> <li>Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.</li> <li>Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> в Firefox, или расширение <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> в Chrome).</li> <li>Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.</li> </ul> -<p>Из-за этого очень важно серьезно подумать о том, что произойдет, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p> +<p>Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p> <p>В нашем примере, если наш JavaScript код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.</p> @@ -372,7 +372,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets .no-widget .select { /* Этот CSS селектор значит: - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}} - - или мы не меняем класс body, тогда класс body остается в значении "no-widget", + - или мы не меняем класс body, тогда класс body остаётся в значении "no-widget", и элементы, чей класс "select" будут скрыты */ position : absolute; left : -5000em; @@ -411,7 +411,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h3 id="Облегчение_работы">Облегчение работы</h3> -<p>В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все еще есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).</p> +<p>В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все ещё есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).</p> <p>Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a>).</p> @@ -424,7 +424,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li> </ol> -<p>Помимо доступности этих специфических функций, остается еще одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Это важно потому, что объекты <code>Array</code> поддерживают функцию <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на <code>Array</code> и нам очень удобно использовать <code>forEach</code>, мы можем просто добавить <code>forEach</code> к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:</p> +<p>Помимо доступности этих специфических функций, остаётся ещё одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Это важно потому, что объекты <code>Array</code> поддерживают функцию <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на <code>Array</code> и нам очень удобно использовать <code>forEach</code>, мы можем просто добавить <code>forEach</code> к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:</p> <pre class="brush: js">NodeList.prototype.forEach = function (callback) { Array.prototype.forEach.call(this, callback); @@ -437,7 +437,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.</p> <pre class="brush: js">// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован -// Ей передается один параметр +// Ей передаётся один параметр // select : DOM нода класса `select` который должен быть деактивирован function deactivateSelect(select) { @@ -465,7 +465,7 @@ function activeSelect(select, selectList) { // Нам нужно отключить активное состояние всех наших виджетов // Так как функция deactivateSelect соответствует всем требованиям - // функции forEach мы вызываем ее без использования промежуточной анонимной функции + // функции forEach мы вызываем её без использования промежуточной анонимной функции selectList.forEach(deactivateSelect); // А теперь мы возвращаем активное состояние нужного виджета @@ -473,7 +473,7 @@ function activeSelect(select, selectList) { } // Эта функция будет вызываться каждый раз, когда пользователь будет открывать/закрывать список вариантов -// Ей передается один параметр: +// Ей передаётся один параметр: // select : DOM нода со списком для переключения состояния function toggleOptList(select) { @@ -556,7 +556,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберемся дальше.</p> +<p>В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберёмся дальше.</p> <table> <thead> @@ -582,8 +582,8 @@ window.addEventListener('load', function () { <p>Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственным виджетом:</p> -<pre class="brush: js">// Эта функция обновляет отображенное значение и синхронизирует его со стандартным виджетом -// Ей передается два параметра: +<pre class="brush: js">// Эта функция обновляет отображённое значение и синхронизирует его со стандартным виджетом +// Ей передаётся два параметра: // select : DOM нода класса `select` содержащая значение которое будет обновлено // index : индекс выбранного значения function updateValue(select, index) { @@ -608,7 +608,7 @@ function updateValue(select, index) { }; // Эта функция возвращает текущий номер выбранного элемента в стандартном виджете -// Ей передается один параметр: +// Ей передаётся один параметр: // select : DOM нода класса `select` соответствующая стандартному виджету function getIndex(select) { // Нам нужно получить доступ к стандартному виджету соответствующему данному @@ -663,7 +663,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>В приведенном выше коде стоить отметить свойство <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.</p> +<p>В приведённом выше коде стоить отметить свойство <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.</p> <p>С этим мы закончили! Вот результат:</p> @@ -689,7 +689,7 @@ window.addEventListener('load', function () { <p>Мы создали нечто работающее, и, хотя это далеко от полнофункционального выпадающего списка, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглядит как раскрывающейся список, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это он и есть. Короче говоря, этот хорошенький список для выбора фруктов не является доступным для людей с ограниченными возможностями!</p> -<p>К счастью существует решение, и оно называется <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C спецификацию</a> специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретенный элемент выглядит как будто он был тем стандартным, за которого он себя выдает. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.</p> +<p>К счастью существует решение, и оно называется <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C спецификацию</a> специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретённый элемент выглядит как будто он был тем стандартным, за которого он себя выдаёт. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.</p> <h3 id="Атрибут_role">Атрибут <code>role</code></h3> diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.html index 501767be92..378a004392 100644 --- a/files/ru/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.html @@ -86,9 +86,9 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> -<p>При правильно связанном элементе <code><label></code> с элементом <code><input></code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтет вслух что-то наподобие "Name, edit text".</p> +<p>При правильно связанном элементе <code><label></code> с элементом <code><input></code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие "Name, edit text".</p> -<p>Если <code><label></code> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несет в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.</p> +<p>Если <code><label></code> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.</p> <p>Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:</p> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <h3 id="Лейблы_тоже_кликабельны!">Лейблы тоже кликабельны!</h3> -<p>Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать ее как можно больше.</p> +<p>Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.</p> <p>Например:</p> @@ -151,7 +151,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>{{EmbedLiveSample("Multiple_labels", 120, 120)}}</p> -<p>Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдет требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.</p> +<p>Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.</p> <ul> <li>В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь "edit text blank" и отдельно читаемые тексты-подсказки. Множественные элементы <code><label></code> могут быть неправильно интерпретированы программой чтения с экрана.</li> @@ -160,7 +160,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form </ul> <div class="note"> -<p><strong>Примечание</strong>: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведет себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.</p> +<p><strong>Примечание</strong>: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.</p> </div> <div class="note"> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <h3 id="Активное_обучение_построение_структуры_формы">Активное обучение: построение структуры формы</h3> -<p>Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Основные нативные элементы управления формами</a>). А пока внимательно прочитайте описание, следуя приведенным ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.</p> +<p>Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Основные нативные элементы управления формами</a>). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.</p> <ol> <li>Для начала сделайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">пустого шаблона</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS для нашей платёжной формы</a> в новой директории на вашем компьютере.</li> diff --git a/files/ru/learn/forms/index.html b/files/ru/learn/forms/index.html index 3addc9a37b..a00c6f97d3 100644 --- a/files/ru/learn/forms/index.html +++ b/files/ru/learn/forms/index.html @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Forms <dl> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML-форма</a></dt> - <dd>Первая статья в серии дает вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd> + <dd>Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></dt> <dd>Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.</dd> </dl> @@ -46,7 +46,7 @@ original_slug: Learn/HTML/Forms <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных форм </a></dt> <dd>Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Валидация данных форм</a></dt> - <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введенные пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd> + <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd> </dl> <h2 id="Продвинутые_руководства"> Продвинутые руководства</h2> diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html index 60e5fce7c0..96797fe6b6 100644 --- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html @@ -60,12 +60,12 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <pre class="brush: html notranslate"><form action="#"></pre> <div class="note"> -<p><strong>Заметка:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищенной странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> +<p><strong>Заметка:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> </div> <h4 id="Атрибут_htmlattrxrefmethodform">Атрибут {{htmlattrxref("method","form")}}</h4> -<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространенными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> +<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> <p>Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.</p> @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>Поскольку используется метод <code>GET</code>, вы увидите URL <code>www.foo.com/?say=Hi&to=Mom</code>, который появится в адресной строке браузера при отправке формы.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаем две части данных на сервер:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаём две части данных на сервер:</p> <ul> <li><code>say</code>, со значением <code>Hi</code></li> @@ -171,7 +171,7 @@ say=Hi&to=Mom</pre> <h4 id="Пример_Чистый_PHP">Пример: Чистый PHP</h4> -<p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведенном ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.</p> +<p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.</p> <pre class="brush: php notranslate"><?php // The global $_POST variable allows you to access the data sent with the POST method by name @@ -217,7 +217,7 @@ if __name__ == "__main__": </ul> <div class="note"> -<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своем браузере.</p> +<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своём браузере.</p> </div> <h4 id="Другие_языки_и_фреймворки">Другие языки и фреймворки</h4> @@ -232,7 +232,7 @@ if __name__ == "__main__": <li><a href="https://phoenixframework.org/">Phoenix</a> для Elixir</li> </ul> -<p>Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичный функционал с нуля, и это определенно сэкономит время. </p> +<p>Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичный функционал с нуля, и это определённо сэкономит время. </p> <div class="note"> <p><strong>Примечание</strong>: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом. </p> @@ -244,7 +244,7 @@ if __name__ == "__main__": <h3 id="Атрибут_htmlattrxrefenctypeform">Атрибут {{htmlattrxref("enctype","form")}} </h3> -<p>Этот атрибут позволяет конкретизировать значение в <code>Content-Type</code> HTTP заголовок, включенный в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: <code>application/x-www-form-urlencoded</code>. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."</p> +<p>Этот атрибут позволяет конкретизировать значение в <code>Content-Type</code> HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: <code>application/x-www-form-urlencoded</code>. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."</p> <p>Если хотите отправить файл, нужно сделать следующие три шага:</p> @@ -276,17 +276,17 @@ if __name__ == "__main__": <h2 id="Проблемы_безопасности">Проблемы безопасности</h2> -<p>Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространенными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.</p> +<p>Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.</p> <p>В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:</p> <h3 id="XSS_Межсайтовый_скриптинг_и_CSRF_Подделка_межсайтовых_запросов">XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"</h3> -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> и <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> - это распространенные типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.</p> +<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> и <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> - это распространённые типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.</p> <p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">Подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же <a href="/ru/docs/Web/Security/Same-origin_policy">политика происхождения</a>. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.</p> -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF-атаки</a> аналогичны <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS-атакам</a> в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадежному пользователю). Атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS </a>используют доверие пользователя к веб-сайту, в то время как атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>используют доверие веб-сайта к пользователю.</p> +<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF-атаки</a> аналогичны <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS-атакам</a> в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS </a>используют доверие пользователя к веб-сайту, в то время как атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>используют доверие веб-сайта к пользователю.</p> <p>Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML {{HTMLElement ("script")}}, {{HTMLElement ("iframe")}} и {{HTMLElement ("object")}} полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.</p> @@ -294,11 +294,11 @@ if __name__ == "__main__": <p>SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external">одним из самых направленных атак на веб-сайты</a>.</p> -<p>Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счет повышения привилегий. Это очень серьезная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью <code><a href="http://us1.php.net/manual/en/mysqli.real-escape-string.php">mysqli_real_escape_string()</a></code>.</p> +<p>Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счёт повышения привилегий. Это очень серьёзная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью <code><a href="http://us1.php.net/manual/en/mysqli.real-escape-string.php">mysqli_real_escape_string()</a></code>.</p> <h3 id="Вброс_HTTP-заголовка_и_email">Вброс HTTP-заголовка и email</h3> -<p>Эти виды атак могут проявляться, когда ваше приложение создает заголовки HTTP или электронные почтовые адреса на основании данных, введенных пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.</p> +<p>Эти виды атак могут проявляться, когда ваше приложение создаёт заголовки HTTP или электронные почтовые адреса на основании данных, введённых пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.</p> <p>Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal">зомби</a>.</p> @@ -314,7 +314,7 @@ if __name__ == "__main__": <li>Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к фалам только через отдельный поддомен или даже через совершенно другое доменное имя).</li> </ul> -<p>Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищенности, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.</p> +<p>Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищённости, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.</p> <div class="note"> <p><strong>Примечание</strong>: В статье <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a> нашего раздела <a href="/en-US/docs/Learn/Server-side">серверного</a> обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.</p> @@ -341,7 +341,7 @@ if __name__ == "__main__": <ul> <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML-форма</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Предопределенные виджеты</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Предопределённые виджеты</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Валидация данных формы</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать кастомные виджеты</a></li> diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.html b/files/ru/learn/forms/sending_forms_through_javascript/index.html index 6a949fd237..b9c76e7ef7 100644 --- a/files/ru/learn/forms/sending_forms_through_javascript/index.html +++ b/files/ru/learn/forms/sending_forms_through_javascript/index.html @@ -14,18 +14,18 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript <h3 id="Получение_контроля_над_глобальным_интерфейсом">Получение контроля над глобальным интерфейсом</h3> -<p>Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счет предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).</p> +<p>Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).</p> -<p>Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берет контроль и асинхронно передает данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.</p> +<p>Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берет контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.</p> <p>Асинхронная отправка произвольных данных обычно называется <a href="/en-US/docs/AJAX">AJAX</a>, что означает <strong>"Asynchronous JavaScript And XML" </strong>(Асинхронный JavaScript и XML).</p> <h3 id="Чем_он_отличается">Чем он отличается?</h3> -<p>Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки <a href="/en-US/docs/XML">XML</a> в качестве формата обмена, который со временем был заменен на <a href="/en-US/docs/JSON">JSON</a>. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (<code>application/x-www-form-urlencoded</code>) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в <code>multipart/form-data</code>.</p> +<p>Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки <a href="/en-US/docs/XML">XML</a> в качестве формата обмена, который со временем был заменён на <a href="/en-US/docs/JSON">JSON</a>. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (<code>application/x-www-form-urlencoded</code>) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в <code>multipart/form-data</code>.</p> <div class="blockIndicator note"> -<p><strong>Замечание</strong>: Сейчас <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> часто используется вместо XHR — это современная, обновленная версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.</p> +<p><strong>Замечание</strong>: Сейчас <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.</p> </div> <p>Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.</p> @@ -48,7 +48,7 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript <h3 id="Создание_XMLHttpRequest_вручную">Создание XMLHttpRequest вручную</h3> -<p>{{domxref("XMLHttpRequest")}} это самый безопасный и надежный способ создавать HTTP-запросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.</p> +<p>{{domxref("XMLHttpRequest")}} это самый безопасный и надёжный способ создавать HTTP-запросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.</p> <p>Посмотрите на пример:</p> diff --git a/files/ru/learn/forms/styling_web_forms/index.html b/files/ru/learn/forms/styling_web_forms/index.html index f818654906..8dcaf1c08d 100644 --- a/files/ru/learn/forms/styling_web_forms/index.html +++ b/files/ru/learn/forms/styling_web_forms/index.html @@ -14,7 +14,7 @@ original_slug: Learn/HTML/Forms/Styling_HTML_forms <p>Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.</p> -<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все еще чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p> +<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p> <p>Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации <a href="/en-US/docs/HTML/Forms">HTML форм</a>.</p> @@ -37,7 +37,7 @@ original_slug: Learn/HTML/Forms/Styling_HTML_forms <h4 id="Плохая">Плохая</h4> -<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углубленных знаний CSS3.</p> +<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.</p> <p>Они включают в себя элемент {{HTMLElement ("legend")}}, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент {{htmlattrxref ("placeholder", "input")}} не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.</p> diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html index 1a0a82e00c..c6dfa3b2b7 100644 --- a/files/ru/learn/forms/your_first_form/index.html +++ b/files/ru/learn/forms/your_first_form/index.html @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p><strong>Веб-формы</strong> — их также часто называют <strong>HTML-формы</strong> — состоят из одного или нескольких <strong>элементов управления форм</strong> (иногда их также называют <strong>виджетами</strong>) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент {{htmlelement("input")}}, однако есть и другие элементы, о которых тоже стоит узнать.</p> -<p>В элементах управления форм можно задать правила, указывающие на определенный формат данных или значений, которые могут быть введены (<strong>валидация форм</strong>), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.</p> +<p>В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (<strong>валидация форм</strong>), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.</p> <h2 id="Проектирование_формы">Проектирование формы</h2> @@ -116,7 +116,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <ul> <li>В нашем простом примере мы используем {{HTMLelement("input/text")}} для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.</li> - <li>Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введенные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы" title="/en-US/docs/HTML/Forms/Data_form_validation">Валидация формы</a>.</li> + <li>Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введённые пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы" title="/en-US/docs/HTML/Forms/Data_form_validation">Валидация формы</a>.</li> </ul> <p>Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <code><input></code> и <code><textarea></textarea></code>. Это одна из странностей HTML. Тег <code><input></code> — это пустой элемент, то есть он не нуждается в закрывающем теге. {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут <code>value</code> следующим образом:</p> |