Html input radio: 🤷🏽‍♀️ Page not found | MDN Web Docs — Программирование на Python и Objective-C в Mac OS

Содержание

— HTML | MDN

Атрибут type тега <input> со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.

<input type="radio">

Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».

Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже.

Примечание: Чекбоксы похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют «включать» и «выключать» значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.

Атрибут value — это строка DOM, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.

Создание группы радиокнопок

Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута (name). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.

Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута name.

Например, если в вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с name= "contact" , но с разными value = "email", value ="phone" и value = "mail" соответственно. Пользователь не видит атрибуты name и value (если только вы не добавляете код для их отображения).

HTML будет выглядеть следующим образом:

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

Здесь вы видите три радиокнопки, каждая из которых имеет атрибут name со значением "contact" и уникальный атрибут value, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный id, связанный с тегом <label> через атрибут for для установления связи между конкретной меткой и конкретной радиокнопкой.

Вы можете опробовать этот код здесь:

Представление данных группы радиокнопок

Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде «contact=name». Например, если пользователь кликает на радиокнопку «Phone», а затем отправляет форму на сервер, данные формы будут включать в себя строку "contact=phone".

Если вы пренебрежёте атрибутом value в вашем HTML, то отправленные данные просто присвоят данной группе значение "on". То есть, если пользователь кликнет на радиокнопку «Phone» и отправит форму, итоговые данные отобразятся как "contact=on" и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут value!

Примечание: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.

Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута "checked". Смотрите здесь Selecting a radio button by default.

Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока <pre> для вывода данных формы.

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre>
</pre>

Затем добавим немного JavaScript. Установим обработчик события submit (en-US), которая будет отправляться при клике пользователя на кнопку «Отправить»:

var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);

Опробуйте этот пример и убедитесь, что для группы радиокнопок "contact" будет только один результат.

Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.

Выбор радиокнопки по умолчанию

Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут checked, как показано ниже в немного изменённой версии предыдущего примера.

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio"
     name="contact" value="email" checked>
    <label for="contactChoice1">Email</label>

    <input type="radio"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

В данном случае первая радиокнопка будет выбрана по умолчанию.

Примечание: Если вы устанавливаете атрибут checked более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут checked отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом checked. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.

Providing a bigger hit area for your radio buttons

В примерах, представленных выше, вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент <label>, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов <label> в ваших формах.

Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.

Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи, с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.

HTML будет выглядеть следующим образом:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio"
       name="contact" value="email" checked>
      <label for="contactChoice1">Email</label>

      <input type="radio"
       name="contact" value="phone">
      <label for="contactChoice2">Phone</label>

      <input type="radio"
       name="contact" value="mail">
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Здесь не так много нового, кроме дополнения в виде элементов <fieldset> и <legend>, которые позволяют сгруппировать элементы форм между собой функционально и семантически.

CSS будет выглядеть так:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

Самым примечательным здесь является использование свойства appearance с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству appearance значение none, вы можете отменить все «родные» настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства border и border-radius, а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс :checked используется для указания стилей внешнего вида кнопок при их выборе.

Стоит иметь в виду, что свойство appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере!

Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки «Submit» имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.

BCD tables only load in the browser

Переключатели | htmlbook.ru

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант
из нескольких предложенных. Создаются следующим образом.

<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей
Атрибут	Описание
checked	Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name	Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value	Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

Заметьте, что в данном примере значение атрибута name для
всех переключателей одинаково, именно в таком случае браузер понимает, что
переключатели связаны между собой и помечает только один пункт из предложенных.
Значение атрибута value же должно различаться,
чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Атрибут checked | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок
или переключатель. В случае использования переключателей (radiobutton), может
быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить
хоть все элементы.

Синтаксис

HTML	`<input type="radio" checked> <input type="checkbox" checked>`
XHTML	`<input type="radio" checked="checked" /> <input type="checkbox" checked="checked" />`

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут checked</title>
 </head>
 <body>

  <form method="post" action="input5.php">
   <p><b>С какими операционными системами вы знакомы?</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<Br>
   <input type="checkbox" name="option2" value="a2">Windows 2000<Br>
   <input type="checkbox" name="option3" value="a3">System X<Br> 
   <input type="checkbox" name="option4" value="a4">Linux<Br> 
   <input type="checkbox" name="option5" value="a5">X3-DOS</p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Помеченный флажок в форме

поля, радио кнопки и флажки

HTML формы

В то время когда другие элементы HTML придают вашей странице разметку и стиль, формы добавляют интерактивность. HTML формы являются основной точкой взаимодействия между пользователем и сайтом. Они позволяют принимать заказы, осуществлять опросы и многое другое.

Как работают HTML формы

Формы состоят из двух частей: HTML разметка (то что отображается на веб-странице) и обработка данных на клиентской (проверка заполнения полей, проверка корректности введенной информации и т.д.) или серверной стороне (сохранение введенных данных, отправка электронных писем и т.д.). Обработка данных формы на сервере обычно написана на PHP, Ruby on Rails, Perl, Python, Node.js и Java.

Рассмотрим пошаговую работу формы:

посетитель заходит на страницу с формой, заполняет ее и отсылает

браузер отсылает данные из формы на сервер

сервер получает данные и передает их сценарию для обработки

серверный сценарий обрабатывает данные и создает новую HTML-страницу с ответом, которую он передает обратно веб-серверу

веб-сервер отправляет страницу с ответом обратно браузеру

браузер получает страницу и отображает ее

HTML тег <form>

Формально, все элементы формы должны находиться внутри элемента <form>:


<form action="myform.php" method="post">
...
содержимое формы
...
</form>

Элемент <form> является контейнером, таким же как <div> или <span>, но он также может содержать атрибуты, которые позволяют настроить запрос отправки, когда пользователь нажимает кнопку «Отправить». Двумя наиболее важными атрибутами являются action и method.

Атрибут action указывает путь к файлу, куда следует отправлять собранные данные. Если он не указан, данные отправляются на URL-адрес страницы, содержащей форму.

Атрибут method указывает метод передачи данных: get или post. (подробнее о методах передачи данных читайте описание тега <form> в HTML справочнике)

Элементы <input>

Наиболее часто используемым элементом в формах является <input>. Он позволяет добавить в форму различные элементы для ввода данных. Какой именно элемент ввода данных будет отображен на экране определяется с помощью атрибута type:

type=»text»

Значение text создает однострочное текстовое поле:


<form action="myform.php" method="post">
  <input type="text" name="name">
</form>

Попробовать »

Атрибут name требуется большинству элементов формы, так как его значение передается на сервер и используется серверными сценариями.

Примечание: обратите внимание, что элемент <input> относится к пустым элементам и не имеет закрывающего тега, поэтому перед или после элемента обычно добавляют текст (метка), содержащий информацию о том, какую информацию нужно вводить в текущее поле.

type=»submit»

Создает кнопку, при нажатии на которую браузер отправляет форму на сервер:


<form action="myform.php" method="post">
  <input  type="submit" value="Отправить">
</form>

Атрибут value задает текст, который будет отображен на кнопке, заменяя значение установленное по умолчанию.

type=»radio»

Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями:


<form action="myform.php" method="post">
  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
</form>

Попробовать »

Все радио кнопки, связанные с заданными вариантами значений, должны иметь одинаковое значение атрибута name, но каждая отдельная радио кнопка должна иметь уникальное значение атрибута value.

Примечание: элемент <input> является строчным элементом, поэтому для отображения каждого элемента управления на новой строке нужно добавить после каждого элемента тег <br> или поместить каждый элемент в абзац (в тег <p>).

type=»checkbox»

Создает элементы управления, позволяющие пользователям отмечать любое количество вариантов или отменить выбор, не выбрав ни одно из предложенных значений. Такие элементы управления называют флажками.


<form action="myform.php" method="post">
  <p><input type="checkbox" name="spice" value="Salt">Соль</p>
  <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
  <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
</form>

Попробовать »

Все флажки, относящиеся к одной группе, должны иметь одинаковое значение атрибута name, но каждый отдельный вариант должен иметь уникальное значение атрибута value.

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента <input>.

Элемент <textarea>

Элемент <textarea> создает многострочное текстовое поле. Если в поле введено больше текста, чем может поместится в текстовой области, то с правой стороны появляется полоса прокрутки. Текст, расположенный между открывающим и закрывающим тегом, будет отображаться в текстовом поле в качестве значения по умолчанию:


<form action="myform.php" method="post">
  <textarea name="comments" rows="10" cols="48">Комментарии оставлять тут!</textarea>
</form>

Попробовать »

Атрибут name должен содержать уникальное имя, которое будет идентифицировать данный элемент на серверной стороне. Атрибут rows позволяет указать количество строк, определяющих высоту текстовой области, а cols задает ширину текстовой области в символах.

Выпадающий список

Элемент <select> создает меню, содержащее выпадающий список. Элементы списка задаются с помощью элементов <option>, которые должны располагаться между открывающим и закрывающим тегами элемента <select>:


<form action="myform.php" method="post">
  <select name="character">
    <option value="Homer">Homer Simpson</option>
    <option value="Marge">Marge Simpson</option>
    <option value="Bart">Bart Simpson</option>
    <option value="Lisa">Lisa Simpson</option>
    <option value="Maggie">Maggie Simpson</option>
  </select>
</form>

