Html примеры radiobutton: Переключатели | htmlbook.ru — Вебджем.рф

Содержание

Еще раз о визуализации 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. Почти все <input type=»checkbox»> имеют поле name, а которые не имеют, то у них есть id.

2. Все <input type=»radio»> имеют поле 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>

Всё тоже самое и для <input type=»radio»>, класс у 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.

RadioButton Класс (System.Web.UI.WebControls) | Microsoft Learn

Ссылка

Определение

Пространство имен:: System.Web.UI.WebControls

Сборка:: System.Web.dll

Важно!

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

Представляет элемент управления «Переключатель».

public ref class RadioButton : System::Web::UI::WebControls::CheckBox

public class RadioButton : System.Web.UI.WebControls.CheckBox

type RadioButton = class
    inherit CheckBox
    interface IPostBackDataHandler

Public Class RadioButton
Inherits CheckBox

Наследование

Object

Control

WebControl

CheckBox

RadioButton

Реализации: IPostBackDataHandler

Примеры

В следующем примере кода показано, как использовать RadioButton элемент управления.

<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
    <title>RadioButton Example</title>
<script language="C#" runat="server">
 
         void SubmitBtn_Click(Object Sender, EventArgs e) {
         
             if (Radio1. Checked) {
                 Label1.Text = "You selected " + Radio1.Text;
             }
             else if (Radio2.Checked) {
                 Label1.Text = "You selected " + Radio2.Text;
             }
             else if (Radio3.Checked) {
                 Label1.Text = "You selected " + Radio3.Text;
             }
         }
 
     </script>
 
 </head>
 <body>
 
     <h4>RadioButton Example</h4>
 
     <form runat="server">
     
         <h5>Select the type of installation you want to perform:</h5>
     
         <asp:RadioButton Text="Typical" Checked="True" GroupName="RadioGroup1" runat="server" /><br />
         
         This option installs the features most typically used.  <i>Requires 1.2 MB disk space.</i><br />
             
         <asp:RadioButton Text="Compact" GroupName="RadioGroup1" runat="server"/><br />
         
         This option installs the minimum files required to run the product.   <i>Requires 350 KB disk space.</i><br />
          
         <asp:RadioButton runat="server" Text="Full" GroupName="RadioGroup1" /><br />
         
         This option installs all features for the product.  <i>Requires 4.3 MB disk space.</i><br />
 
         <asp:button text="Submit" runat="server"/>
 
         <asp:Label font-bold="true" runat="server" />
             
     </form>
 
 </body>
 </html>

<%@ Page Language="VB" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
    <title>RadioButton Example</title>
<script language="VB" runat="server">
    Sub SubmitBtn_Click(Sender As Object, e As EventArgs)
        
        If Radio1.Checked Then
            Label1.Text = "You selected " & Radio1.Text
        ElseIf Radio2. Checked Then
            Label1.Text = "You selected " & Radio2.Text
        ElseIf Radio3.Checked Then
            Label1.Text = "You selected " & Radio3.Text
        End If
    End Sub
 
     </script>
 
 </head>
 <body>
 
     <h4>RadioButton Example</h4>
 
     <form runat="server">
     
         <h5>Select the type of installation you want to perform:</h5>
     
         <asp:RadioButton Text="Typical" Checked="True" GroupName="RadioGroup1" runat="server" /><br />
         
         This option installs the features most typically used.  <i>Requires 1.2 MB disk space.</i><br />
             
         <asp:RadioButton Text="Compact" GroupName="RadioGroup1" runat="server"/><br />
         
         This option installs the minimum files required to run the product.  <i>Requires 350 KB disk space.</i><br />
          
         <asp:RadioButton runat="server" Text="Full" GroupName="RadioGroup1" /><br />
         
         This option installs all features for the product.   <i>Requires 4.3 MB disk space.</i><br />
 
         <asp:button text="Submit" runat="server"/>
 
         <asp:Label font-bold="true" runat="server" />
             
     </form>
 
 </body>
 </html>

В этом разделе:

Введение
Специальные возможности
Декларативный синтаксис

Введение

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

Примечание

Элемент управления можно использовать для RadioButton отображения входных данных пользователей, которые могут включать вредоносный клиентский скрипт. Проверьте все сведения, отправляемые клиентом, для исполняемого скрипта, SQL инструкций или другого кода, прежде чем отображать его в приложении. ASP.NET предоставляет функцию проверки входных запросов для блокировки скрипта и HTML во входных данных пользователя. Серверные элементы управления проверки также предоставляются для оценки входных данных пользователем. Дополнительные сведения см. в разделе синтаксиса элемента управления сервером проверки.

Специальные возможности

Разметка, отображаемая по умолчанию для этого элемента управления, может не соответствовать стандартам специальных возможностей, таким как рекомендации по специальным возможностям веб-содержимого 1.0 (WCAG) с приоритетом 1. Дополнительные сведения о поддержке специальных возможностей для этого элемента управления см. в разделе ASP.NET Элементы управления и специальные возможности.

Декларативный синтаксис

