diff options
Diffstat (limited to 'files/ru/web/html/element/input/radio/index.html')
| -rw-r--r-- | files/ru/web/html/element/input/radio/index.html | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index 00cf8262fe..68a9ca03a5 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -69,7 +69,7 @@ translation_of: Web/HTML/Element/input/radio <p>Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута <code>name</code>.</p> -<p>Например, если в Вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с <strong>name= <code>"contact"</code> , </strong>но с разными<strong> value = </strong><code>"email"</code>, <strong>value =</strong><code>"phone"</code> и <strong>value =</strong> <code>"mail"</code> соответственно. Пользователь не видит атрибуты <code>name</code> и <code>value</code> (если только Вы не добавляете код для их отображения).</p> +<p>Например, если в вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с <strong>name= <code>"contact"</code> , </strong>но с разными<strong> value = </strong><code>"email"</code>, <strong>value =</strong><code>"phone"</code> и <strong>value =</strong> <code>"mail"</code> соответственно. Пользователь не видит атрибуты <code>name</code> и <code>value</code> (если только вы не добавляете код для их отображения).</p> <p>HTML будет выглядеть следующим образом:</p> @@ -93,7 +93,7 @@ translation_of: Web/HTML/Element/input/radio </div> </form></pre> -<p>Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут <code>name</code> со значением <code>"contact"</code> и уникальный атрибут <code>value</code>, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный {{domxref("Element.id", "id")}}, связанный с тегом {{HTMLElement("label")}} через атрибут {{htmlattrxref("for", "label")}} для установления связи между конкретной меткой и конкретной радиокнопкой. </p> +<p>Здесь вы видите три радиокнопки, каждая из которых имеет атрибут <code>name</code> со значением <code>"contact"</code> и уникальный атрибут <code>value</code>, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный {{domxref("Element.id", "id")}}, связанный с тегом {{HTMLElement("label")}} через атрибут {{htmlattrxref("for", "label")}} для установления связи между конкретной меткой и конкретной радиокнопкой. </p> <p>Вы можете опробовать этот код здесь: </p> @@ -103,7 +103,7 @@ translation_of: Web/HTML/Element/input/radio <p>Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде <strong>"contact=name".</strong> Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку <code>"contact=phone"</code>.</p> -<p>Если Вы пренебрежёте атрибутом <code>value</code> в Вашем HTML, то отправленные данные просто присвоят данной группе значение <code>"on"</code>. То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как <code>"contact=on"</code> и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут <code>value</code>!</p> +<p>Если вы пренебрежёте атрибутом <code>value</code> в вашем HTML, то отправленные данные просто присвоят данной группе значение <code>"on"</code>. То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как <code>"contact=on"</code> и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут <code>value</code>!</p> <div class="note"> <p><strong>Примечание</strong>: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.</p> @@ -155,11 +155,11 @@ form.addEventListener("submit", function(event) { <h2 id="Использование_радиокнопок">Использование радиокнопок</h2> -<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.</p> +<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.</p> <h3 id="Выбор_радиокнопки_по_умолчанию">Выбор радиокнопки по умолчанию</h3> -<p>Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p> +<p>Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p> <pre class="brush: html notranslate"><form> <p>Please select your preferred contact method:</p> @@ -186,12 +186,12 @@ form.addEventListener("submit", function(event) { <p>В данном случае первая радиокнопка будет выбрана по умолчанию.</p> <div class="note"> -<p><strong>Примечание</strong>: Если Вы устанавливаете атрибут <code>checked</code> более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут <code>checked</code> отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом <code>checked</code>. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.</p> +<p><strong>Примечание</strong>: Если вы устанавливаете атрибут <code>checked</code> более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут <code>checked</code> отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом <code>checked</code>. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.</p> </div> <h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3> -<p>В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент {{htmlelement("label")}}, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов <code><label></code> в Ваших формах.</p> +<p>В примерах, представленных выше, вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент {{htmlelement("label")}}, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов <code><label></code> в ваших формах.</p> <h2 id="Валидация_формы">Валидация формы</h2> @@ -287,13 +287,13 @@ button:active { outline: 1px solid black; }</pre> -<p>Самым примечательным здесь является использование свойства {{cssxref("appearance")}} с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству <code>appearance</code> значение <code>none</code>, Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства {{cssxref("border")}} и {{cssxref("border-radius")}}, а также свойство {{cssxref("transition")}} для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс {{cssxref(":checked")}} используется для указания стилей внешнего вида кнопок при их выборе.</p> +<p>Самым примечательным здесь является использование свойства {{cssxref("appearance")}} с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству <code>appearance</code> значение <code>none</code>, вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства {{cssxref("border")}} и {{cssxref("border-radius")}}, а также свойство {{cssxref("transition")}} для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс {{cssxref(":checked")}} используется для указания стилей внешнего вида кнопок при их выборе.</p> -<p>Стоит иметь в виду, что свойство <code>appearance</code> неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере! </p> +<p>Стоит иметь в виду, что свойство <code>appearance</code> неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере! </p> <p>{{ EmbedLiveSample('Styling_radio_inputs', 600, 120) }}</p> -<p>Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.</p> +<p>Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.</p> <h2 id="Спецификации">Спецификации</h2> |