Попробовать »

Элементы <fieldset> и <legend>

Для визуального выделения взаимосвязанных элементов формы можно воспользоваться элементом <fieldset>, который добавляет рамку вокруг своих дочерних элементов:


<form action="myform.php" method="post">

  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
  
  <fieldset>
    <p><input type="checkbox" name="spice" value="Salt">Соль</p>
    <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
    <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
  </fieldset>
  
</form>

Попробовать »

Название (заголовок) для такой группы элементов можно указать с помощью элемента <legend>, который должен быть первым дочерним элементом внутри элемента <fieldset>:


<form action="myform.php" method="post">

  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
  
  <fieldset>
    <legend>Специи</legend>
    <p><input type="checkbox" name="spice" value="Salt">Соль</p>
    <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
    <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
  </fieldset>
  
</form>

Попробовать »

Элемент <label>

Можно добавлять текст к элементам формы просто написав его рядом с нужным элементом, но для браузеров и поисковых систем, анализирующих разметку веб-страницы, это будет просто текст, не имеющий прямого отношения ни к одному из элементов формы. Элемент <label> позволяет связать текст с определенным элементом формы, такой текст называется меткой (или ярлыком).

По умолчанию метки визуально не отличаются от обычного текста, однако они позволяют выбирать элементы формы кликая не только на сам элемент, но и на его метку.

Связать метку с элементом формы можно двумя способами: поместить весь элемент формы внутрь элемента <label> или с помощью атрибута for, который в качестве значения принимает идентификатор элемента формы, с которым нужно связать метку:


<form action="myform.php" method="post">

  <p><label><input type="radio" name="response" value="yes">да</label></p>
  <p><label><input type="radio" name="response" value="no">нет</label></p>
	
  <p>
    <input type="checkbox" name="spice" value="Salt">
	<label for="spice_salt">Соль</label>
  </p>
  <p>
    <input type="checkbox" name="spice" value="Pepper">
	<label for="spice_pepper">Перец</label>
  </p>
  <p>
    <input type="checkbox" name="spice" value="Garlic">
	<label for="spice_garlic">Чеснок</label>
  </p>
  
</form>

Попробовать »

Метки можно размещать как до так и после элемента управления, связанного с ней, потому что, если значение атрибута for элемента <label> совпадает со значением атрибута id элемента формы, то неважно где будет находиться метка.

Еще раз о визуализации input типа checkbox и radio. Для тех, кто забыл как / Хабр

Тема старая и уже, как выяснилось, подзабытая.

Недавно у меня была короткая работа по разработке ТЗ на модернизацию давно существующего проекта. И, в частности дело касалось стилизации пресловутых <input type=»checkbox»>. Выяснилось, что исполнитель, программист «на все руки» даже не понял, что я ему на словах объяснял как это сделать. Пришлось делать примеры и, как результат, появился этот текст.

Напомню, что сейчас checkbox и radiobox разные сайты изображают по-разному. Бывает, что не отмеченный input сразу и не разглядишь – такой он «дизайнерский красивый», а у последних версий Chrome выбранные checkbox стали гнусного цвета циан.

Итак, ситуация

Есть три компании, которые используют некий программный продукт, связанный с заказами, бухгалтерией, складом и пр. Работа с заказчиками, партнерами, исполнителями и пр.

Маркетологи и рекламщики тоже его используют. Что эта система делает – неважно, на чем написано – неважно.

А важно, что на сайте этого продукта есть много страниц с формами, на которых много input checkbox и radio.

Жалобы сотрудников

Директор: На большом экране плохо видно и незаметны «крыжики».
Главбух: На моем компе «крыжики» выглядят так, у сотрудниц иначе, дома тоже не так, а на планшете совсем иначе.
Маркетолог: А можно, так что бы некоторые не выбранные позиции были красными, а другие выбранные были зелеными?
И т.д., и т.п.

Итак, задача

Минимальными затратами и минимальными изменениями исправить внешний вид checkbox и radiobox.

Сделать стилизацию checkbox и radiobox для разных юзеров. Важно: это закрытый сайт, там «всё свои», «красоты» не нужны, а нужна эффективность восприятия.

Что нельзя

1. Серверную часть трогать нельзя.
2. Файлы javascript трогать нельзя, свой javascript вставлять нельзя.
3. Файлы css трогать нельзя.

А что можно

1. Править html шаблоны.
2. Создать файл стилей для всех юзеров.
4. Создать файл стилей для конкретного юзера или группы юзеров.
А что сделали можно сразу посмотреть на codepen.io, но лучше почитать дальше.

Предварительное изучение показало

1. Почти все имеют поле name, а которые не имеют, то у них есть id.

2. Все имеют поле name, некоторые имеют id.
3. Соответственно, в css к checkbox можно обращаться как по id, так и по name. К radio – или по id, или по номеру потомка у родителя.

Фрагменты исходного кода:

/* вариант 1 */
<tag><input type="checkbox"> Некий текст</tag>

/* вариант 2 */
<tag><input type="checkbox"> Некий текст<br>
<input type="checkbox"> Некий текст</tag>

/* вариант 3 */
...<label><input type="checkbox"> Некий текст</label>...

/* вариант 4 */
<td><input type="checkbox"></td>
<td><label for="idxxx">Некий текст</label></td>

Так исправим код:

/* вариант 1 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label></tag>

/* вариант 2 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label><br>...</tag>

/* вариант 3 */
...<label><input type="checkbox"><s></s><span>Некий текст</span></label>...

/* вариант 4 */
<td><label><input type="checkbox"><s></s></label></td>
<td><label for="idxxx">Некий текст</label></td>

Всё тоже самое и для , класс у LABEL тот же.

Что конкретно сделали?

Каждый input (корме варианта 3) обернули тэгом LABEL с нашим классом. Варианту 3 просто добавили класс.

Сразу после input вставили пустой тэг S. Так как сам input будет не видим, то это тэг будет визуализировать это input.

Сопроводительный текст обернули тэгом SPAN (кроме варианта 4). Этот тэг понадобиться, когда будем решать вопрос выравнивания визуального input относительно этого текста.

Варианту 4 добавили еще класс, что бы не осуществлять это выравнивание, раз сопроводительный текст стоит в другой ячейки таблицы. Строго говоря, надо было бы сделать на оборот – вариантам 1-3 добавить класс, отвечающий за выравнивание. Но, вариантов 1-3 гораздо больше, чем 4-го и что бы не раздувать html сделано так.

Риторические вопросы и риторические же ответы
1. Зачем тэг S? Ну, не нравится S – можно использовать любой другой строчный элемент. Просто он должен быть, его можно стилизовать в зависимости от состояния предшествующего input.

2. Почему тэги S и SPAN без классов? Ну, зачем раздувать html? Тем более, что не очевидно, что одна из конструкций ниже будет «работать» медленнее другой.

  .new-input > S { }
  .new-input > .new-input-S {}

3. Как вы догадались, мне не нравятся идеи БЭМ, тем более идея «раздувать» html файл обилием упоминаний разных классов. В реальном проекте мы использовали только два класса – mni и mnio. :-))

Некоторые предварительные рассуждения и настройки css касательно box-sizing:border-box, нормализации LABEL, селекторов «A + B», «A ~ B» и «[attr]», псевдоклассов :checked, :disabled и ::before. Кто не уверен, что знает или хочет освежить знания смотрит под катом.
Предварительные рассуждения
1. Напомню, что в «старом» css (box-sizing:content-box) свойства width и height задают только ширину и высоту содержимого, а padding и border добавляются к этим значениям. box-sizing:border-box меняет схему так, что padding и border включаются в width и height.

2. Проверка показала, что в нашем случае используется старая модель, а менять «настройки» страниц запрещено. Не «наши» LABEL это простые строчные элементы, в них только текст. Поэтому стилизуем ВСЕ LABEL.

LABEL {
    box-sizing:border-box; cursor:pointer; user-select:none;
}
LABEL *,
LABEL *::before,
LABEL *::after {
    box-sizing:inherit;
}

Т.е., ставим box-sizing:border-box для тэга LABEL, всем его потомкам. Заодно ставим курсор и запрещаем выделение текст (что бы не мешало клику).

3. Комбинация селекторов «A + B» означает, что стили будут применяться только к селектору B, если он следует сразу ПОСЛЕ селектора A, т.е. только для первого B. С другой стороны, «A ~ B» означает, что ко всем селекторам B после селектора A, т.е. для первого и последующих.

Естественно, всё в пределах одного «родителя».

Как это будем использовать?

<label><input type="checkbox"><s></s><span>Некий текст</span></label>
<label><input type="radio"><s></s><span>Некий текст</span></label>

/* 1 */
.new-input > INPUT + S {}
.new-input > INPUT ~ SPAN {}

/* 2 */
.new-input > INPUT:not(:checked) + S {}
.new-input > INPUT:not(:checked) ~ SPAN {}

/* 3 */
.new-input > INPUT:checked + S {}
.new-input > INPUT:checked ~ SPAN {}

/* 4 */
.new-input > INPUT:disabled + S {}
.new-input > INPUT:disabled ~ SPAN {}

/* 5 */
.new-input > INPUT[type="radio"] + S {}

Первая группа – общие стили для тэгов S и SPAN.
Вторая группа – стили только когда INPUT НЕ выбран.
Третья – стили только когда INPUT выбран.
Четвертая – когда INPUT заблокирован.