<asp:RadioButton  
    AccessKey="string"  
    AutoPostBack="True|False"  
    BackColor="color name|#dddddd"  
    BorderColor="color name|#dddddd"  
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|  
        Inset|Outset"  
    BorderWidth="size"  
    CausesValidation="True|False"  
    Checked="True|False"  
    CssClass="string"  
    Enabled="True|False"  
    EnableTheming="True|False"  
    EnableViewState="True|False"  
    Font-Bold="True|False"  
    Font-Italic="True|False"  
    Font-Names="string"  
    Font-Overline="True|False"  
    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|  
        Large|X-Large|XX-Large"  
    Font-Strikeout="True|False"  
    Font-Underline="True|False"  
    ForeColor="color name|#dddddd"  
    GroupName="string"  
    Height="size"  
    ID="string"  
    OnCheckedChanged="CheckedChanged event handler"  
    OnDataBinding="DataBinding event handler"  
    OnDisposed="Disposed event handler"  
    OnInit="Init event handler"  
    OnLoad="Load event handler"  
    OnPreRender="PreRender event handler"  
    OnUnload="Unload event handler"  
    runat="server"  
    SkinID="string"  
    Style="string"  
    TabIndex="integer"  
    Text="string"  
    TextAlign="Left|Right"  
    ToolTip="string"  
    ValidationGroup="string"  
    Visible="True|False"  
    Width="size"  
/>

Конструкторы

RadioButton()

Инициализирует новый экземпляр класса RadioButton.

Свойства

