diff options
Diffstat (limited to 'files/ru/learn/forms')
| -rw-r--r-- | files/ru/learn/forms/form_validation/index.html | 2 | ||||
| -rw-r--r-- | files/ru/learn/forms/how_to_build_custom_form_controls/index.html | 18 | ||||
| -rw-r--r-- | files/ru/learn/forms/your_first_form/index.html | 4 |
3 files changed, 12 insertions, 12 deletions
diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.html index b63dac246d..7dbb62e15c 100644 --- a/files/ru/learn/forms/form_validation/index.html +++ b/files/ru/learn/forms/form_validation/index.html @@ -185,7 +185,7 @@ input:valid { <li><code>[abc]</code> — соответствует одному символу a, b, или c.</li> <li><code>[^abc]</code> — соответствует одному символу кроме a, b, или c.</li> <li><code>[a-z]</code> — соответствует одному символу в диапазоне a–z, только в нижнем регистре (вы можете использовать <code>[A-Za-z]</code> для заглавных и прописных букв, и<code>[A-Z]</code> только для заглавных букв).</li> - <li><code>a.c</code> — соответсвует <code>a</code>, за ним следует любой элемент, за ним следует <code>c</code>.</li> + <li><code>a.c</code> — соответствует <code>a</code>, за ним следует любой элемент, за ним следует <code>c</code>.</li> <li><code>a{5}</code> — соответствует <code>a</code>, 5 раз.</li> <li><code>a{5,7}</code> — соответствует <code>a</code>, от 5 до 7 раз, но не больше и не меньше.</li> </ul> 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 3cb9494d66..d3ac58ca0b 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 @@ -169,7 +169,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <pre class="brush: css">.select .optList.hidden { /* Это самый простой из доступных способов путь скрыть список, - а о доступности мы еще поговрим в конце */ + а о доступности мы еще поговорим в конце */ max-height: 0; visibility: hidden; }</pre> @@ -199,7 +199,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets border-radius : .4em; /* 4px */ box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ - /* Первое объявление - для бразуеров не поддерживающих линейный градиент. + /* Первое объявление - для браузеров не поддерживающих линейный градиент. Второе объявление - потому что основанные на WebKit браузеры еще не избавились от префикса в нем. Если вам нужна поддержка устаревших браузеров, попробуйте http://www.colorzilla.com/gradient-editor/ */ background : #F0F0F0; @@ -454,7 +454,7 @@ function deactivateSelect(select) { select.classList.remove('active'); } -// Эта функция бедт вызываться какждый раз, когда пользователь захочет (де)активровать наш виджет +// Эта функция будет вызываться каждый раз, когда пользователь захочет (де)активировать наш виджет // Ей передаются два параметра: // select : DOM нода класса `select` для активации // selectList : список всех DOM нод с классом `select` @@ -525,7 +525,7 @@ window.addEventListener('load', function () { }); }); - // Когда позоватль кликает на наш виджет + // Когда пользователь кликает на наш виджет select.addEventListener('click', function (event) { // Замечание: использование переменной `select` // ограничено рамками нашей функции. @@ -609,7 +609,7 @@ function updateValue(select, index) { // Эта функция возвращает текущий номер выбранного элемента в стандартном виджете // Ей передается один параметр: -// select : DOM нода класса `select` соответствующая стандарному виджету +// select : DOM нода класса `select` соответствующая стандартному виджету function getIndex(select) { // Нам нужно получить доступ к стандартному виджету соответствующему данному // пользовательскому виджету @@ -625,7 +625,7 @@ function getIndex(select) { window.addEventListener('load', function () { var selectList = document.querySelectorAll('.select'); - // Каждый пользовательский виджет необходимсо инциализировать: + // Каждый пользовательский виджет необходимо инициализировать: selectList.forEach(function (select) { var optionList = select.querySelectorAll('.option'), selectedIndex = getIndex(select); @@ -639,14 +639,14 @@ window.addEventListener('load', function () { // Убеждаемся, что выбранное по умолчанию значение корректно отображено updateValue(select, selectedIndex); - // Кажды раз когда пользователь кликает на вариант, мы соответсвенно обновляем значение + // Каждый раз, когда пользователь кликает на вариант, мы соответственно обновляем значение optionList.forEach(function (option, index) { option.addEventListener('click', function (event) { updateValue(select, index); }); }); - // Когда виджет находится в фокусе, с каждым нажатием на клаиатуре, мы соответственно + // Когда виджет находится в фокусе, при каждом нажатии клавиши на клавиатуре, мы соответственно // обновляем значение select.addEventListener('keyup', function (event) { var length = optionList.length, @@ -687,7 +687,7 @@ window.addEventListener('load', function () { <h2 id="Делаем_доступным">Делаем доступным</h2> -<p>Мы создали нечто работающее, и, хотя это далеко от полнофункционального селектбокса, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглядит как селектбокс, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это селектбокс. Короче говоря, этот хорошенький селектбокс не является доступным для людей с ограниченными возможностями!</p> +<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> diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html index fd3f925e43..5acaaa7d8e 100644 --- a/files/ru/learn/forms/your_first_form/index.html +++ b/files/ru/learn/forms/your_first_form/index.html @@ -217,7 +217,7 @@ textarea:focus { } textarea { - /* Выровним многострочные текстовые поля с их текстами-подсказками */ + /* Выравним многострочные текстовые поля с их текстами-подсказками */ vertical-align: top; /* Предоставим пространство для ввода текста */ @@ -225,7 +225,7 @@ textarea { } .button { - /* Выровним кнопки с их текстами-подсказками */ + /* Выравним кнопки с их текстами-подсказками */ padding-left: 90px; /* same size as the label elements */ } |