И, наконец, пятая группа – общие стили для тэга S ТОЛЬКО, если он стоит после input radio.

Таким образом, можно изменять стили тэгов S и SPAN в зависимости от состояния input.

4. Поскольку у нас тэг S будет изображать из себя input, то самому input поставим display:none, его не будет видно, а тэг LABEL будет его переключать, а тэг S будет соответственно меняться. Почему не используем html свойство hidden у input? Потому, что на некоторых браузерах hidden у input «работает» не совсем верно, плюс не будем перегружать html файл.

Итак, начинаем визуализацию input

Пример N 1. Самый простой – используем алфавитные символы
html код тот же, а css будет такой:

/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

Тэг S буде визуализировать input. Но мы «разделим» его по функционалу: сам тэг S будет отвечать за размещение в LABEL и выравнивание относительно следующего SPAN.

А псевдоэлемент S::before разместится внутри тэга S и будет изображать из себя input.

Строка s1 определяет, какой символ будет помещен в S::before когда input не выбран. В принципе надо было бы написать «.new-input > INPUT:not(:checked) + S::before», но некоторые браузеры (например, IE), подобную конструкцию могут и не исполнить.

Строка s2 определяет символ, когда input выбран.

Строки s3 и s4 делают то же для input radio.

Строка s5 описывает, что будет если input заблокирован – в данном случае тэг S будет наполовину прозрачным.

Строка s6 определяет выравнивание, в данном случае дает отбивку слева и справа (только в этом примере). Плюс, убирает штатное перечеркивание.

Строка s7 делает квадратик, s8 превращает его в кружок для input radio.

Пример N 1 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Чуток подробнее про display: inline-block, font-size, line-height
Конченая высота строки текста определяется на основе заданных font-size, line-height. При единичном line-height – высота будет по font-size, при числовом line-height – высота будет по их произведению или, при указании единиц измерения для line-height – высоту определит максимальное значение. В примере указан line-height:1.25, поэтому и у S::before указано width:1.25em.

Для S::before указано display: inline-block – в этом случае S::before «внутри» себя будет блоком (можно указать ширину, высоту, рамки и пр.), а «снаружи» он останется строчным элементом. В дальнейшем об этом будет подробнее.

Вопрос:

Может можно использовать специальные символы? Типа вот этих:

□ ■ ▢ ▣ ○ ● ◎◉

Задать им нужный размер и всё. Нет?

Ответ:

Можно. Но не нужно. Ибо будет большой геморрой и танцы с бубнами по заданию нужного размера, выравнивания по вертикали, обрезке по высоте и прочее. Плюс, разные браузеры с этими символами работают по-разному.

Мы пошли другим путем. Хотя в финальном примере есть реализация этой идеи.

Пример N 2. «Рисуем» элементы input средствами css

html код тот же, а css будет такой:

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

Строка s1 определяет S::before для визуализации input. Это будет inline-block, ширина и высота которого установлена в 0.75em, что примерно равно высоте прописной буквы и зависит от font-size родителя. Задана тонкая рамка текущим цветом, внутренняя отбивка, небольшое скругление углов. И – самое важное! – установлено свойство background-clip:content-box. Это очень интересное свойство – если будет установлен background-color, то он закрасит только контентную часть и не затронет отбивку (padding). Что нам и надо.

Строка s2 для input типа radio делает S::before круглым.

Строка s3 для отмеченного input устанавливает для S::before background-color текущим цветом. Т.е., «рисует» внутри квадратик или кружок.

Строка s4 отрабатывает блокировку input, строка s5 дает отбивки слева и справа.

Преимущества этого метода

Всё очень просто. Работает на всех браузерах. Даже у IE10 (в эмуляции у 11-го).

Можно раскрашивать по своему усмотрению.

Раз S::before это inline-block, то он сидит на ~~попе~~ базовой линии ровно и никуда с нее не слезает. Если он по высоте будет больше текста, то просто увеличит высоту строки и останется на базовой линии.

Раз визуализация input находится внутри тэга S, то его можно легко позиционировать и выравнивать.

Размеры S::before в em дают возможность задавать его размер относительно размера текста подписи. Можно, к примеру, поставить предельные значения высоты и ширины.

Недостатки этого метода

В основном в использовании размеров в em. Дело в том, что может возникнуть ситуация когда ширина и высота при расчете (из em в px) будет иметь дробное значение. На обычных компьютерах с обычным экраном округление может произойти не корректно. Например, размеры 12.8px на 12.8px у той же Мозилы могут стать как 13px на 12px. Тогда надо ставить фиксированные размеры. Хотя на современных мониторах и видеокартах, ноутбуках, на планшетах и смартфонах этого не происходит из-за того, что точка (пиксель) браузера состоит из нескольких пикселей экрана.

Пример N 2 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Итак, первую задачу – визуализацию input – выполнили. Переходим к избранной «раскраске».

Раскрашиваем input

html для примера:

<label><input name="chb1" type="checkbox" ...><s></s><span>Некий текст</span></label>
<label><input type="radio" ...><s></s><span>Некий текст</span></label>

К input типа checkbox будем обращаться по name, к radio по id.

Всё красим в синий

/* только input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/* только text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/* или всё */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

Помним о специфичности в css, эти стили будут более специфичны, чем базовые и сработают обязательно. Чем они отличаются от описанных выше? Тем, что применяются только к избранным input – к тем, что имеет указанное значение name и id.

Тут всё хорошо кроме того, что не выбранные input будут не очень хорошо глядеться – тонкая синяя рамка мало заметна.

Красим в зеленый, когда input выбран

/* только input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/* только text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/* или всё */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

Первый вариант, на мой взгляд, не очень хорош – зеленым будут и рамка, и внутренний квадратик/кружок. Можно раскрасить только его.

/* только input и только внутри */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

Красим в красный, когда input НЕ выбран

/* только input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/* только text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/* или всё */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

Логика понятна? Можно и дальше делать более сложные конструкции.

Например, при не выбранном input текст должен быть красным и жирным, а при выбранном внутренний элемент input и текст должен быть зеленым. Элементарно!