AccessKey	Возвращает или задает клавишу доступа, обеспечивающую быстрый переход к серверному веб-элементу управления. (Унаследовано от WebControl)
Adapter	Возвращает конкретный адаптер браузера для элемента управления. (Унаследовано от Control)
AppRelativeTemplateSourceDirectory	Возвращает или задает относительно приложения виртуальный каталог объекта Page или UserControl, который содержит этот элемент управления. (Унаследовано от Control)
Attributes	Получает коллекцию произвольных атрибутов (только для отрисовки), которые не соответствуют свойствам элемента управления. (Унаследовано от WebControl)
AutoPostBack	Возвращает или задает значение, показывающее, отправляется ли автоматически состояние CheckBox обратно на сервер при его выборе. (Унаследовано от CheckBox)
BackColor	Получает или задает цвет фона серверного веб-элемента управления. (Унаследовано от WebControl)
BindingContainer	Возвращает элемент управления, который содержит привязку данных элемента управления. (Унаследовано от Control)
BorderColor	Возвращает или задает цвет рамки элемента управления Веба. (Унаследовано от WebControl)
BorderStyle	Получает или задает стиль границы серверного веб-элемента управления. (Унаследовано от WebControl)
BorderWidth	Возвращает или задает ширину границы серверного веб-элемента управления. (Унаследовано от WebControl)
CausesValidation	Возвращает или задает значение, показывающее, выполняется ли проверка при выборе элемента управления CheckBox. (Унаследовано от CheckBox)
Checked	Возвращает или задает значение, указывающее, выбран ли элемент управления CheckBox. (Унаследовано от CheckBox)
ChildControlsCreated	Возвращает значение, которое указывает, созданы ли дочерние элементы управления серверного элемента управления. (Унаследовано от Control)
ClientID	Получает идентификатор элемента управления для HTML-разметки, созданной ASP.NET. (Унаследовано от Control)
ClientIDMode	Возвращает или задает алгоритм, используемый для создания значения свойства ClientID. (Унаследовано от Control)
ClientIDSeparator	Возвращает значение символа разделителя, используемого в свойстве ClientID. (Унаследовано от Control)
Context	Возвращает объект HttpContext, связанный с серверным элементом управления для текущего веб-запроса. (Унаследовано от Control)
Controls	Возвращает объект ControlCollection, который представляет дочерние элементы управления для указанного элемента управления сервера в иерархии пользовательского интерфейса. (Унаследовано от Control)
ControlStyle	Возвращает или задает стиль серверного веб-элемента управления. Это свойство используется преимущественно разработчиками элементов управления. (Унаследовано от WebControl)
ControlStyleCreated	Возвращает значение, определяющее, был ли объект Style создан для свойства ControlStyle. Этот свойство в основном используется разработчиками элементов управления. (Унаследовано от WebControl)
CssClass	Возвращает или задает класс каскадных листов стилей (CSS), преобразовываемый для просмотра в серверном веб-элементе управления на клиентском компьютере. (Унаследовано от WebControl)
DataItemContainer	Возвращает ссылку на контейнер именования, если контейнер именования реализует класс IDataItemContainer. (Унаследовано от Control)
DataKeysContainer	Возвращает ссылку на контейнер именования, если контейнер именования реализует класс IDataKeysControl. (Унаследовано от Control)
DesignMode	Возвращает значение, указывающее, используется ли элемент управления на поверхности разработки. (Унаследовано от Control)
Enabled	Возвращает или задает значение, определяющее, включен ли серверный веб-элемент управления. (Унаследовано от WebControl)
EnableTheming	Возвращает или задает значение, указывающее, применяются ли темы к этому элементу управления. (Унаследовано от WebControl)
EnableViewState	Получает или задает значение, указывающее запрашивающему клиенту, сохраняет ли серверный элемент управления состояние представления и состояние представления своих дочерних элементов управления. (Унаследовано от Control)
Events	Возвращает список делегатов обработчиков событий элемента управления. Это свойство доступно только для чтения. (Унаследовано от Control)
Font	Возвращает свойства шрифта, связанные с серверным веб-элементом управления. (Унаследовано от WebControl)
ForeColor	Возвращает или задает основной цвет (обычно это цвет текста) для серверного веб-элемента управления. (Унаследовано от WebControl)
GroupName	Получает или задает имя группы, к которой принадлежит переключатель.
HasAttributes	Получает значение, определяющие наличие атрибутов у элемента управления. (Унаследовано от WebControl)
HasChildViewState	Возвращает значение, которое указывает на наличие сохраненных параметров состояния представления у дочернего элемента серверного элемента управления. (Унаследовано от Control)
Height	Получает или задает высоту серверного веб-элемента управления. (Унаследовано от WebControl)
ID	Возвращает или задает программный идентификатор, назначенный серверному элементу управления. (Унаследовано от Control)
IdSeparator	Возвращает символ, используемый для разделения идентификаторов элементов управления. (Унаследовано от Control)
InputAttributes	Возвращает ссылку на коллекцию атрибутов для обработанного элемента ввода в элементе управления CheckBox. (Унаследовано от CheckBox)
IsChildControlStateCleared	Возвращает значение, указывающее, имеют ли элементы управления в этом элементе управления состояние элемента управления. (Унаследовано от Control)
IsEnabled	Возвращает значение, определяющее, включен ли элемент управления. (Унаследовано от WebControl)
IsTrackingViewState	Возвращает значение, отражающее сохранение изменений в состояние представления серверного элемента управления. (Унаследовано от Control)
IsViewStateEnabled	Возвращает значение, указывающее, используется ли состояние представления для этого элемента управления. (Унаследовано от Control)
LabelAttributes	Возвращает ссылку на коллекцию атрибутов для обработанного элемента LABEL в элементе управления CheckBox. (Унаследовано от CheckBox)
LoadViewStateByID	Возвращает значение, указывающее, участвует ли элемент управления в загрузке состояния представления ID вместо индекса. (Унаследовано от Control)
NamingContainer	Возвращает ссылку на контейнер именования элемента управления, создающий уникальное пространство имен для различения серверных элементов управления с одинаковыми значениями свойства ID. (Унаследовано от Control)
Page	Возвращает ссылку на экземпляр Page, содержащий серверный элемент управления. (Унаследовано от Control)
Parent	Возвращает ссылку на родительский элемент управления серверного элемента управления в иерархии элементов управления страницы. (Унаследовано от Control)
RenderingCompatibility	Возвращает значение, которое задает версию ASP. NET, с которой совместим созданный HTML. (Унаследовано от Control)
Site	Возвращает сведения о контейнере, который содержит текущий элемент управления при визуализации на поверхности конструктора. (Унаследовано от Control)
SkinID	Возвращает или задает обложку, применяемую к элементу управления. (Унаследовано от WebControl)
Style	Возвращает коллекцию атрибутов текста, которые будут отображены в виде атрибута стиля на внешнем теге серверного веб-элемента управления. (Унаследовано от WebControl)
SupportsDisabledAttribute	Получает значение, указывающее, должен ли элемент управления устанавливать для атрибута `disabled` отрисовываемого элемента HTML значение disabled, если для свойства элемента управления IsEnabled задано значение `false`. (Унаследовано от WebControl)
TabIndex	Возвращает или задает индекс перехода по клавише Tab для серверного веб-элемента управления. (Унаследовано от WebControl)
TagKey	Возвращает значение HtmlTextWriterTag, которое соответствует этому элементу управления веб-сервера. Это свойство используется преимущественно разработчиками элементов управления. (Унаследовано от WebControl)
TagName	Возвращает имя тега элемента управления. Это свойство используется преимущественно разработчиками элементов управления. (Унаследовано от WebControl)
TemplateControl	Возвращает или задает ссылку на шаблон, содержащий этот элемент управления. (Унаследовано от Control)
TemplateSourceDirectory	Возвращает виртуальный каталог Page или UserControl, содержащий текущий серверный элемент управления. (Унаследовано от Control)
Text	Возвращает или задает текстовую подпись, связанную с объектом CheckBox. (Унаследовано от CheckBox)
TextAlign	Возвращает или задает выравнивание текстовой подписи, связанной с элементом управления CheckBox. (Унаследовано от CheckBox)
ToolTip	Возвращает или задает текст, который отображается при наведении указателя мыши на серверный веб-элемент управления. (Унаследовано от WebControl)
UniqueID	Возвращает уникальный идентификатор серверного элемента управления в иерархии. (Унаследовано от Control)
ValidateRequestMode	Возвращает или задает значение, указывающее, проверяет ли элемент управления полученный из браузера клиентский ввод на предмет потенциально опасных значений. (Унаследовано от Control)
ValidationGroup	Получает или задает группу элементов управления, для которых элемент управления CheckBox инициирует проверку при обратной передаче на сервер. (Унаследовано от CheckBox)
ViewState	Возвращает словарь сведений о состоянии, позволяющих сохранять и восстанавливать состояние представления серверного элемента управления при нескольких запросах одной и той же страницы. (Унаследовано от Control)
ViewStateIgnoresCase	Возвращает значение, указывающее, является ли объект StateBag нечувствительным к регистру. (Унаследовано от Control)
ViewStateMode	Возвращает или задает режим состояния представления данного элемента управления. (Унаследовано от Control)
Visible	Получает или задает значение, указывающее, отрисовывается ли серверный элемент управления как пользовательский интерфейс на странице. (Унаследовано от Control)
Width	Получает или задает ширину серверного веб-элемента управления. (Унаследовано от WebControl)

Методы

AddAttributesToRender(HtmlTextWriter)	Добавляет атрибуты и стили HTML элемента управления CheckBox, которые должны преобразовываться для просмотра в указанном потоке вывода. (Унаследовано от CheckBox)
AddedControl(Control, Int32)	Вызывается после добавления дочернего элемента управления в коллекцию Controls объекта Control. (Унаследовано от Control)
AddParsedSubObject(Object)	Уведомляет серверный элемент управления, что элемент XML или HTML был проанализирован, и добавляет элемент в серверный элемент управления объекта ControlCollection. (Унаследовано от Control)
ApplyStyle(Style)	Копирует любой непустой элемент указанного стиля в элемент управления Веба, перезаписывая уже существующие элементы стиля. Этот метод, в основном, используется разработчиками элементов управления. (Унаследовано от WebControl)
ApplyStyleSheetSkin(Page)	Применяет свойства стиля, определенные в таблице стилей страницы, к элементу управления. (Унаследовано от Control)
BeginRenderTracing(TextWriter, Object)	Запускает трассировку во время разработки данных отрисовки. (Унаследовано от Control)
BuildProfileTree(String, Boolean)	Собирает сведения о серверном элементе управления и доставляет их свойству Trace, которое отображается при включенной на странице трассировке. (Унаследовано от Control)
ClearCachedClientID()	Задает для кэшированного свойства ClientID значение `null`. (Унаследовано от Control)
ClearChildControlState()	Удаляет сведения о состоянии элемента управления для дочерних элементов управления серверного элемента управления. (Унаследовано от Control)
ClearChildState()	Удаляет сведения о состоянии элемента управления и состоянии представления для всех дочерних элементов серверного элемента управления. (Унаследовано от Control)
ClearChildViewState()	Удаляет сведения о состоянии представления для всех дочерних элементов серверного элемента управления. (Унаследовано от Control)
ClearEffectiveClientIDMode()	Задает для свойства ClientIDMode текущего экземпляра элемента управления и любых его дочерних элементов управления значение Inherit. (Унаследовано от Control)
CopyBaseAttributes(WebControl)	Копирует не инкапсулированные объектом Style свойства из указанного серверного веб-элемента управления веб-сервера в элемент управления веб-сервера, откуда вызывается этот метод. Этот метод используется в основном разработчиками элементов управления. (Унаследовано от WebControl)
CreateChildControls()	Вызывается платформой страницы ASP.NET для уведомления серверных элементов управления, использующих составную реализацию, о необходимости создания дочерних элементов управления, содержащихся в них для обратной передачи или отрисовки. (Унаследовано от Control)
CreateControlCollection()	Создает новый объект ControlCollection для хранения дочерних элементов управления (литеральных и серверных) серверного элемента управления. (Унаследовано от Control)
CreateControlStyle()	Создает объект стиля, который используется внутри класса WebControl для реализации всех относящихся к стилю свойств. Этот метод используется в основном разработчиками элементов управления. (Унаследовано от WebControl)
DataBind()	Привязывает источник данных к вызываемому серверному элементу управления и всем его дочерним элементам управления. (Унаследовано от Control)
DataBind(Boolean)	Привязывает источник данных к вызванному серверному элементу управления и всем его дочерними элементами управления с возможностью вызова события DataBinding. (Унаследовано от Control)
DataBindChildren()	Привязывает источник данных к дочерним элементам управления серверного элемента управления. (Унаследовано от Control)
Dispose()	Включает серверный элемент управления для выполнения окончательной чистки до освобождения памяти. (Унаследовано от Control)
EndRenderTracing(TextWriter, Object)	Завершает трассировку во время разработки данных отрисовки. (Унаследовано от Control)
EnsureChildControls()	Определяет наличие у серверного элемента управления дочерних элементов управления. Если дочерних элементов управления нет, они будут созданы. (Унаследовано от Control)
EnsureID()	Создает идентификатор для элементов управления, которые не имеют назначенного идентификатора. (Унаследовано от Control)
Equals(Object)	Определяет, равен ли указанный объект текущему объекту. (Унаследовано от Object)
FindControl(String)	Выполняет поиск серверного элемента управления с заданным параметром `id` в текущем контейнере именования. (Унаследовано от Control)
FindControl(String, Int32)	Выполняет поиск в текущем контейнере именования серверного элемента управления с указанным `id` и целым числом, указанным в параметре `pathOffset`, который содействует поиску. Эту версию метода FindControl не следует переопределять. (Унаследовано от Control)
Focus()	Задает фокус ввода на элемент управления. (Унаследовано от Control)
GetDesignModeState()	Возвращает данные времени разработки для элемента управления. (Унаследовано от Control)
GetHashCode()	Служит хэш-функцией по умолчанию. (Унаследовано от Object)
GetRouteUrl(Object)	Возвращает URL-адрес, соответствующий набору параметров маршрута. (Унаследовано от Control)
GetRouteUrl(RouteValueDictionary)	Возвращает URL-адрес, соответствующий набору параметров маршрута. (Унаследовано от Control)
GetRouteUrl(String, Object)	Возвращает URL-адрес, соответствующий набору параметров маршрута и имени маршрута. (Унаследовано от Control)
GetRouteUrl(String, RouteValueDictionary)	Возвращает URL-адрес, соответствующий набору параметров маршрута и имени маршрута. (Унаследовано от Control)
GetType()	Возвращает объект Type для текущего экземпляра. (Унаследовано от Object)
GetUniqueIDRelativeTo(Control)	Возвращает часть с префиксом свойства UniqueID указанного элемента управления. (Унаследовано от Control)
HasControls()	Определяет наличие у серверного элемента управления дочерних элементов управления. (Унаследовано от Control)
HasEvents()	Возвращает значение, указывающее, регистрируются ли события для элемента управления или каких-либо дочерних элементов управления. (Унаследовано от Control)
IsLiteralContent()	Определяет наличие у серверного элемента управления только текстового содержимого. (Унаследовано от Control)
LoadControlState(Object)	Восстанавливает сведения о состоянии элемента управления предыдущего запроса страницы, сохраненные методом SaveControlState(). (Унаследовано от Control)
LoadPostData(String, NameValueCollection)	Обрабатывает данные обратной передачи для элемента управления RadioButton.
LoadPostData(String, NameValueCollection)	Обрабатывает данные обратной передачи для элемента управления CheckBox. (Унаследовано от CheckBox)
LoadViewState(Object)	Загружает предварительно сохраненное состояние представления элемента управления CheckBox. (Унаследовано от CheckBox)
MapPathSecure(String)	Извлекает физический путь, к которому ведет виртуальный путь (абсолютный или относительный). (Унаследовано от Control)
MemberwiseClone()	Создает неполную копию текущего объекта Object. (Унаследовано от Object)
MergeStyle(Style)	Копирует любой непустой элемент указанного стиля в элемент управления Веба, но не перезаписывает уже существующие элементы стиля. Этот метод используется в основном разработчиками элементов управления. (Унаследовано от WebControl)
OnBubbleEvent(Object, EventArgs)	Определяет, передается ли событие серверного элемента управления вверх по иерархии серверных элементов управления пользовательского интерфейса страницы. (Унаследовано от Control)
OnCheckedChanged(EventArgs)	Вызывает событие CheckedChanged элемента управления CheckBox. Это позволяет непосредственно обрабатывать событие. (Унаследовано от CheckBox)
OnDataBinding(EventArgs)	Вызывает событие DataBinding. (Унаследовано от Control)
OnInit(EventArgs)	Вызывает событие Init. (Унаследовано от Control)
OnLoad(EventArgs)	Вызывает событие Load. (Унаследовано от Control)
OnPreRender(EventArgs)	Вызывает событие PreRender.
OnUnload(EventArgs)	Вызывает событие Unload. (Унаследовано от Control)
OpenFile(String)	Возвращает Stream, используемое для чтения файла. (Унаследовано от Control)
RaiseBubbleEvent(Object, EventArgs)	Присваивает родительскому элементу управления все источники события и сведения о них. (Унаследовано от Control)
RaisePostDataChangedEvent()	Вызывает событие CheckedChanged, если свойство Checked было изменено при обратной передаче.
RaisePostDataChangedEvent()	Вызывает событие OnCheckedChanged(EventArgs), если отправленные данные для элемента управления CheckBox изменились. (Унаследовано от CheckBox)
RemovedControl(Control)	Вызывается после удаления дочернего элемента управления из коллекции Controls объекта Control. (Унаследовано от Control)
Render(HtmlTextWriter)	Отображает объект CheckBox на стороне клиента. (Унаследовано от CheckBox)
RenderBeginTag(HtmlTextWriter)	Выводит открывающий HTML-тег элемента управления в указанное средство записи. Этот метод используется в основном разработчиками элементов управления. (Унаследовано от WebControl)
RenderChildren(HtmlTextWriter)	Выводит содержимое дочерних элементов серверного элемента управления в предоставленный объект HtmlTextWriter, который записывает это содержимое для подготовки к просмотру на клиенте. (Унаследовано от Control)
RenderContents(HtmlTextWriter)	Выводит содержимое элемента управления в заданный модуль записи. Этот метод используется в основном разработчиками элементов управления. (Унаследовано от WebControl)
RenderControl(HtmlTextWriter)	Выводит содержимое серверного элемента управления в указанный объект HtmlTextWriter и сохраняет сведения о трассировке элемента управления, если трассировка включена. (Унаследовано от Control)
RenderControl(HtmlTextWriter, ControlAdapter)	Выводит серверный элемент управления в указанный объект HtmlTextWriter, используя указанный объект ControlAdapter. (Унаследовано от Control)
RenderEndTag(HtmlTextWriter)	Отображает закрывающий HTML-тег элемента управления в указанное средство записи. Этот метод используется в основном разработчиками элементов управления. (Унаследовано от WebControl)
ResolveAdapter()	Возвращает адаптер элемента управления, отвечающий за отрисовку определенного элемента управления. (Унаследовано от Control)
ResolveClientUrl(String)	Возвращает URL-адрес, который может использоваться браузером. (Унаследовано от Control)
ResolveUrl(String)	Преобразует URL-адрес в адрес, доступный для клиента. (Унаследовано от Control)
SaveControlState()	Сохраняет любые изменения состояния серверного элемента управления, произошедшие после отправки страницы обратно на сервер. (Унаследовано от Control)
SaveViewState()	Сохраняет изменения в состояние представления объекта CheckBox после того, как страница отправлена на сервер. (Унаследовано от CheckBox)
SetDesignModeState(IDictionary)	Задает данные времени разработки для элемента управления. (Унаследовано от Control)
SetRenderMethodDelegate(RenderMethod)	Назначает делегата обработчика событий для преобразования серверного элемента управления и его содержимого для просмотра в родительский элемент управления. (Унаследовано от Control)
SetTraceData(Object, Object)	Задает данные трассировки для трассировки данных отрисовки во время разработки, используя ключ данных трассировки и значение данных трассировки. (Унаследовано от Control)
SetTraceData(Object, Object, Object)	Задает данные трассировки для трассировки данных отрисовки во время разработки, используя трассируемый объект, ключ данных трассировки и значение данных трассировки. (Унаследовано от Control)
ToString()	Возвращает строку, представляющую текущий объект. (Унаследовано от Object)
TrackViewState()	Отслеживает изменения состояния представления элемента управления CheckBox для сохранения в объекте элемента управления StateBag. Этот объект доступен с помощью свойства ViewState. (Унаследовано от CheckBox)