/* текст, когда нет выбора */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/* внутренний элемент input, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* текст, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

А, к примеру, надо обработать целую группу input (10-15 штук). Что бы не писать кучу строк можно найти их общего родителя (.parent_element) и сократить условие.

.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

Всё можно посмотреть в финальном примере на codepen.io

Вот, вроде как, и всё. Осталось только «почесать родимые пятна» перфекциониста – проблемы выравнивания.

Выравнивание визуального input и сопроводительного текста

Для начала напомню общеизвестные вещи на тему размещения текста, форматирования и прочего. Всё под катом.
Общеизвестные вещи
Буду стараться не применят специальные термины, ибо в дизайне, верстке и css они иногда отличаются. Всё простыми словами.

1. Свойство font-size не определяет размер букв, а только размер знакоместа. Есть базовая линия (baseline), по которой расположены «нормальные» буквы. У «ненормальных» – g ц – нижние элементы «свисают» ниже её. Есть линия капители (cap height) – это верхняя граница «нормальной» прописной (заглавной) буквы. У «ненормальных» – Ё Й – верхние элементы «вылезают» выше её. Иными словами, размер прописной буквы это расстояние от базовой линии до капители, а знакоместо это чуть больше сверху и снизу. Обычно в «нормальных» шрифтах высота капители это 75% от высоты знакоместо. К примеру, font-size:16px, а размер буквы Н у шрифта Arial будет 12px. Но, бывают «специалисты» у шрифтов которых всё не так.

2. Свойство line-height определяет высоту строки. Если его вычисленное значение больше, чем указано в font-size, то браузер разместит текст так, что бы нормальная прописная буква была по середине высоты строки. Есть нюансы, но тут они не важны.

3. Соответственно, в нашем случае тэги S и SPAN должны иметь одинаковые значения font-size и line-height желательно заданные где-то выше у родителей. В нашем случае в примерах font-size:16px и line-height:1.25. Поэтому в примере N1 у S::before ширина указана 1.25em, а высота у него определяется автоматически. А в примере N2 (и финальный пример) – у S::before ширина и высота 0.75em, что бы был по высоте с прописную букву. Задав другое значение font-size ничего менять не надо. Естественно, эту величину надо подогнать под конкретный шрифт.

4. Если перед текстом стоит какая-то квадратная или круглая «штучка», то любой дизайнер скажет, что она должна быть по высоте с прописную букву. А отбивка между ними должна быть в определенных процентах от размера шрифта. Если высота меньше высоты буквы, то она должна быть визуально значительно меньше, но не меньше 50%. Если больше, то тоже визуально значительно больше, но не больше 150%. А вот чуть-чуть, на пару пикселей больше/меньше – это ужас-ужас! Ну, и расположена эта штучка должна быть на базовой линии или по середине без всяких там чуть-чуть.

Зачем я это упомянул? А затем, что перфекционисту глаза режет, когда input криво стоит рядом с текстом — или прилипает, или далеко, или чуть меньше, или чуть больше. Мы так делать не должны!

Что будет, если сопроводительный текст в SPAN будет выведен в две или три строки? Очевидно, что он «залезет» под input. Это не красиво, надо исправить.

Один древний метод такой: тэгу S делаем float:left, а тэгу SPAN display:block и overflow:hidden.

Получится колонка текста. Подразумевается, что у кого-то из них будет соответствующий margin, что даст отбивку между ними. Ну, ещё добавляется геморрой с прекращением float после SPAN. Мы пойдем современным путем – применим flexbox. Он тут совершенно к месту.

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

В этом случае тэг LABEL (который .new-input) будет flex, S и SPAN будут блоками, разместятся вверху LABEL. Текст в SPAN в случае необходимости будет в несколько строк. Вот из-за этого визуальный input описали в S::before. Независимо от высоты SPAN S::before будет расположен на одной базовой линии с первой строкой SPAN. Как вариант можно было указать align-items:center – тогда при однострочном SPAN визуальный input был бы вверху, а при двух строках – посередине, а при трех – у второй строки. В финальном примере можно переключать расположение input.

Вот и всё

Надеюсь, было интересно и кому-нибудь полезно. Прошу, не сильно меня ругать – это мой первый опыт на Хабр.

Пример N 1 – просто демонстрация взаимодействия изменения input и соседнего элемента.

Пример N 2 – визуализация input средствами css, как основа решения.

Финальный пример – всё описанное вместе.

Про конкретную реализацию

Там были обширные формы, где блоки полей возможные для правки конкретным пользователям выделялись слабым фоном, а остальным input имели свойство disabled и служили только для информации. Поэтому стиль «.new-input > INPUT:disabled + S::before» не применяли.

UPD

В ответ на комментарии Пример N 3.
Там работает поддержка клавиш и фокуса для скрытого input.

html input radio

В этом уроке HTML мы рассмотрим некоторые базовые компоненты для создания пользовательских интерфейсов, в частности, мы увидим те элементы, которые позволяют пользователям выбирать между предустановленными значениями.

HTML-флажок

С помощью флажков мы можем позволить пользователю сделать несколько вариантов. Например:

<form action="">
<fieldset>
<legend>Известные языки</legend><br>
<input type="checkbox" name="html" value="html"/> html
<br />
<input type="checkbox" name="css" value="css"/> css
<br />
<input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>

Вы также можете выбрать одно или несколько значений, которые отмечены по умолчанию, благодаря флажку:

<form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

Кроме того, благодаря отключенной функции мы можем сделать чекбокс недоступным:

<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

Кнопка HTML-радио

radio button ( «радио — кнопка» ) эта кнопка чтобы позволить вам сделать эксклюзивный выбор. Следовательно, в этом случае один выбор исключает другой. Чтобы получить этот эффект, поля должны иметь одинаковое имя и другое значение:

<form action="">
<fieldset>
<legend>Известные языки</legend>
HTML <input type="radio" name="language" value="html"/>
CSS <input type="radio" name="language" value="css"/>
JavaScript <input type="radio" name="language" value="javascript"/>
</fieldset>
</form>

Также в этом случае можно назначить значение по умолчанию или отключить кнопку.

<form action="">
<input type="radio" name="language" value="html" checked="checked" disabled="disabled"/>
</form>

Выпадающий список HTML select

Благодаря тегу <select> вы можете создавать меню опций. В этом случае каждая запись должна быть включена в тег <option> (закрытие тега необязательно), а значение должно быть указано с помощью атрибута «value» . С атрибутом «selected» вы можете указать выбор по умолчанию:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" >
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Наконец, с помощью тега выбора также можно установить несколько вариантов. Как вы можете видеть, при использовании атрибута «multiple» внешний вид тега select значительно меняется:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Используя клавишу CTRL, пользователь может сделать несколько вариантов.

Используя атрибут «size», вы можете указать количество элементов, которые должны отображаться в меню, и, следовательно, отрегулировать высоту меню, добавив или удалив вертикальную полосу прокрутки.

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" size="2" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Как выровнять input=»radio» с их метками?

Я знаю, что здесь есть много ответов. Я искал, пытался приспособиться, но все время терпел неудачу, поэтому и спрашиваю сейчас.

У меня есть следующая проблема. Я хочу, чтобы и метки, и входы были в одной строке: Yes o No o (o символизирует вход).

Вот мой следующий код, заметьте, что я изменил свойство отображения метки на встроенный блок:

<div>
        <label>Yes</label>
        <input type="radio" name="yes/no" checked>
        <label>No</label>
        <input type="radio" name="yes/no" >
    </div>

Извините за ответ, хотя есть много подобных вопросов и ответов, но адаптация их просто не сработала…

css

html

vertical-alignment

Поделиться

Источник

Anna Marie

14 марта 2019 в 10:40

3 ответа

Выровнять бары с барными метками в Jfreechart
У меня есть проблема с метками данных, чтобы выровнять их с правильным столбиком на этой диаграмме. Эта гистограмма генерируется с помощью jfreechart в jsp.
Центральная группа переключателей с метками
У меня есть куча переключателей с метками переменной длины. Мне было интересно, как я могу горизонтально центрировать их так, чтобы метки находились в центре страницы, но появлялись ‘left aligned’. Желаемый результат: Текущий код HTML: <input type=radio name=option id=option# value=radiobutton…

Если вы хотите, чтобы входные данные и метка были ‘bottom-aligned’, попробуйте использовать vertical-align: text-bottom .

input[type='radio'] {
  vertical-align: text-bottom;
  margin-bottom: 1px;
}
div {
  display: inline-block;
  border: 1px solid black;
}

<div>
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Поделиться

jo_va

14 марта 2019 в 10:43

Примените vertical-align: middle с margin-top: -1px к каждому input[type=’radio’] :

input[type='radio'] {
  margin-top: -1px;
  vertical-align: middle;
}

<div>
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Идеальный центр : просто линия добавила пересекающий текст и кнопку в этом втором фрагменте, чтобы показать идеальный центр

input[type='radio'] {
  margin-top: -1px;
  vertical-align: middle;
}

.col-sm-3 {
    position: relative;
    border: 1px solid;
}

.col-sm-3:after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: black;
    top: 50%;
}

<div>
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Поделиться

Kamalesh M. Talaviya

14 марта 2019 в 10:52

Возможно, вы захотите обернуть свой <input> в поля <label> .

Пример:

<div>
  <label>Yes
    <input type="radio" name="yes/no" checked>
  </label>
  <label>No
    <input type="radio" name="yes/no" >
  </label>
</div>

Эта реализация повысит доступность и удобство использования ваших входных данных и не потребует никаких дополнительных css.

Поделиться

Marcus H

30 марта 2019 в 05:35

Как выровнять переключатели по горизонтали под метками
Поэтому я использую следующий HTML для отображения 4 переключателей по горизонтали с центром под соответствующими метками в jsp: <s:form action=markUser name=markUser method=post namespace=/secure/admin> <div id=radioGroup> <label for=markStudent>Mark User as…
привязка <input type=»radio»> к полю модели?
В представлении у меня есть два <input type=radio> , объедините их в радиогруппу. Я хочу связать их с полем модели, таким образом, если значение истинно, то оно должно привязать первый переключатель, если ложно, то оно должно привязать другой. Пожалуйста, направьте, как это может быть…

— HTML: язык разметки гипертекста

элементов типа radio обычно используются в радиогруппах —коллекциях радиокнопок, описывающих набор связанных опций. Одновременно можно выбрать только один переключатель в данной группе. Радиокнопки обычно отображаются в виде маленьких кружков, которые при выборе заполняются или подсвечиваются.

Их называют переключателями, потому что они выглядят и работают аналогично кнопкам на старых радиоприемниках, например, показанных ниже.

Примечание : Флажки похожи на переключатели, но с важным отличием: переключатели предназначены для выбора одного значения из набора, тогда как флажки позволяют включать и выключать отдельные значения. Если существует несколько элементов управления, радиокнопки позволяют выбрать один из них, тогда как флажки позволяют выбрать несколько значений.

Атрибут value — это DOMString , содержащая значение переключателя.Значение никогда не отображается пользователю их пользовательским агентом. Вместо этого он используется для определения того, какой переключатель в группе выбран.

Определение радиогруппы

Радиогруппа определяется присвоением каждой радиокнопке в группе одного и того же имени . Как только радиогруппа установлена, выбор любой радиокнопки в этой группе автоматически отменяет выбор любой выбранной радиокнопки в той же группе.

Вы можете иметь столько радиогрупп на странице, сколько захотите, при условии, что каждая имеет собственное уникальное имя .

Например, если в вашей форме требуется запросить у пользователя предпочтительный метод связи, вы можете создать три переключателя, каждая из которых имеет свойство name , установленное на contact , но одну со значением email , одну со значением телефон , а один со значением почта . Пользователь никогда не видит значение или имя (если вы явно не добавили код для его отображения).

Итоговый HTML-код выглядит так:

  <форма>
   Выберите предпочтительный способ связи: 
  
    
     Электронная почта 

    
     Телефон 

    
     Почта

Здесь вы видите три радиокнопки, каждая из которых имеет имя , установленное на контакт , и каждая из которых имеет уникальное значение , которое однозначно идентифицирует эту индивидуальную радиокнопку в группе.Каждый из них также имеет уникальный id , который используется атрибутом элемента для для связывания меток с переключателями.

Вы можете попробовать этот пример здесь:

Представление данных радиогруппы

Когда вышеуказанная форма отправляется с выбранной радиокнопкой, данные формы включают запись в форме контакт = значение . Например, если пользователь нажимает кнопку с зависимой фиксацией «Телефон», а затем отправляет форму, данные формы будут включать строку contact = phone .

Если вы опустите атрибут value в HTML, отправленные данные формы присваивают группе значение на . В этом сценарии, если пользователь щелкнет опцию «Телефон» и отправит форму, в результате будут получены данные формы: contact = on , что бесполезно. Так что не забудьте установить для атрибута значение !

Примечание : Если при отправке формы не выбран переключатель, радиогруппа вообще не включается в отправленные данные формы, поскольку нет значения для отчета.

На самом деле довольно редко хочется разрешить отправку формы без каких-либо переключателей в выбранной группе, поэтому обычно разумно установить одно значение по умолчанию для состояния проверено . См. Раздел Выбор переключателя по умолчанию ниже.

Давайте добавим немного кода в наш пример, чтобы мы могли исследовать данные, генерируемые этой формой. HTML изменен, чтобы добавить блок

  для вывода данных формы в: 

   <форма>
   Выберите предпочтительный способ связи: 
  
    
     Электронная почта 
    
     Телефон 
    
     Почта 
  
  
    
  

 
 Затем мы добавляем некоторый JavaScript для настройки прослушивателя событий для события  submit , которое отправляется, когда пользователь нажимает кнопку «Отправить»:
  var form = document.querySelector ("форма");
var log = document.querySelector ("# журнал");

form.addEventListener ("отправить", функция (событие) {
  var data = new FormData (форма);
  var output = "";
  for (постоянный ввод данных) {
    вывод = вывод + запись [0] + "=" + запись [1] + "\ r";
  };
  log.innerText = вывод;
  event.preventDefault ();
}, ложный);  
 Попробуйте этот пример и убедитесь, что для группы  контактов  никогда не бывает более одного результата.
 В дополнение к общим атрибутам, общим для всех элементов   , входы  radio  поддерживают следующие атрибуты:
 Атрибут  Описание
  проверено  Логическое значение, указывающее, является ли этот переключатель выбранным по умолчанию элементом в группе
  значение  Строка для использования в качестве значения радио при отправке формы, если радио в настоящее время переключено на
 проверено 
 Логический атрибут, который, если он присутствует, указывает, что этот переключатель является выбранным по умолчанию в группе.
 В отличие от других браузеров, Firefox по умолчанию сохраняет состояние динамической проверки    при загрузке страницы. Используйте атрибут  autocomplete  для управления этой функцией.
 value 
 Атрибут  value  - это атрибут, который разделяют все    s; однако он служит специальной цели для входов типа  radio : при отправке формы на сервер отправляются только те переключатели, которые в данный момент проверены, а сообщаемое значение - это значение атрибута  value .Если значение   не указано иначе, по умолчанию это строка  на . Это показано в разделе «Значение» выше.
 Мы уже рассмотрели основы переключателей выше. Давайте теперь посмотрим на другие распространенные функции и методы, связанные с переключателями, о которых вам, возможно, потребуется знать.
 Выбор радиокнопки по умолчанию 
 Чтобы сделать радиокнопку выбранной по умолчанию, вы включаете  проверенный атрибут , как показано в этой измененной версии предыдущего примера:
  <форма>
   Выберите предпочтительный способ связи: 
  
    
     Электронная почта 

    
     Телефон 

    
     Почта 
  
  
    
  
  
 В этом случае по умолчанию выбрана первая радиокнопка.
  Примечание : Если вы поместите атрибут  checked  более чем на одну радиокнопку, более поздние экземпляры переопределят более ранние; то есть выбранный переключатель  будет выбран последним . Это связано с тем, что одновременно можно выбрать только один переключатель в группе, и пользовательский агент автоматически отменяет выбор других каждый раз, когда новый переключатель помечается как отмеченный.
 Обеспечение большей области действия для ваших переключателей 
 В приведенных выше примерах вы могли заметить, что вы можете выбрать переключатель, щелкнув связанный с ним элемент   , а также сам переключатель.Это действительно полезная функция меток HTML-форм, которая упрощает пользователям выбор нужного параметра, особенно на устройствах с маленьким экраном, таких как смартфоны.
 Помимо доступности, это еще одна веская причина для правильной настройки элементов    в ваших формах.
 Радиокнопки не участвуют в проверке ограничений; они не имеют реальной ценности, которую нужно ограничивать.
 В следующем примере показана немного более полная версия примера, который мы видели на протяжении всей статьи, с некоторыми дополнительными стилями и с улучшенной семантикой, установленной за счет использования специализированных элементов.HTML выглядит так:
  <форма>
  
     Выберите предпочтительный способ связи: 
    
      
       Электронная почта 

      
       Телефон 

      
       Почта 
    
    
      
    
  
  
 Здесь особо нечего отметить, за исключением добавления элементов 
  и 
 , которые помогают сгруппировать функциональность красиво и семантически.
 Используемый CSS немного более важен:
  html {
  семейство шрифтов: без засечек;
}

div: first-of-type {
  дисплей: гибкий;
  выровнять элементы: гибкий старт;
  нижнее поле: 5 пикселей;
}

метка {
  маржа справа: 15 пикселей;
  высота строки: 32 пикселя;
}

Вход {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;

  радиус границы: 50%;
  ширина: 16 пикселей;
  высота: 16 пикселей;

  граница: 2px solid # 999;
  переход: 0,2 с, все линейные;
  поле справа: 5 пикселей;

  положение: относительное;
  верх: 4 пикселя;
}

input: checked {
  граница: сплошной черный 6 пикселей;
}

кнопка,
legend {
  цвет белый;
  цвет фона: черный;
  отступ: 5 пикселей 10 пикселей;
  радиус границы: 0;
  граница: 0;
  размер шрифта: 14 пикселей;
}

кнопка: навести,
button: focus {
  цвет: # 999;
}

button: active {
  цвет фона: белый;
  черный цвет;
  контур: сплошной черный 1px;
}   Наиболее примечательным здесь является использование свойства  внешнего вида  (с префиксами, необходимыми для поддержки некоторых браузеров).По умолчанию радиокнопки (и флажки) имеют собственный стиль операционной системы для этих элементов управления. Указав внешний вид : нет , вы можете полностью удалить собственные стили и создать для них свои собственные стили. Здесь мы использовали границу   вместе с  border-radius  и переход  , чтобы создать красивый анимированный выбор радио. Также обратите внимание, как псевдокласс : checked  используется для определения стилей внешнего вида переключателя при его выборе.
  Примечание о совместимости : Если вы хотите использовать свойство  appearance , вам следует очень внимательно его протестировать. Хотя он поддерживается в большинстве современных браузеров, его реализация сильно различается. В старых браузерах даже ключевое слово  none  не оказывает одинакового эффекта в разных браузерах, а некоторые вообще не поддерживают его. В новейших браузерах различий меньше.
 Обратите внимание, что при нажатии на радиокнопку появляется приятный, плавный эффект исчезновения / появления, когда две кнопки меняют состояние.Кроме того, стиль и цвет легенды и кнопки отправки настроены так, чтобы иметь сильный контраст. Возможно, это не тот вид, который вы хотели бы видеть в реальном веб-приложении, но он определенно демонстрирует возможности.
 Таблицы BCD загружаются только в браузере
 HTML input type = "radio" 
 ❮ Атрибут типа HTML 
 Пример 
 Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:
  
  Мужской 
  
  Female 
  
  Другое 
Попробуй сам "
 Определение и использование 
    определяет переключатель.
 Радиокнопки обычно представлены в радиогруппах (набор радиокнопок).
 описание набора связанных опций). Только один переключатель в группе может
 быть выбранными одновременно.
  Примечание:  Радиогруппа должна иметь одно и то же имя (
 значение атрибута  name ) для обработки как группы. Как только радиогруппа
 создан, выбор любого переключателя в этой группе автоматически отменяет выбор любого
 другой выбранный переключатель в той же группе.У вас может быть столько радиогрупп
 на странице, как хотите, при условии, что каждая группа имеет собственное имя.
  Примечание:  Значение  Атрибут  определяет уникальное значение
 связанный с каждой радиокнопкой. Значение не отображается пользователю, но отображается
 значение, которое отправляется на сервер при "отправке", чтобы определить, какой переключатель
 что было выбрано.
  Совет:  Всегда добавляйте тег   
 за лучшие практики доступности!
 Поддержка браузера 
 Атрибут 
 type = "радио"  Есть  Есть  Есть  Есть  Есть
 Синтаксис 
 ❮ Атрибут типа HTML 
 input (type = radio) элемент 
 Специальные атрибуты 
 автофокус 
 Логическое значение, указывающее браузеру установить фокус на этот элемент управления, когда документ завершил загрузку или когда отображается диалоговое окно  , в котором находится элемент управления.Если атрибут имеет значение «autofocus» или пустая строка («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после загрузки страницы или диалогового окна  .
 Пример
    
  
 проверено 
 Логическое значение, указывающее, следует ли проверять элемент управления по умолчанию, то есть при загрузке страницы или при сбросе формы.Если атрибут принимает значение «checked» или пустую строку («»), или если он просто присутствует, элемент управления будет проверяться по умолчанию.
 Пример
  
  
    Пол: 

      Мужской  

      Женский 
  
  
    
    
  

  
 отключен 
 Логическое значение, указывающее, отключен ли элемент управления.Если атрибут принимает значение «отключен» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.
 Отключенные элементы управления отображаются серым цветом (если они видны), блокируются от взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются при отправке формы  .
 Пример
  
  
    Выберите цвет для своего профиля: 

      Красный  

      зеленый  

      Синий (нет в наличии) 
  
  
     

  
 форма 
 Значение атрибута  id  формы, с которой связан этот элемент управления.
 Этот атрибут является новым в  HTML  5 и помогает определять принадлежность элементов управления во вложенных или удаленных формах.
 Все переключатели в группе должны принадлежать одной и той же форме или вообще не принадлежать ни одному из. Размещение переключателей в разных формах или документах нарушит их группировку.
 Пример
  
  Доход: 

    Менее 10 000 долларов США  

    Более 10 000 долларов США 


    

  
 название 
 Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута  значение . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.
 В настоящее время значение  isindex , ранее использовавшееся особым образом в некоторых браузерах и включенное в стандарт  HTML , в этом атрибуте не допускается.
 Чтобы набор переключателей принадлежал к одной группе, все они должны иметь одинаковое значение в атрибуте  name .
 Пример
  
  
    Работает как: 

      Сотрудник  

      Фрилансер 
  
    

  
 требуется 
 Логическое значение, указывающее, может ли пользователь оставить все опции в группе снятыми.Если этот атрибут имеет значение "required" или пустую строку (""), или если он просто присутствует, пользователь должен будет выбрать параметр в группе, чтобы иметь возможность отправить форму  .
 Если этот логический атрибут присутствует в любом из переключателей определенной группы, браузер не разрешит отправку формы, пока одна из кнопок в группе не будет проверена.
 Браузер поддерживает атрибут  Требуется  не полностью.Авторам, возможно, придется полагаться на скрипты, чтобы обеспечить кроссбраузерность этой функциональности.
 Пример
  
  
    Путешествие: 

      Самолет  

      Автобус 
  
  
    
    
  

  
 тип 
 Значение, указывающее тип поля, которое представляет этот элемент.Есть двадцать два возможных значения (без учета регистра):
 скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
 текст: элемент управления, используемый для ввода однострочного фрагмента текста.
 поиск: то же, что и текст, но для целей поиска.
 tel: элемент управления, используемый для предоставления телефонного номера.
 URL-адрес
: текстовое поле, используемое для ввода единственного и абсолютного URL-адреса  .
 электронная почта: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
 пароль: текстовое поле для редактирования паролей, где символы представлены точками.
 Дата
: элемент управления для ввода определенной даты.
 месяц: элемент управления для ввода определенного месяца.
 неделя: элемент управления для ввода определенной недели.
 time: элемент управления для ввода определенного времени.
 datetime-local: элемент управления для ввода определенной местной даты и времени.
 число: элемент управления для ввода числа.
 Диапазон
: элемент управления для ввода одного или двух чисел в диапазон.
 цвет: элемент управления для ввода цвета.
 Флажок
: элемент управления для ввода логического значения (истина / ложь).
 Радио
: элемент управления, используемый для выбора одного варианта из множества.
 файл: элемент управления, используемый для загрузки файлов на сервер.
 submit: кнопка, используемая для отправки формы.
 Изображение
: то же, что и «Отправить», но с возможностью отображения в виде изображения вместо использования кнопки по умолчанию.
 сброс: кнопка, используемая для сброса элементов управления формы до значений по умолчанию.
 Кнопка
: кнопка, не связанная с действием по умолчанию.
 Если этот атрибут отсутствует, элемент ведет себя так, как если бы он имел значение «текст».
 Пример
  
  
 значение 
 Значение для элемента управления, которое будет отправлено агенту обработки вместе со значением атрибута  name , только если переключатель установлен.
 Пример
  
  
    Способ отправки: 

      ОПУБЛИКОВАТЬ  

      ПОЛУЧИТЬ 
  
    

  
 html - Как использовать атрибут «required» с полем ввода «radio» 
 html - Как использовать «required» атрибут с полем ввода «radio» - qaru
  Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
 Спросил
  9 лет, 6 месяцев назад 
 Просмотрено
 505k раз
 Мне просто интересно, как правильно использовать новый атрибут ввода HTML5 "required" на переключателях.Каждому полю переключателя нужен атрибут, как показано ниже, или его достаточно, если его получает только одно поле?
  

  
 Создан 27 ноя.
 девушка
 8,3111010 золотых знаков3434 серебряных знака4545 бронзовых знаков
 0
  TL; DR: Установите  обязательный атрибут  по крайней мере для одного входа радиогруппы.
 Настройка  требуется  для всех входов более понятна, но не обязательна (если не генерировать динамические радиокнопки).
 Чтобы сгруппировать переключатели, все они должны иметь одно и то же значение  name . Это позволяет выбирать только один за раз и применяет , необходимое  ко всей группе.
  <форма>
  Выберите пол: 


  <метка>
    
    Мужчина
   


  <метка>
    
    женский
   


  <метка>
    
    Другой
   


  
  
 Также обратите внимание на:
 Во избежание путаницы относительно того, требуется ли группа переключателей или нет, авторам рекомендуется указывать атрибут для всех переключателей в группе.В самом деле, как правило, авторам рекомендуется избегать наличия групп переключателей, в которых изначально нет проверенных элементов управления, поскольку это состояние, в которое пользователь не может вернуться, и поэтому обычно считается плохим пользовательским интерфейсом.
 Источник
 
 Создан 27 ноя.
 Сейбсен
 13.3,177 золотых знаков3737 серебряных знаков6868 бронзовых знаков
 12
 Вы можете использовать этот фрагмент кода ...
  
  
     <форма>
          
          
          
     

  
 Укажите ключевое слово « требуется » в  в одном из операторов select .Если вы хотите изменить его внешний вид по умолчанию. Вы можете выполнить следующие действия. Это просто для дополнительной информации, если у вас есть намерение изменить поведение по умолчанию.
 Добавьте в свой файл  .css  следующую строку.
  / * стиль всех элементов с обязательным атрибутом * /
:обязательный {
  фон: красный;
}
  
 Для получения дополнительной информации вы можете обратиться по следующему URL-адресу.
:required
 
 Создан 06 апр.
 Дулит Де КостаДулит Де Коста
 8,49911 золотых знаков5353 серебряных знака4343 бронзовых знака
 Вот очень простая, но современная реализация необходимых переключателей с собственной проверкой HTML5:
  fieldset {
  дисплей: блок;
  маржа слева: 0;
  маржа справа: 0;
  padding-top: 0;
  padding-bottom: 0;
  отступ слева: 0;
  отступ справа: 0;
  граница: нет;
}
тело {размер шрифта: 15 пикселей; семейство шрифтов: serif;}
Вход {
  фон: прозрачный;
  радиус границы: 0 пикселей;
  граница: сплошной черный 1px;
  отступ: 5 пикселей;
  тень коробки: нет! важно;
  размер шрифта: 15 пикселей; семейство шрифтов: с засечками;
}
input [type = "submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; отступ: 0 0 5px 0;}
форма> div {маржа внизу: 1em; переполнение: авто;}
.скрытый {
  непрозрачность: 0;
  позиция: абсолютная;
  указатель-события: нет;
}
.checkboxes label {display: block; плыть налево;}
input [type = "radio"] + span {
  дисплей: блок;
  граница: сплошной черный 1px;
  граница слева: 0;
  отступ: 5 пикселей 10 пикселей;
}
label: first-child input [type = "radio"] + span {border-left: 1px сплошной черный;}
input [type = "radio"]: checked + span {background: silver;}  
  <форма>
  
     Имя (необязательно) 
    
  
  
   Пол 
  
       Мужской  
       Женский  
       Другое  
  
  
  
  
 Хотя я большой поклонник минималистичного подхода к использованию встроенной проверки HTML5, вы, возможно, захотите заменить его проверкой Javascript в долгосрочной перспективе.Проверка Javascript дает вам гораздо больший контроль над процессом проверки и позволяет вам устанавливать реальные классы (вместо псевдоклассов) для улучшения стиля (не) допустимых полей. Эта встроенная проверка HTML5 может быть вашим запасным вариантом в случае поломки (или отсутствия) Javascript. Вы можете найти здесь пример, а также некоторые другие предложения по созданию улучшенных форм, вдохновленные Эндрю Коулом.
 
 Создан 14 сен.
 JoostSJoostS
 9,38433 золотых знака2727 серебряных знаков5050 бронзовых знаков
 1
 Мне пришлось использовать  required = "required"  вместе с тем же именем и типом, а затем проверка прошла нормально.
  




  
 
 AlwaysANovice
 91944 золотых знака1414 серебряных знаков3232 бронзовых знака
 Создан 06 фев.
 0
 lang-html
 Stack Overflow лучше всего работает с включенным JavaScript
 Ваша конфиденциальность
 Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
 Принимать все файлы cookie
 Настроить параметры
 тип ввода = радио - радио-кнопка 
 Ⓘ тип ввода = радио - переключатель # T
 
 Вход
 элемент
 с атрибутом типа, чей
 значение " радио " представляет
 выбор одного элемента из списка элементов (радио
 кнопка).
 Разрешенные атрибуты #
 
 Ⓘ
 глобальные атрибуты
 Любые атрибуты, разрешенные глобально.
 Ⓘ
 имя = строка
 #
 Часть имени пары имя / значение, связанной с этим
 элемент для отправки формы.
 Ⓘ
 отключен =
 "отключен"
 или "" (пустая строка) или пустая
#
 Указывает, что элемент представляет отключенный
 контроль.
 Ⓘ
 форма =
 Ссылка на идентификатор
 НОВЫЙ
 #
 Стоимость
 я бы
 атрибут на
 форма
 с которым нужно связать элемент.
 type = "радио"
 #
 Указывает, что его
 Вход
 элемент представляет
 выбор одного элемента из списка элементов.
 Ⓘ
 проверено =
 "проверено" или "" (пустая строка) или пусто
#
 Указывает, что элемент представляет выбранный
 контроль.
 значение = строка
 #
 Задает значение для
 Вход
 элемент.
 Ⓘ
 автофокус =
 «автофокус»
 или "" (пустая строка) или пустая
 НОВЫЙ
 #
 Указывает, что элемент представляет собой элемент управления, для которого
 UA предназначен для сосредоточения внимания, как только документ
 загружен.
 Ⓘ
 требуется =
 "обязательный"
 или "" (пустая строка) или пустая
 НОВЫЙ
 #
 Указывает, что элемент является обязательной частью формы
 подчинение.
 Дополнительные ограничения и предостережения #
 
 Ввод интерактивного элемента не должен
 появляются как потомок элемента a.
 Ввод интерактивного элемента не должен
 появляются как потомок элемента кнопки.
 Любой элемент ввода, являющийся потомком элемента метки
 с атрибутом for должен иметь
 Значение идентификатора, соответствующее этому атрибуту.
 Атрибут списка входного элемента должен ссылаться на элемент списка данных.
 Ввод элемента с типом атрибута
 со значением «кнопка» должно иметь непустое значение атрибута.
 Атрибут usemap во входном элементе устарел.
 Используйте элемент img вместо элемента ввода для карт изображений.
 Атрибут align входного элемента устарел.
 Вместо этого используйте CSS.
 Разрешенные родительские элементы #
 
 любой элемент, который может содержать
 элементы фразировки
 ввод: радиообъект JavaScript 
 фон  Задает или возвращает до пяти отдельных свойств фона в сокращенной форме.
 фон Приложение  Задает или возвращает, должно ли backgroundImage прокручиваться вместе с содержимым объекта или нет.
 фон Цвет  Задает или возвращает цвет, используемый для фона объекта.
 фон Изображение  Задает или возвращает изображение для использования в качестве фона объекта.
 фон Позиция  Задает или извлекает позицию backgroundImage внутри элемента.
 фонPositionX  Задает или возвращает горизонтальную координату backgroundImage относительно левого верхнего угла объекта-контейнера.
 фон Позиция Y  Задает или возвращает вертикальную координату backgroundImage относительно левого верхнего угла объекта-контейнера.
 фон Повторить  Задает или возвращает способ мозаичного размещения backgroundImage относительно левого верхнего угла объекта-контейнера.
 поведение  Задает или получает URL-адрес файла поведения.
 бордюр  Устанавливает или извлекает до трех отдельных свойств границы в сокращенной форме.
 бордюр низ  Задает или извлекает свойства цвета, стиля и ширины для нижней границы элемента в сокращенной форме.
 рамка Цвет снизу  Задает или возвращает цвет нижней границы элемента.
 бордюрBottomStyle  Задает или возвращает стиль нижней границы элемента.
 borderBottomWidth  Задает или возвращает ширину нижней границы элемента.
 бордюр Цвет  Задает или возвращает цвет границы элемента.
 граница слева  Задает или возвращает свойства цвета, стиля и ширины для левой границы элемента в сокращенной форме.
 бордюр LeftColor  Задает или возвращает цвет левой границы элемента.
 бордюр LeftStyle  Задает или возвращает стиль левой границы элемента.
 borderLeftWidth  Задает или возвращает ширину левой границы элемента.
 бордюр справа  Задает или возвращает свойства цвета, стиля и ширины для правой границы элемента в сокращенной форме.
 граница Правый Цвет  Задает или возвращает цвет правой границы элемента.
 бордюрRightStyle  Задает или возвращает стиль правой границы элемента.
 borderRightWidth  Задает или возвращает ширину правой границы элемента.
 бордюрный стиль  Задает или возвращает стиль границы элемента.
 бордюр  Задает или возвращает свойства цвета, стиля и ширины для верхней границы элемента в сокращенной форме.
 бордюрTopColor  Задает или возвращает цвет верхней границы элемента.
 бордюрTopStyle  Задает или возвращает стиль верхней границы элемента.
 borderTopWidth  Задает или возвращает ширину верхней границы элемента.
 бордюр Ширина  Задает или возвращает ширину границы элемента.
 низ  Задает или возвращает нижнюю координату позиционированного элемента.
 зажим  Задает или возвращает, какая часть позиционированного элемента видна.
 зажим снизу  Возвращает нижнюю координату области отсечения относительно левого верхнего угла объекта.
 зажим слева  Возвращает левую координату области отсечения относительно левого верхнего угла объекта.
 зажим справа  Возвращает правую координату области отсечения относительно левого верхнего угла объекта.
 зажим Верх  Возвращает верхнюю координату области отсечения относительно левого верхнего угла объекта.
 cssFloat  Задает или возвращает горизонтальное выравнивание объекта.
 cssText  Задает или извлекает содержимое объявления стиля в виде строки.
 курсор  Задает или возвращает тип курсора, отображаемого для указывающего устройства (мыши).
 направление  Задает или возвращает направление текста.
 дисплей  Задает или возвращает тип отображения элемента.
 фильтр  Задает или возвращает фильтр или набор фильтров, примененных к объекту.
 hasLayout  Возвращает логическое значение, которое указывает, имеет ли объект макет или нет.
 высота  Задает или возвращает высоту видимой области элемента.
 макет Поток  Задает или возвращает поток и направление содержимого в элементе.
 макет Сетка  Задает или возвращает до четырех отдельных свойств макета-сетки, которые определяют макет текстовых символов.
 layoutGridMode  Задает или возвращает, использует ли сетка макета текста одно или два измерения.
 левый  Задает или возвращает левую координату позиционированного элемента.
 длина  Возвращает количество свойств, установленных в текущем объекте стиля.
 маржа  Задает или возвращает сокращенное свойство для установки верхнего, правого, нижнего и левого полей в указанном порядке.
 поле снизу  Задает или возвращает нижнее поле объекта.
 маржа Оставшаяся  Задает или возвращает левое поле объекта.
 маржа Справа  Задает или возвращает правое поле объекта.
 маржа Верхняя  Задает или возвращает верхнее поле объекта.
 MozBackgroundClip  Задает или извлекает видимую часть фона.
 MozBackgroundInlinePolicy  Задает или извлекает способ определения backgroundImage встроенного элемента, когда содержимое встроенного элемента переносится на несколько строк.
 млн унций BackgroundOrigin  Задает или извлекает способ определения свойства backgroundPosition, т.е.е. он определяет опорную точку, относительно которой находится backgroundImage.
 MozBinding  Задает или получает URL-адрес файла XBL (Extensible Binding Language), содержащего привязку.
 MozBorderBottomColors  Задает или извлекает цвета границы для нижнего края. Вы можете указать любое количество значений цвета. Все указанные цвета будут отображаться как линия толщиной 1 пиксель.
 MozBorderEnd  Задает или возвращает свойства цвета, стиля и ширины для конца границы элемента в сокращенной форме. Вместо этого используйте свойство borderLeft.
 MozBorderEndColor  Задает или извлекает цвет конца границы элемента. Вместо этого используйте свойство borderLeftColor.
 MozBorderEndStyle  Задает или извлекает стиль конца границы элемента.Вместо этого используйте свойство borderLeftStyle.
 MozBorderEndWidth  Задает или извлекает ширину края границы элемента. Вместо этого используйте свойство borderLeftWidth.
 MozBorderImage  Задает или извлекает изображение для использования в качестве границы элемента. Изображение разделено на 9 частей по четырем диагоналям, указанным в единицах длины.
 MozBorderLeftColors  Задает или извлекает цвета границы для левого края.Вы можете указать любое количество значений цвета. Все указанные цвета будут отображаться как линия толщиной 1 пиксель.
 MozBorderRadius  Задает или возвращает скругление углов границы.
 MozBorderRadiusBottomleft  Задает или возвращает скругление левого нижнего угла границы.
 MozBorderRadiusBottomright  Задает или возвращает скругление нижнего правого угла границы.
 MozBorderRadiusTopleft  Задает или возвращает скругление левого верхнего угла границы.
 MozBorderRadiusTopright  Задает или возвращает скругление правого верхнего угла границы.
 MozBorderRightColors  Задает или извлекает цвета границы для правого края.Вы можете указать любое количество значений цвета. Все указанные цвета будут отображаться как линия толщиной 1 пиксель.
 MozBorderStart  Задает или возвращает свойства цвета, стиля и ширины для начала границы элемента. Вместо этого используйте свойство borderRight.
 MozBorderStartColor  Задает или извлекает цвет начала границы элемента. Вместо этого используйте свойство borderRightColor.
 MozBorderStartStyle  Задает или извлекает стиль начала границы элемента. Вместо этого используйте свойство borderRightStyle.
 MozBorderStartWidth  Задает или извлекает ширину начала границы элемента. Вместо этого используйте свойство borderRightWidth.
 MozBorderTopColors  Задает или извлекает цвета границы для верхнего края.Вы можете указать любое количество значений цвета. Все указанные цвета будут отображаться как линия толщиной 1 пиксель.
 MozFloatEdge  Задает или извлекает, включают ли свойства высоты и ширины элемента поля, границу или толщину заполнения.
 MozMarginEnd  Задает или извлекает ширину левого или правого поля в зависимости от направления письма.
 MozMarginStart  Задает или извлекает ширину левого или правого поля в зависимости от направления письма.
 млн унций (млн унций)  Задает или возвращает уровень непрозрачности. Для кросс-браузерного решения используйте свойство непрозрачности в Firefox, Google Chrome, Safari и Opera и свойство фильтра ('filter: Alpha (opacity = 50)') в Internet Explorer.
 MozOutline  Задает или извлекает контур элемента.
 MozOutlineColor  Задает или возвращает цвет контура.
 MozOutlineOffset  Задает или извлекает расстояние между контуром и границей или краем элемента.
 MozOutlineRadius  Задает или возвращает скругление углов контура.
 MozOutlineRadiusBottomleft  Задает или возвращает скругление левого нижнего угла контура.
 MozOutlineRadiusВнизу справа  Задает или возвращает скругление нижнего правого угла контура.
 млн унцийOutlineRadiusTopleft  Задает или возвращает скругление левого верхнего угла контура.
 MozOutlineRadiusTopright  Задает или возвращает скругление верхнего правого угла контура.
 MozOutlineStyle  Задает или извлекает стиль левой, правой, верхней и нижней границ объекта.
 млн унций OutlineWidth  Устанавливает или извлекает ширину контура.
 MozPaddingEnd  Задает или возвращает расстояние между левой или правой границей элемента и его содержимым в зависимости от направления письма.
 MozPaddingStart  Задает или возвращает расстояние между левой или правой границей элемента и его содержимым в зависимости от направления письма.
 MozTransform  Задает или возвращает двумерное линейное преобразование, примененное к элементу. Источник преобразования указывается свойством MozTransformOrigin.
 MozTransformOrigin  Задает или возвращает исходную точку двумерных линейных преобразований, заданных свойством MozTransform.
 О Размер фона  Устанавливает или извлекает размер фонового изображения.
 непрозрачность  Устанавливает или извлекает уровень прозрачности элемента. Для Internet Explorer используйте фильтр с «Альфа (непрозрачность = процент)».
 контур  Задает или возвращает сокращенную форму для всех свойств структуры сразу.Контур - это линия вокруг элемента, но отличается от свойства границы.
 контур Цвет  Задает или возвращает цвет контура элемента.
 контур Смещение  Задает или извлекает расстояние между контуром и границей или краем элемента.
 контур Стиль  Задает или возвращает стиль контура элемента.
 контур Ширина  Задает или возвращает ширину контура элемента.
 набивка  Задает или возвращает сокращенное свойство для установки верхнего, правого, нижнего и левого пробелов между границей элемента и его содержимым в указанном порядке.
 обивка низ  Задает или возвращает расстояние между нижней границей элемента и его содержимым.
 обивка слева  Задает или возвращает расстояние между левой границей элемента и его содержимым.
 набивка правая  Задает или возвращает расстояние между правой границей элемента и его содержимым.
 обивка  Задает или возвращает расстояние между верхней границей элемента и его содержимым.
 пиксель внизу  Задает или извлекает значение свойства стиля дна в пикселях.
 пиксель Высота  Задает или извлекает значение свойства стиля высоты в пикселях.
 пиксель влево  Задает или извлекает значение свойства стиля left в пикселях.
 пиксель Правый  Задает или извлекает значение свойства правильного стиля в пикселях.
 пиксель вверху  Задает или извлекает значение свойства верхнего стиля в пикселях.
 пикселей Ширина  Задает или извлекает значение свойства стиля ширины в пикселях.
 поз. Снизу  Задает или извлекает значение свойства стиля дна в виде числа с плавающей запятой, которое задает значение в текущем типе единиц для свойства дна.
 pos Высота  Задает или извлекает значение свойства стиля высоты в виде числа с плавающей запятой, которое задает значение в текущем типе единиц измерения свойства высоты.
 позиция  Задает или возвращает, какой тип метода позиционирования используется для визуализации текущего элемента.
 pos влево  Задает или извлекает значение свойства стиля left в виде числа с плавающей запятой, которое указывает значение в текущем типе единиц для свойства left.
 posRight  Задает или извлекает значение свойства правого стиля в виде числа с плавающей запятой, которое задает значение в текущем типе единиц измерения правого свойства.
 posTop  Задает или извлекает значение свойства стиля top в виде числа с плавающей запятой, которое задает значение в текущем типе единиц измерения свойства top.
 pos Ширина  Задает или извлекает значение свойства стиля ширины в виде числа с плавающей запятой, которое указывает значение в текущем типе единиц измерения свойства ширины.
 правый  Задает или возвращает правую координату позиционированного элемента.
 стиль Поплавок  Задает или возвращает горизонтальное выравнивание объекта.
 верх  Задает или возвращает верхнюю координату позиционированного элемента.
 юникодBidi  Указывает или возвращает, следует ли переопределить текст для поддержки нескольких языков в одном документе.Используйте со свойством direction.
 видимость  Указывает или возвращает, является ли элемент видимым.
 webkit Внешний вид  Задает или извлекает режим отрисовки темы для элемента. Позволяет сделать элемент похожим на стандартный элемент пользовательского интерфейса.
 webkitBackgroundClip  Задает или извлекает видимую часть фона.
 webkit Фон Композитный  Задает или извлекает стиль композиции для фонового изображения и цвета элемента.
 webkit Фон Происхождение  Задает или извлекает способ определения свойства backgroundPosition, следовательно, он определяет опорную точку, относительно которой находится backgroundImage.
 webkit Фон Размер  Устанавливает или извлекает размер фонового изображения.
 webkitBorderBottomLeftRadius  Задает или возвращает скругление левого нижнего угла границы.
 webkitBorderBottomRightRadius  Задает или возвращает скругление нижнего правого угла границы.
 webkitBorderHorizontalSpacing  Задает или возвращает расстояние по горизонтали между ячейками в таблице.
 webkitBorderImage  Задает или извлекает изображение для использования в качестве границы элемента. Изображение разделено на 9 частей по четырем диагоналям, указанным в единицах длины.
 webkitBorderRadius  Задает или возвращает скругление углов границы.
 webkitBorderTopLeftRadius  Задает или возвращает скругление левого верхнего угла границы.
 webkitBorderTopRightRadius  Задает или возвращает скругление правого верхнего угла границы.
 webkitBorderVertical Расстояние  Задает или возвращает расстояние по вертикали между ячейками в таблице.
 webkitMarginBottomCollapse  Задает или извлекает, могут ли верхнее и нижнее поля совместно использоваться смежными элементами.
 webkitMarginCollapse  Задает или извлекает, могут ли верхнее и нижнее поля совместно использоваться смежными элементами.
 webkitMarginStart  Задает или извлекает ширину левого или правого поля в зависимости от направления письма.
 webkitMarginTopCollapse  Задает или извлекает, могут ли верхнее и нижнее поля совместно использоваться смежными элементами.
 webkitPaddingStart  Задает или возвращает расстояние между левой или правой границей элемента и его содержимым в зависимости от направления письма.
 webkitTransform  Задает или возвращает двумерное линейное преобразование, примененное к элементу. Источник преобразования указывается свойством MozTransformOrigin.
 webkitTransformOrigin  Задает или возвращает исходную точку двумерных линейных преобразований, заданных свойством MozTransform.
 ширина  Задает или возвращает ширину видимой области элемента.
 z Индекс  Задает или возвращает уровень стека позиционированных объектов.
 увеличение  Задает или возвращает уровень масштабирования содержимого элемента.
 Как использовать «обязательный» атрибут с полем ввода радио 
 Если вы хотите использовать обязательный атрибут только для одного входа радиогруппы, этот фрагмент для вас.
 Хотя установка обязательного атрибута для всех входов более понятна, в этом нет необходимости (если вам не нужно динамически генерировать переключатели).
 Чтобы сгруппировать переключатели, они должны иметь одинаковое значение для атрибута имени. Это позволяет нам сразу выбрать только одну радиокнопку и применить требуемый атрибут ко всей группе. Посмотрим, как это делается.
 Создать HTML¶ 
 Используйте элемент
.
 Добавьте три элемента  с атрибутами типа ввода радио, имени и значения.
 Добавьте обязательный атрибут в первую <метку>.
 Добавьте  с типом «submit».
  <форма>
  Выберите пол:
  <метка>
     Мужской
  
  <метка>
     Женский
  
  <метка>
     Другое
  
  
  
 Пример использования обязательного атрибута с полем ввода радио: ¶ 
  

  
     Название документа 
  
  
    
      Выберите пол:
      <метка>
         Мужской
      
      <метка>
         Женский
      
      <метка>
         Другое
      
      
    
  
  
 Попробуйте сами ».

Атрибут	Описание
`проверено`	Логическое значение, указывающее, является ли этот переключатель выбранным по умолчанию элементом в группе
`значение`	Строка для использования в качестве значения радио при отправке формы, если радио в настоящее время переключено на