События

CheckedChanged	Происходит, если значение свойства Checked изменяется между отправками на сервер. (Унаследовано от CheckBox)
DataBinding	Происходит при привязке серверного элемента управления к источнику данных. (Унаследовано от Control)
Disposed	Происходит при освобождении памяти, занятой серверным элементом управления, т.е. на последнем этапе жизненного цикла серверного элемента управления при запросе страницы ASP.NET. (Унаследовано от Control)
Init	Происходит при инициализации серверного элемента управления, который находится на первом этапе его жизненного цикла. (Унаследовано от Control)
Load	Происходит при загрузке серверного элемента управления в объект Page. (Унаследовано от Control)
PreRender	Происходит после загрузки объекта Control, но перед отрисовкой. (Унаследовано от Control)
Unload	Происходит при выгрузке серверного элемента управления из памяти. (Унаследовано от Control)

Явные реализации интерфейса

6 netframework-4.6.1 netframework-4.6.2 netframework-4.7 netframework-4.7.1 netframework-4.7.2 netframework-4.8 «> 7.2 netframework-4.8 «> 0 netframework-3.0 netframework-3.5 netframework-4.0 netframework-4.5 netframework-4.5.1 netframework-4.5.2 netframework-4.6 netframework-4.6.1 netframework-4.6.2 netframework-4.7 netframework-4.7.1 netframework-4.7.2 netframework-4.8 «>

IAttributeAccessor.GetAttribute(String)	Возвращает атрибуту веб-элемента управления указанное имя. (Унаследовано от WebControl)
IAttributeAccessor.SetAttribute(String, String)	Задает атрибуту веб-элемента управления указанное имя и значение. (Унаследовано от WebControl)
IControlBuilderAccessor.ControlBuilder	Описание этого члена см. в разделе ControlBuilder. (Унаследовано от Control)
IControlDesignerAccessor.GetDesignModeState()	Описание этого члена см. в разделе GetDesignModeState(). (Унаследовано от Control)
IControlDesignerAccessor.SetDesignModeState(IDictionary)	Описание этого члена см. в разделе SetDesignModeState(IDictionary). (Унаследовано от Control)
IControlDesignerAccessor.SetOwnerControl(Control)	Описание этого члена см. в разделе SetOwnerControl(Control). (Унаследовано от Control)
IControlDesignerAccessor. UserData	Описание этого члена см. в разделе UserData. (Унаследовано от Control)
IDataBindingsAccessor.DataBindings	Описание этого члена см. в разделе DataBindings. (Унаследовано от Control)
IDataBindingsAccessor.HasDataBindings	Описание этого члена см. в разделе HasDataBindings. (Унаследовано от Control)
IExpressionsAccessor.Expressions	Описание этого члена см. в разделе Expressions. (Унаследовано от Control)
IExpressionsAccessor.HasExpressions	Описание этого члена см. в разделе HasExpressions. (Унаследовано от Control)
IParserAccessor.AddParsedSubObject(Object)	Описание этого члена см. в разделе AddParsedSubObject(Object). (Унаследовано от Control)
IPostBackDataHandler.LoadPostData(String, NameValueCollection)	Описание этого члена см. в разделе LoadPostData(String, NameValueCollection).
IPostBackDataHandler.RaisePostDataChangedEvent()	Описание этого члена см. в разделе RaisePostDataChangedEvent().

Методы расширения

6 netframework-4.6.1 netframework-4.6.2 netframework-4.7 netframework-4.7.1 netframework-4.7.2 netframework-4.8 «>

FindDataSourceControl(Control)	Возвращает источник данных, связанный с элементом управления данными, для заданного элемента управления.
FindFieldTemplate(Control, String)	Возвращает шаблон поля для заданного столбца в контейнере именования заданного элемента управления.
FindMetaTable(Control)	Возвращает объект метатаблицы для контейнерного элемента управления данными.

Применяется к

См. также раздел

CheckBox
Элементы управления web Server RadioButton и RadioButtonList

Radio buttons, checkboxes и другие виды селекторов

Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются. В отличие от большинства других моих статей, основное внимание будет уделено двум компонентам (радиокнопкам (radio buttons) и флажкам (checkboxes), а также их сравнению с парой других селекторов.

Читайте также: Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

1. Что такое селекторы

Селектор (selector) – это поле ввода, в котором пользователь должен выбрать один (или несколько) параметров, в отличие от текстового поля, в котором пользователь имеет полную свободу действий. Селекторы, как прически Lady Gaga, бывают разных форм и стилей. Выпадающие списки, флажки, переключатели, ползунки и т.д. – это разные типы селекторов, но они не похожи друг на друга. Основное функциональное различие между этими типами селекторов состоит в том, сколько вариантов пользователь может выбрать: один или несколько.

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

2. Анатомия флажков и радиокнопок

Хотя, в этой статье мы рассмотрим различные типы селекторов, мы сосредоточимся на радиокнопках (radio buttons) и флажках (checkboxes). Ниже их анатомия.

Анатомия радиокнопок и флажков

Примечание: Иногда люди говорят «radio button»/ «checkbox», когда имеют ввиду метку и селектор вместе, в то время, как в других случаях они подразумевают только селектор. Я предпочитаю последний вариант.

3. В чем разница между радиокнопками и флажками

Радиокнопки и флажки очень похожи, за исключением нескольких ключевых отличий. Основное отличие состоит в том, что с помощью радиокнопок вы можете выбрать только один элемент, а с помощью флажков – любое количество. Я собиралась составить таблицу, чтобы объяснить это, но не стала. Не потому, что а) это звучало скучно, б) Medium не позволяет вставлять таблицы, а поэтому у меня была лучшая идея:

Викторина! Ура! Давайте посмотрим, кто даст 100% правильных ответов.

1) Сколько элементов можно выбрать в стандартном компоненте флажков (если не указано иное)?

1
3
Неограниченное кол-во
0

2) Какова форма селектора радиокнопки?

Квадрат
Круг
Шестиугольник
Треугольник

3) Если вы хотите создать интерфейс, в котором пользователь сможет выбрать несколько начинок для мороженого, вы должны использовать:

Радиокнопки
Флажки

4) Если вы хотите создать интерфейс, в котором пользователь может выбрать тип банковского счета, который он может открыть, вы должны использовать:

Радиокнопки
Флажки

5) Если бы вы хотели создать селектор «Подписаться на рассылку», какой тип вы бы использовали?

Радиокнопка
Флажок

6) Выберите на картинке ниже вариант с радиокнопкой.

ОТВЕТЫ:
1): 3. Неограниченное кол-во

2): 2. Круг

3): 2. Флажки

4): 1. Радиокнопки

5): 2. Флажок

6): 1. A

Вы справились! (Надеюсь).

4. Распространенные стили селекторов

Ниже представлен ряд распространенных стилей флажков и радиокнопок, с которыми вы можете столкнуться в Интернете.

Стандартный стиль (радиокнопки / флажки)

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

Стандартный стиль с галочками

Стандартный стиль без галочек

Стиль кнопки в тестах (радиокнопки / флажки)

Когда пользователь отвечает на вопросы теста или викторины, мы должны убедиться в двух вещах: 1) что он может четко видеть, какие ответы выбирает, 2) что он не запутается, когда получит фидбек на свой ответ.

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

Селекторы викторины, показывающие, что наличие галочки вызывает путаницу

Основной стиль с изображением (радиокнопки/ флажки)

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

Изображения в стиле сетки (одно / несколько)

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

Впервые я узнал об этом стиле в тестах Buzzfeed. Они просто показывают изображение без текста. Если вы используете этот макет, пожалуйста, убедитесь, что у вас есть альтернативный текст для пользователей, использующих программу чтения с экрана или на случай плохого подключение к Интернету.

Пример одиночного селектора в стиле сетки. Скриншот: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-you

Многоуровневые флажки

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

Многоуровневые флажки

Это один из наиболее сложных элементов интерфейса, потому что верхний элемент (родительский) действует одновременно, как селектор и, как аккордеон. А что, если вы нажмете на метку, она выберет селектор или откроет / закроет аккордеон? Я не смогла найти определенное исследование того, какой вариант лучше, поскольку это необычный паттерн, но в прошлом я делала метку не селектором, а частью аккордеона. Пишите в комментариях, если у вас есть предложения, как решить эту дилемму.

Принудительный выбор

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

Флажки с принудительным выбором

Стиль кнопки (одиночный / множественный выбор)

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

Селектор в стиле кнопки

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

Выбор жанра Apple Music при регистрации. Изображение: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T

Переключатель (одиночный выбор)

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

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

Пример переключателя

5. Состояния

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

По умолчанию / активно (Default/active)

Это начальное состояние селекторов. Это состояние указывает пользователю, что он может кликать по пунктам в вопросах.

Пример радиокнопок и флажков в их стандартном / активном состоянии

Неактивно (Inactive)

Когда установлено неактивное состояние, пользователь не сможет взаимодействовать с вариантами ответа. Пользователь редко сталкивается с этим состоянием, если это не указано в правилах продукта.

Пример радиокнопок и флажков в их неактивном состоянии

Наведение курсора (Hover)

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

Пример радиокнопок и флажков в состоянии наведения курсора

Совет для нубов: у сенсорных устройств нет состояния наведения курсора

Фокус / выделение (Focus/highlighted)

Фокус или выделенное состояние обычно обозначается синим ореолом вокруг активируемого кликом элемента. Вы можете убедиться в этом сами, щелкнув по интерфейсу. Пользователь редко сталкивается с этим состоянием, если только не нажмет «Enter», чтобы выбрать элемент.

Пример радиокнопок и флажков в их состоянии фокуса / выделения

Нажато (Pressed)

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

Пример радиокнопок и флажков в их нажатом состоянии

Выбрано (Selected)

После того, как пользователь щелкнул по элементу, интерфейс должен сообщить ему об этом. Как упоминалось ранее, радиокнопки могут иметь только один выбранный элемент, а флажки могут иметь несколько, в зависимости от бизнес-правил.

Пример радиокнопок и флажков в их выбранном состоянии

Ошибка обратной связи (Fail feedback)

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

Пример радиокнопок и флажков в состоянии ошибки

6. Правила для текста метки

Существует только одно жесткое правило для меток селектора: быть последовательным.

Убедитесь, что регистр на каждой метке селектора одинаков (регистр предложений, регистр заголовков и т. д.)
Убедитесь, что все элементы либо заканчиваются точкой, либо нет.
Постарайтесь убедиться, что все элементы являются либо предложением, либо фразой, либо словом. Старайтесь избегать, чтобы часть вариантов была предложениями, а другая – отдельными словами. Использование комбинации усложняет решение вопроса о том, какой регистр и пунктуацию использовать.

Пример меток элементов

7. Когда вы должны их использовать

Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).

Когда использовать радиокнопки

У меня есть четыре правила, когда использовать радиокнопки. Вот они:

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

Сравнение раскрывающегося списка и радиокнопок

При этом, если пространство не является проблемой, возможно, стоит использовать радиокнопки – особенно, если вы проектируете для мобильных устройств. Я видела, что это идеально подходит для служб доставки еды.

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

Вы хотите принудить выбрать один вариант ответа

Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.

Если у вопроса есть только два варианта: да / нет

Если ваш вопрос «Хотите получать уведомления?», «Воспроизвести фоновую музыку?» и т. д., то лучше используйте переключатель. Они занимают гораздо меньше места, являются более понятными, и поскольку это относительно новый тип селектора, они модные.

Сравнение радиокнопок и переключателя

Дополнение к статье после ее публикации:

5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта

Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.

Этот вариант предложил Thomas Veit_, спасибо ему:)

_6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором

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

Пример переключателя с множественным выбором

Этот вариант предложил Thomas Weitz, спасибо ему.

Когда использовать флажки

У меня есть два правила, когда использовать флажки, и вот они:

Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать

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

Один элемент

Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?

Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.

8. Проверка доступности

Вы сделали это! Вы завершили проектирование своих селекторов, и пришло время отправить их команде разработчиков. Но погодите! Вы проверили их доступность?

Соответствует ли ваш селектор стандартам цветового контраста WCAG AAA? Вместо этого некоторые дизайнеры используют стандарты АА. Моя любимая программа проверки контрастности – WebAIM.
Варианты ответа / элементы больше, чем 44px для сенсорных экранов? (Иногда используют 36px. )
Расстояние между каждым вариантом ответа / элементом больше 8px?
Всегда ли видна метка / вопрос?
Есть ли в соответствующих полях полезный текст обратной связи? (Например, «Пожалуйста, заполните этот вопрос»)

Подробнее: https://webaim.org/techniques/forms/controls

9. Мысли в заключение

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

Берегите себя, ибо сейчас мир совсем обезумел.

Перевод статьи uxdesign.cc

Работа с полями ввода форм

Последнее обновление: 17.03.2021

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

Обработка флажков

Флажки или чекбоксы (html-элемент <input type="checkbox"/>) могут находиться в двух состояниях: отмеченном (checked) и неотмеченном. Например:

Запомнить: <input type="checkbox" name="remember" checked="checked" />

Если флажок находится в неотмеченном состоянии, например:

Запомнить: <input type="checkbox" name="remember" />

то при отправке формы значение данного флажка не передается на сервер.

Если флажок отмечен, то при отправке на сервер для поля remember будет передано значение on:

$remember = $_POST["remember"];

Если нас не устраивает значение on, то с помощью атрибута value мы можем установить нужное нам значение:

Запомнить: <input type="checkbox" name="remember" value="1" />

Иногда необходимо создать набор чекбоксов, где можно выбрать несколько значений. Например:


<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["technologies"])){
	
	$technologies = $_POST["technologies"];
	foreach($technologies as $item) echo "$item<br />";	
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
    <p>ASP. NET: <input type="checkbox" name="technologies[]" value="ASP.NET" /></p>
	<p>PHP: <input type="checkbox" name="technologies[]" value="PHP" /></p>
	<p>Node.js: <input type="checkbox" name="technologies[]" value="Node.js" /></p>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

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


$technologies = $_POST["technologies"];
foreach($technologies as $item) echo "$item<br />";

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

Переключатели

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


<!DOCTYPE html>
<html>
<head>
<title>METANIT. COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["course"]))
{
    $course = $_POST["course"];
    echo $course;
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
    <input type="radio" name="course" value="ASP.NET" />ASP.NET <br>
	<input type="radio" name="course" value="PHP" />PHP <br>
	<input type="radio" name="course" value="Node.js" />Node.js <br>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

На сервер передается значение атрибута value у выбранного переключателя. Получение переданного значения:


if(isset($_POST["course"]))
{
    $course = $_POST["course"];
    echo $course;
}

Список

Список представляет элемент select, который предоставляет выбор одного или нескольких элементов:


<!DOCTYPE html>
<html>
<head>
<title>METANIT. COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["course"]))
{
    $course = $_POST["course"];
    echo $course;
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
    <select name="course" size="1">
		<option value="ASP.NET">ASP.NET</option>
		<option value="PHP">PHP</option>
		<option value="Ruby">RUBY</option>
		<option value="Python">Python</option>
	</select>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

Элемент <select> содержит ряд вариантов выбора в виде элементов <option>:

Получить выбранный элемент в коде PHP как и обычное одиночное значение:


if(isset($_POST["course"]))
{
    $course = $_POST["course"];
    echo $course;
}

Но элемент <select> также позволяет сделать множественный выбор. И в этом случае обработка выбранных значений изменяется, так как сервер получает массив значений:


<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["courses"]))
{
    $courses = $_POST["courses"];
    foreach($courses as $item) echo "$item<br>";
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
    <select name="courses[]" size="4" multiple="multiple">
		<option value="ASP.NET">ASP.NET</option>
		<option value="PHP">PHP</option>
		<option value="Ruby">RUBY</option>
		<option value="Python">Python</option>
	</select><br>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

Такие списки имеют атрибут multiple="multiple". Для передачи массива также указываются в атрибуте name квадратные скобки: name="courses[]"

НазадСодержаниеВперед

Переключатель. Справка

Примечание. Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать переключатель в Конструкторе шаблонов.

Чтобы вставить в задание переключатель, используйте компонент {{field type="radio" name="<название выходного поля>"}}. Например (переключатель из двух элементов):

{{field \n Описание\n

Тип поля: radio — переключатель.\n