Радиобаттон html: 🤷🏽♀️ Page not found | MDN Web Docs
— HTML | MDN
Атрибут type тега <input> со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.
<input type="radio">Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».
Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже.
Примечание
Атрибут value — это строка DOM, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.
Создание группы радиокнопок
Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута (
Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута name.
Например, если в вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с name= "contact" , но с разными value = "email", value ="phone" и value = "mail" соответственно. Пользователь не видит атрибуты 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=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-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов
Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.
Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи, с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.
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
поля, радио кнопки и флажки
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 элемента формы, то неважно где будет находиться метка.
Правильный способ использования HTML radiobutton?
У меня есть 3 радиокнопки. Я хочу, чтобы они действовали как радиокнопки : если пользователь нажимает одну, другую нельзя нажать. Но почему-то мои кнопки действуют как флажки, пользователь может выбрать все 3. Вот мой код, чего мне не хватает ? Спасибо!
<div>
<div>
<label for="input-status1" ></label>
<input type="radio" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label>Option 1</label>
</div>
<div>
<label for="input-status2" ></label>
<input type="radio" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label>Option 2</label></div>
<div>
<label for="input-status3" ></label>
<input type="radio" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label>Option 3</label>
</div>
Вот изображение, показывающее проблему. Я не использую W3Schools в качестве учебного ресурса, я просто использовал их редактор HTML, чтобы показать пример.
javascript html twitter-bootstrapПоделиться Источник delphirules 11 июля 2017 в 14:11
2 ответа
- Правильный способ использования памяти Cap Mathematica?
В 32-разрядной операционной системе, где максимальная память, выделенная для любой программы, ограничена, Mathematica изящно завершает kernel и возвращает ошибку максимального выделения памяти. Однако на a 64-bit OS Mathematica будет свободно использовать всю доступную память и остановит работу…
- правильный способ использования шаблона html?
Я начал переносить простой сайт на Jekyll. У меня есть набор шаблонов, от которых все наследуется, так что все, что мне нужно сделать, это заполнить фактический контент. Однако при перемещении содержимого я нахожу, что некоторые из них должны изменить теги, ранее указанные шаблоном. Например, у…
3
Все переключатели в группе должны иметь одинаковое значение для атрибута name . Вот что делает их взаимоисключающими.
Вот документация для <input type='radio'> , которая включает в себя:
Параметр «name» является важным атрибутом переключателей, поскольку он определяет, к какой группе принадлежит переключатель. Поскольку группы переключателей действуют как единое целое, необходимо указать общее имя для всех связанных переключателей. Когда две или более переключателей имеют общее имя, выбор одной из кнопок отменит выбор всех остальных с тем же именем. Если у вас есть несколько групп переключателей на одной странице, кнопки в разных группах должны иметь разные «name» атрибуты.
Поделиться Scott Marcus 11 июля 2017 в 14:12
2
Переключатели группируются вместе с помощью атрибута name . дайте им то же самое name .
<div>
<div>
<label for="input-status1" ></label>
<input type="radio" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
<label>Option 1</label>
</div>
<div>
<label for="input-status2" ></label>
<input type="radio" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
<label>Option 2</label>
</div>
<div>
<label for="input-status3" ></label>
<input type="radio" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
<label>Option 3</label>
</div>
Поделиться denvaar 11 июля 2017 в 14:12
Похожие вопросы:
WPF RadioButton привязка команд
В настоящее время у меня есть ObservableCollection пользовательских объектов, которые находятся в моем ViewModel. Эта коллекция привязана к свойству ItemsSource в A ListBox , на мой взгляд, где…
Как изменить свойство radiobutton без использования его id тега
Мне нужно пройти через петлю и проверить правильный радиобаттон. У меня есть несколько переключателей с именем rb с таким цветом, как rbGreen, rbRed, rbYellow… Вот мой код: (listColors — это…
Стиль radiobutton без использования JS или CSS3 или HTML5
Мне было поручено создать следующий radiobutton без использования JS, CSS3 или HTML5. Возможно ли это как-то?
Правильный способ использования памяти Cap Mathematica?
В 32-разрядной операционной системе, где максимальная память, выделенная для любой программы, ограничена, Mathematica изящно завершает kernel и возвращает ошибку максимального выделения памяти….
правильный способ использования шаблона html?
Я начал переносить простой сайт на Jekyll. У меня есть набор шаблонов, от которых все наследуется, так что все, что мне нужно сделать, это заполнить фактический контент. Однако при перемещении…
ListView, RadioButton: правильный дисплей, но неактивен
У меня есть ListView с собственным адаптером: CityZipCodesAdapter . В конструкторе я даю List<CityZipCodesDataModel> , где я держу String , String и boolen (был выбран RadioButton или нет)….
Правильный способ использования BeginTransaction с Dapper.IDbConnection
Что такое правильный способ использования BeginTransaction() с IDbConnection в щеголеватой ? Я создал метод, в котором я должен использовать BeginTransaction() . Вот код. using (IDbConnection cn =…
Правильный способ использования invoke_result?
На cppreference написано, что правильный способ использования std::result_of -это: template<class F, class… Args> std::result_of_t<F&&(Args&&…)> // instead of…
Правильный способ использования радиокнопок
Я не совсем понимаю, как правильно использовать радиокнопки. Допустим, у меня есть группа из 3 радиокнопок : если все они имеют один и тот же идентификатор / имя, то она будет работать правильно ,…
Правильный способ использования SVG в файле HTML
Что такое правильный способ, чтобы добавить SVG мой файл HTML? Хорошо ли добавлять SVG непосредственно в файл HTML с помощью тега <svg> вместо использования другого метода, так как это делает…
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
Выравнивание radio-button и текста по вертикали
Даже когда занимаешься версткой довольно долго, иногда некторые простые моменты могут отнять некоторое время. Один из таких для меня было то, что когда выводишь рядом radio-button и текст к нему, то текст получается немного ниже, чем следовало бы. И лично меня это немного раздражало и поэтому я решил выровнять текст и радио-кнопку по вертикали по центру, чтобы они смотрелись красиво.
В исходном варианте всё выглядело так:
<input type="radio" value="1" /> test radio-button
На экране (при увеличении масштаба) это выглядит так:
Т.е. видно, что текст чуть ниже, чем нужно. Как же выровнять текст относительно radio-button по вертикали, чтобы он был по середине, как и сам radio-button. Чтобы каждый раз не искать решение когда оно потребуется, я и написал эту заметку.
Есть несколько вариантов как сделать выравнивание. Но я приведу на мой взгляд самый простой и самый короткий способ, как говорится без всяких заморочек.
Выравнивание radio-button по вертикали в одну линию с текстом
Этот способ работает во всех современных браузерах.
<input type="radio" value="1" /> test radio-button
Выглядеть после выравнивания будет так:
Если вы применяете какие-то особенные шрифты или просто хочется немного сместить радио кнопку по вертикали, можно воспользоваться таким тоже простым вариантом:
<input type="radio" value="1" /> test radio-button
Результат будет такой:
В интернете есть и другие варианты выравнивания.
Выравнивание radio-button с помощью таблицы
<table border="0">
<tr>
<td><input type="radio" value="1" /></td>
<td>test radio-button</td>
</tr>
</table>
Однако по-моему это очень громоздкий вариант, да и устаревший очень.
| AccessKey | Возвращает или задает клавишу доступа, обеспечивающую быстрый переход к серверному веб-элементу управления.Gets or sets the access key that allows you to quickly navigate to the Web server control. (Унаследовано от WebControl) |
| Adapter | Возвращает конкретный адаптер браузера для элемента управления.Gets the browser-specific adapter for the control. (Унаследовано от Control) |
| AppRelativeTemplateSourceDirectory | Возвращает или задает относительно приложения виртуальный каталог объекта Page или UserControl, который содержит этот элемент управления.Gets or sets the application-relative virtual directory of the Page or UserControl object that contains this control. (Унаследовано от Control) |
| Attributes | Получает коллекцию произвольных атрибутов (только для отрисовки), которые не соответствуют свойствам элемента управления.Gets the collection of arbitrary attributes (for rendering only) that do not correspond to properties on the control. (Унаследовано от WebControl) |
| AutoPostBack | Возвращает или задает значение, показывающее, отправляется ли автоматически состояние CheckBox обратно на сервер при его выборе.Gets or sets a value indicating whether the CheckBox state automatically posts back to the server when clicked. (Унаследовано от CheckBox) |
| BackColor | Получает или задает цвет фона серверного веб-элемента управления.Gets or sets the background color of the Web server control. (Унаследовано от WebControl) |
| BindingContainer | Возвращает элемент управления, который содержит привязку данных элемента управления.Gets the control that contains this control’s data binding. (Унаследовано от Control) |
| BorderColor | Возвращает или задает цвет рамки элемента управления Веба.Gets or sets the border color of the Web control. (Унаследовано от WebControl) |
| BorderStyle | Получает или задает стиль границы серверного веб-элемента управления.Gets or sets the border style of the Web server control. (Унаследовано от WebControl) |
| BorderWidth | Возвращает или задает ширину границы серверного веб-элемента управления.Gets or sets the border width of the Web server control. (Унаследовано от WebControl) |
| CausesValidation | Возвращает или задает значение, показывающее, выполняется ли проверка при выборе элемента управления CheckBox.Gets or sets a value indicating whether validation is performed when the CheckBox control is selected. (Унаследовано от CheckBox) |
| Checked | Возвращает или задает значение, указывающее, выбран ли элемент управления CheckBox.Gets or sets a value indicating whether the CheckBox control is checked. (Унаследовано от CheckBox) |
| ChildControlsCreated | Возвращает значение, которое указывает, созданы ли дочерние элементы управления серверного элемента управления.Gets a value that indicates whether the server control’s child controls have been created. (Унаследовано от Control) |
| ClientID | Получает идентификатор элемента управления для HTML-разметки, созданной ASP.NET.Gets the control ID for HTML markup that is generated by ASP.NET. (Унаследовано от Control) |
| ClientIDMode | Возвращает или задает алгоритм, используемый для создания значения свойства ClientID.Gets or sets the algorithm that is used to generate the value of the ClientID property. (Унаследовано от Control) |
| ClientIDSeparator | Возвращает значение символа разделителя, используемого в свойстве ClientID.Gets a character value representing the separator character used in the ClientID property. (Унаследовано от Control) |
| Context | Возвращает объект HttpContext, связанный с серверным элементом управления для текущего веб-запроса.Gets the HttpContext object associated with the server control for the current Web request. (Унаследовано от Control) |
| Controls | Возвращает объект ControlCollection, который представляет дочерние элементы управления для указанного элемента управления сервера в иерархии пользовательского интерфейса.Gets a ControlCollection object that represents the child controls for a specified server control in the UI hierarchy. (Унаследовано от Control) |
| ControlStyle | Возвращает или задает стиль серверного веб-элемента управления.Gets the style of the Web server control. Это свойство используется преимущественно разработчиками элементов управления.This property is used primarily by control developers. (Унаследовано от WebControl) |
| ControlStyleCreated | Возвращает значение, определяющее, был ли объект Style создан для свойства ControlStyle.Gets a value indicating whether a Style object has been created for the ControlStyle property. Этот свойство в основном используется разработчиками элементов управления.This property is primarily used by control developers. (Унаследовано от WebControl) |
| CssClass | Возвращает или задает класс каскадных листов стилей (CSS), преобразовываемый для просмотра в серверном веб-элементе управления на клиентском компьютере.Gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client. (Унаследовано от WebControl) |
| DataItemContainer | Возвращает ссылку на контейнер именования, если контейнер именования реализует класс IDataItemContainer.Gets a reference to the naming container if the naming container implements IDataItemContainer. (Унаследовано от Control) |
| DataKeysContainer | Возвращает ссылку на контейнер именования, если контейнер именования реализует класс IDataKeysControl.Gets a reference to the naming container if the naming container implements IDataKeysControl. (Унаследовано от Control) |
| DesignMode | Возвращает значение, указывающее, используется ли элемент управления на поверхности разработки.Gets a value indicating whether a control is being used on a design surface. (Унаследовано от Control) |
| Enabled | Возвращает или задает значение, определяющее, включен ли серверный веб-элемент управления.Gets or sets a value indicating whether the Web server control is enabled. (Унаследовано от WebControl) |
| EnableTheming | Возвращает или задает значение, указывающее, применяются ли темы к этому элементу управления.Gets or sets a value indicating whether themes apply to this control. (Унаследовано от WebControl) |
| EnableViewState | Получает или задает значение, указывающее запрашивающему клиенту, сохраняет ли серверный элемент управления состояние представления и состояние представления своих дочерних элементов управления.Gets or sets a value indicating whether the server control persists its view state, and the view state of any child controls it contains, to the requesting client. (Унаследовано от Control) |
| Events | Возвращает список делегатов обработчиков событий элемента управления.Gets a list of event handler delegates for the control. Это свойство доступно только для чтения.This property is read-only. (Унаследовано от Control) |
| Font | Возвращает свойства шрифта, связанные с серверным веб-элементом управления.Gets the font properties associated with the Web server control. (Унаследовано от WebControl) |
| ForeColor | Возвращает или задает основной цвет (обычно это цвет текста) для серверного веб-элемента управления.Gets or sets the foreground color (typically the color of the text) of the Web server control. (Унаследовано от WebControl) |
| GroupName | Получает или задает имя группы, к которой принадлежит переключатель.Gets or sets the name of the group that the radio button belongs to. |
| HasAttributes | Получает значение, определяющие наличие атрибутов у элемента управления.Gets a value indicating whether the control has attributes set. (Унаследовано от WebControl) |
| HasChildViewState | Возвращает значение, которое указывает на наличие сохраненных параметров состояния представления у дочернего элемента серверного элемента управления.Gets a value indicating whether the current server control’s child controls have any saved view-state settings. (Унаследовано от Control) |
| Height | Получает или задает высоту серверного веб-элемента управления.Gets or sets the height of the Web server control. (Унаследовано от WebControl) |
| ID | Возвращает или задает программный идентификатор, назначенный серверному элементу управления.Gets or sets the programmatic identifier assigned to the server control. (Унаследовано от Control) |
| IdSeparator | Возвращает символ, используемый для разделения идентификаторов элементов управления.Gets the character used to separate control identifiers. (Унаследовано от Control) |
| InputAttributes | Возвращает ссылку на коллекцию атрибутов для обработанного элемента ввода в элементе управления CheckBox.Gets a reference to the collection of attributes for the rendered input element of the CheckBox control. (Унаследовано от CheckBox) |
| IsChildControlStateCleared | Возвращает значение, указывающее, имеют ли элементы управления в этом элементе управления состояние элемента управления.Gets a value indicating whether controls contained within this control have control state. (Унаследовано от Control) |
| IsEnabled | Возвращает значение, определяющее, включен ли элемент управления.Gets a value indicating whether the control is enabled. (Унаследовано от WebControl) |
| IsTrackingViewState | Возвращает значение, отражающее сохранение изменений в состояние представления серверного элемента управления.Gets a value that indicates whether the server control is saving changes to its view state. (Унаследовано от Control) |
| IsViewStateEnabled | Возвращает значение, указывающее, используется ли состояние представления для этого элемента управления.Gets a value indicating whether view state is enabled for this control. (Унаследовано от Control) |
| LabelAttributes | Возвращает ссылку на коллекцию атрибутов для обработанного элемента LABEL в элементе управления CheckBox.Gets a reference to the collection of attributes for the rendered LABEL element of the CheckBox control. (Унаследовано от CheckBox) |
| LoadViewStateByID | Возвращает значение, указывающее, участвует ли элемент управления в загрузке состояния представления ID вместо индекса.Gets a value indicating whether the control participates in loading its view state by ID instead of index. (Унаследовано от Control) |
| NamingContainer | Возвращает ссылку на контейнер именования элемента управления, создающий уникальное пространство имен для различения серверных элементов управления с одинаковыми значениями свойства ID.Gets a reference to the server control’s naming container, which creates a unique namespace for differentiating between server controls with the same ID property value. (Унаследовано от Control) |
| Page | Возвращает ссылку на экземпляр Page, содержащий серверный элемент управления.Gets a reference to the Page instance that contains the server control. (Унаследовано от Control) |
| Parent | Возвращает ссылку на родительский элемент управления серверного элемента управления в иерархии элементов управления страницы.Gets a reference to the server control’s parent control in the page control hierarchy. (Унаследовано от Control) |
| RenderingCompatibility | Возвращает значение, которое задает версию ASP.NET, с которой совместим созданный HTML.Gets a value that specifies the ASP.NET version that rendered HTML will be compatible with. (Унаследовано от Control) |
| Site | Возвращает сведения о контейнере, который содержит текущий элемент управления при визуализации на поверхности конструктора.Gets information about the container that hosts the current control when rendered on a design surface. (Унаследовано от Control) |
| SkinID | Возвращает или задает обложку, применяемую к элементу управления.Gets or sets the skin to apply to the control. (Унаследовано от WebControl) |
| Style | Возвращает коллекцию атрибутов текста, которые будут отображены в виде атрибута стиля на внешнем теге серверного веб-элемента управления.Gets a collection of text attributes that will be rendered as a style attribute on the outer tag of the Web server control. (Унаследовано от WebControl) |
| SupportsDisabledAttribute | Получает значение, указывающее, должен ли элемент управления устанавливать для атрибута |
| TabIndex | Возвращает или задает индекс перехода по клавише Tab для серверного веб-элемента управления.Gets or sets the tab index of the Web server control. (Унаследовано от WebControl) |
| TagKey | Возвращает значение HtmlTextWriterTag, которое соответствует этому элементу управления веб-сервера.Gets the HtmlTextWriterTag value that corresponds to this Web server control. Это свойство используется преимущественно разработчиками элементов управления.This property is used primarily by control developers. (Унаследовано от WebControl) |
| TagName | Возвращает имя тега элемента управления.Gets the name of the control tag. Это свойство используется преимущественно разработчиками элементов управления.This property is used primarily by control developers. (Унаследовано от WebControl) |
| TemplateControl | Возвращает или задает ссылку на шаблон, содержащий этот элемент управления.Gets or sets a reference to the template that contains this control. (Унаследовано от Control) |
| TemplateSourceDirectory | Возвращает виртуальный каталог Page или UserControl, содержащий текущий серверный элемент управления.Gets the virtual directory of the Page or UserControl that contains the current server control. (Унаследовано от Control) |
| Text | Возвращает или задает текстовую подпись, связанную с объектом CheckBox.Gets or sets the text label associated with the CheckBox. (Унаследовано от CheckBox) |
| TextAlign | Возвращает или задает выравнивание текстовой подписи, связанной с элементом управления CheckBox.Gets or sets the alignment of the text label associated with the CheckBox control. (Унаследовано от CheckBox) |
| ToolTip | Возвращает или задает текст, который отображается при наведении указателя мыши на серверный веб-элемент управления.Gets or sets the text displayed when the mouse pointer hovers over the Web server control. (Унаследовано от WebControl) |
| UniqueID | Возвращает уникальный идентификатор серверного элемента управления в иерархии.Gets the unique, hierarchically qualified identifier for the server control. (Унаследовано от Control) |
| ValidateRequestMode | Возвращает или задает значение, указывающее, проверяет ли элемент управления полученный из браузера клиентский ввод на предмет потенциально опасных значений.Gets or sets a value that indicates whether the control checks client input from the browser for potentially dangerous values. (Унаследовано от Control) |
| ValidationGroup | Получает или задает группу элементов управления, для которых элемент управления CheckBox инициирует проверку при обратной передаче на сервер.Gets or sets the group of controls for which the CheckBox control causes validation when it posts back to the server. (Унаследовано от CheckBox) |
| ViewState | Возвращает словарь сведений о состоянии, позволяющих сохранять и восстанавливать состояние представления серверного элемента управления при нескольких запросах одной и той же страницы.Gets a dictionary of state information that allows you to save and restore the view state of a server control across multiple requests for the same page. (Унаследовано от Control) |
| ViewStateIgnoresCase | Возвращает значение, указывающее, является ли объект StateBag нечувствительным к регистру.Gets a value that indicates whether the StateBag object is case-insensitive. (Унаследовано от Control) |
| ViewStateMode | Возвращает или задает режим состояния представления данного элемента управления.Gets or sets the view-state mode of this control. (Унаследовано от Control) |
| Visible | Получает или задает значение, указывающее, отрисовывается ли серверный элемент управления как пользовательский интерфейс на странице.Gets or sets a value that indicates whether a server control is rendered as UI on the page. (Унаследовано от Control) |
| Width | Получает или задает ширину серверного веб-элемента управления.Gets or sets the width of the Web server control. (Унаследовано от WebControl) |
| AddAttributesToRender(HtmlTextWriter) | Добавляет атрибуты и стили HTML элемента управления CheckBox, которые должны преобразовываться для просмотра в указанном потоке вывода.Adds the HTML attributes and styles of a CheckBox control to be rendered to the specified output stream. (Унаследовано от CheckBox) |
| AddedControl(Control, Int32) | Вызывается после добавления дочернего элемента управления в коллекцию Controls объекта Control.Called after a child control is added to the Controls collection of the Control object. (Унаследовано от Control) |
| AddParsedSubObject(Object) | Уведомляет серверный элемент управления, что элемент XML или HTML был проанализирован, и добавляет элемент в серверный элемент управления объекта ControlCollection.Notifies the server control that an element, either XML or HTML, was parsed, and adds the element to the server control’s ControlCollection object. (Унаследовано от Control) |
| ApplyStyle(Style) | Копирует любой непустой элемент указанного стиля в элемент управления Веба, перезаписывая уже существующие элементы стиля.Copies any nonblank elements of the specified style to the Web control, overwriting any existing style elements of the control. Этот метод, в основном, используется разработчиками элементов управления.This method is primarily used by control developers. (Унаследовано от WebControl) |
| ApplyStyleSheetSkin(Page) | Применяет свойства стиля, определенные в таблице стилей страницы, к элементу управления.Applies the style properties defined in the page style sheet to the control. (Унаследовано от Control) |
| BeginRenderTracing(TextWriter, Object) | Запускает трассировку во время разработки данных отрисовки.Begins design-time tracing of rendering data. (Унаследовано от Control) |
| BuildProfileTree(String, Boolean) | Собирает сведения о серверном элементе управления и доставляет их свойству Trace, которое отображается при включенной на странице трассировке.Gathers information about the server control and delivers it to the Trace property to be displayed when tracing is enabled for the page. (Унаследовано от Control) |
| ClearCachedClientID() | Задает для кэшированного свойства ClientID значение |
| ClearChildControlState() | Удаляет сведения о состоянии элемента управления для дочерних элементов управления серверного элемента управления.Deletes the control-state information for the server control’s child controls. (Унаследовано от Control) |
| ClearChildState() | Удаляет сведения о состоянии элемента управления и состоянии представления для всех дочерних элементов серверного элемента управления.Deletes the view-state and control-state information for all the server control’s child controls. (Унаследовано от Control) |
| ClearChildViewState() | Удаляет сведения о состоянии представления для всех дочерних элементов серверного элемента управления.Deletes the view-state information for all the server control’s child controls. (Унаследовано от Control) |
| ClearEffectiveClientIDMode() | Задает для свойства ClientIDMode текущего экземпляра элемента управления и любых его дочерних элементов управления значение Inherit.Sets the ClientIDMode property of the current control instance and of any child controls to Inherit. (Унаследовано от Control) |
| CopyBaseAttributes(WebControl) | Копирует не инкапсулированные объектом Style свойства из указанного серверного веб-элемента управления веб-сервера в элемент управления веб-сервера, откуда вызывается этот метод.Copies the properties not encapsulated by the Style object from the specified Web server control to the Web server control that this method is called from. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| CreateChildControls() | Вызывается платформой страницы ASP.NET для уведомления серверных элементов управления, использующих составную реализацию, о необходимости создания дочерних элементов управления, содержащихся в них для обратной передачи или отрисовки.Called by the ASP.NET page framework to notify server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering. (Унаследовано от Control) |
| CreateControlCollection() | Создает новый объект ControlCollection для хранения дочерних элементов управления (литеральных и серверных) серверного элемента управления.Creates a new ControlCollection object to hold the child controls (both literal and server) of the server control. (Унаследовано от Control) |
| CreateControlStyle() | Создает объект стиля, который используется внутри класса WebControl для реализации всех относящихся к стилю свойств.Creates the style object that is used internally by the WebControl class to implement all style related properties. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| DataBind() | Привязывает источник данных к вызываемому серверному элементу управления и всем его дочерним элементам управления.Binds a data source to the invoked server control and all its child controls. (Унаследовано от Control) |
| DataBind(Boolean) | Привязывает источник данных к вызванному серверному элементу управления и всем его дочерними элементами управления с возможностью вызова события DataBinding.Binds a data source to the invoked server control and all its child controls with an option to raise the DataBinding event. (Унаследовано от Control) |
| DataBindChildren() | Привязывает источник данных к дочерним элементам управления серверного элемента управления.Binds a data source to the server control’s child controls. (Унаследовано от Control) |
| Dispose() | Включает серверный элемент управления для выполнения окончательной чистки до освобождения памяти.Enables a server control to perform final clean up before it is released from memory. (Унаследовано от Control) |
| EndRenderTracing(TextWriter, Object) | Завершает трассировку во время разработки данных отрисовки.Ends design-time tracing of rendering data. (Унаследовано от Control) |
| EnsureChildControls() | Определяет наличие у серверного элемента управления дочерних элементов управления.Determines whether the server control contains child controls. Если дочерних элементов управления нет, они будут созданы.If it does not, it creates child controls. (Унаследовано от Control) |
| EnsureID() | Создает идентификатор для элементов управления, которые не имеют назначенного идентификатора.Creates an identifier for controls that do not have an identifier assigned. (Унаследовано от Control) |
| Equals(Object) | Определяет, равен ли указанный объект текущему объекту.Determines whether the specified object is equal to the current object. (Унаследовано от Object) |
| FindControl(String) | Выполняет поиск серверного элемента управления с заданным параметром |
| FindControl(String, Int32) | Выполняет поиск в текущем контейнере именования серверного элемента управления с указанным |
| Focus() | Задает фокус ввода на элемент управления.Sets input focus to a control. (Унаследовано от Control) |
| GetDesignModeState() | Возвращает данные времени разработки для элемента управления.Gets design-time data for a control. (Унаследовано от Control) |
| GetHashCode() | Служит хэш-функцией по умолчанию.Serves as the default hash function. (Унаследовано от Object) |
| GetRouteUrl(Object) | Возвращает URL-адрес, соответствующий набору параметров маршрута.Gets the URL that corresponds to a set of route parameters. (Унаследовано от Control) |
| GetRouteUrl(RouteValueDictionary) | Возвращает URL-адрес, соответствующий набору параметров маршрута.Gets the URL that corresponds to a set of route parameters. (Унаследовано от Control) |
| GetRouteUrl(String, Object) | Возвращает URL-адрес, соответствующий набору параметров маршрута и имени маршрута.Gets the URL that corresponds to a set of route parameters and a route name. (Унаследовано от Control) |
| GetRouteUrl(String, RouteValueDictionary) | Возвращает URL-адрес, соответствующий набору параметров маршрута и имени маршрута.Gets the URL that corresponds to a set of route parameters and a route name. (Унаследовано от Control) |
| GetType() | Возвращает объект Type для текущего экземпляра.Gets the Type of the current instance. (Унаследовано от Object) |
| GetUniqueIDRelativeTo(Control) | Возвращает часть с префиксом свойства UniqueID указанного элемента управления.Returns the prefixed portion of the UniqueID property of the specified control. (Унаследовано от Control) |
| HasControls() | Определяет наличие у серверного элемента управления дочерних элементов управления.Determines if the server control contains any child controls. (Унаследовано от Control) |
| HasEvents() | Возвращает значение, указывающее, регистрируются ли события для элемента управления или каких-либо дочерних элементов управления.Returns a value indicating whether events are registered for the control or any child controls. (Унаследовано от Control) |
| IsLiteralContent() | Определяет наличие у серверного элемента управления только текстового содержимого.Determines if the server control holds only literal content. (Унаследовано от Control) |
| LoadControlState(Object) | Восстанавливает сведения о состоянии элемента управления предыдущего запроса страницы, сохраненные методом SaveControlState().Restores control-state information from a previous page request that was saved by the SaveControlState() method. (Унаследовано от Control) |
| LoadPostData(String, NameValueCollection) | Обрабатывает данные обратной передачи для элемента управления RadioButton.Processes postback data for the RadioButton control. |
| LoadPostData(String, NameValueCollection) | Обрабатывает данные обратной передачи для элемента управления CheckBox.Processes the postback data for the CheckBox control. (Унаследовано от CheckBox) |
| LoadViewState(Object) | Загружает предварительно сохраненное состояние представления элемента управления CheckBox.Loads the previously saved view state of the CheckBox control. (Унаследовано от CheckBox) |
| MapPathSecure(String) | Извлекает физический путь, к которому ведет виртуальный путь (абсолютный или относительный).Retrieves the physical path that a virtual path, either absolute or relative, maps to. (Унаследовано от Control) |
| MemberwiseClone() | Создает неполную копию текущего объекта Object.Creates a shallow copy of the current Object. (Унаследовано от Object) |
| MergeStyle(Style) | Копирует любой непустой элемент указанного стиля в элемент управления Веба, но не перезаписывает уже существующие элементы стиля.Copies any nonblank elements of the specified style to the Web control, but will not overwrite any existing style elements of the control. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| OnBubbleEvent(Object, EventArgs) | Определяет, передается ли событие серверного элемента управления вверх по иерархии серверных элементов управления пользовательского интерфейса страницы.Determines whether the event for the server control is passed up the page’s UI server control hierarchy. (Унаследовано от Control) |
| OnCheckedChanged(EventArgs) | Вызывает событие CheckedChanged элемента управления CheckBox.Raises the CheckedChanged event of the CheckBox control. Это позволяет непосредственно обрабатывать событие.This allows you to handle the event directly. (Унаследовано от CheckBox) |
| OnDataBinding(EventArgs) | Вызывает событие DataBinding.Raises the DataBinding event. (Унаследовано от Control) |
| OnInit(EventArgs) | Вызывает событие Init.Raises the Init event. (Унаследовано от Control) |
| OnLoad(EventArgs) | Вызывает событие Load.Raises the Load event. (Унаследовано от Control) |
| OnPreRender(EventArgs) | Вызывает событие PreRender.Raises the PreRender event. |
| OnUnload(EventArgs) | Вызывает событие Unload.Raises the Unload event. (Унаследовано от Control) |
| OpenFile(String) | Возвращает Stream, используемое для чтения файла.Gets a Stream used to read a file. (Унаследовано от Control) |
| RaiseBubbleEvent(Object, EventArgs) | Присваивает родительскому элементу управления все источники события и сведения о них.Assigns any sources of the event and its information to the control’s parent. (Унаследовано от Control) |
| RaisePostDataChangedEvent() | Вызывает событие CheckedChanged, если свойство Checked было изменено при обратной передаче.Raises the CheckedChanged event, if the Checked property has changed on postback. |
| RaisePostDataChangedEvent() | Вызывает событие OnCheckedChanged(EventArgs), если отправленные данные для элемента управления CheckBox изменились.Invokes the OnCheckedChanged(EventArgs) method when the posted data for the CheckBox control has changed. (Унаследовано от CheckBox) |
| RemovedControl(Control) | Вызывается после удаления дочернего элемента управления из коллекции Controls объекта Control.Called after a child control is removed from the Controls collection of the Control object. (Унаследовано от Control) |
| Render(HtmlTextWriter) | Отображает объект CheckBox на стороне клиента.Displays the CheckBox on the client. (Унаследовано от CheckBox) |
| RenderBeginTag(HtmlTextWriter) | Выводит открывающий HTML-тег элемента управления в указанное средство записи.Renders the HTML opening tag of the control to the specified writer. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| RenderChildren(HtmlTextWriter) | Выводит содержимое дочерних элементов серверного элемента управления в предоставленный объект HtmlTextWriter, который записывает это содержимое для подготовки к просмотру на клиенте.Outputs the content of a server control’s children to a provided HtmlTextWriter object, which writes the content to be rendered on the client. (Унаследовано от Control) |
| RenderContents(HtmlTextWriter) | Выводит содержимое элемента управления в заданный модуль записи.Renders the contents of the control to the specified writer. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| RenderControl(HtmlTextWriter) | Выводит содержимое серверного элемента управления в указанный объект HtmlTextWriter и сохраняет сведения о трассировке элемента управления, если трассировка включена.Outputs server control content to a provided HtmlTextWriter object and stores tracing information about the control if tracing is enabled. (Унаследовано от Control) |
| RenderControl(HtmlTextWriter, ControlAdapter) | Выводит серверный элемент управления в указанный объект HtmlTextWriter, используя указанный объект ControlAdapter.Outputs server control content to a provided HtmlTextWriter object using a provided ControlAdapter object. (Унаследовано от Control) |
| RenderEndTag(HtmlTextWriter) | Отображает закрывающий HTML-тег элемента управления в указанное средство записи.Renders the HTML closing tag of the control into the specified writer. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| ResolveAdapter() | Возвращает адаптер элемента управления, отвечающий за отрисовку определенного элемента управления.Gets the control adapter responsible for rendering the specified control. (Унаследовано от Control) |
| ResolveClientUrl(String) | Возвращает URL-адрес, который может использоваться браузером.Gets a URL that can be used by the browser. (Унаследовано от Control) |
| ResolveUrl(String) | Преобразует URL-адрес в адрес, доступный для клиента.Converts a URL into one that is usable on the requesting client. (Унаследовано от Control) |
| SaveControlState() | Сохраняет любые изменения состояния серверного элемента управления, произошедшие после отправки страницы обратно на сервер.Saves any server control state changes that have occurred since the time the page was posted back to the server. (Унаследовано от Control) |
| SaveViewState() | Сохраняет изменения в состояние представления объекта CheckBox после того, как страница отправлена на сервер.Saves the changes to the CheckBox view state since the time the page was posted back to the server. (Унаследовано от CheckBox) |
| SetDesignModeState(IDictionary) | Задает данные времени разработки для элемента управления.Sets design-time data for a control. (Унаследовано от Control) |
| SetRenderMethodDelegate(RenderMethod) | Назначает делегата обработчика событий для преобразования серверного элемента управления и его содержимого для просмотра в родительский элемент управления.Assigns an event handler delegate to render the server control and its content into its parent control. (Унаследовано от Control) |
| SetTraceData(Object, Object) | Задает данные трассировки для трассировки данных отрисовки во время разработки, используя ключ данных трассировки и значение данных трассировки.Sets trace data for design-time tracing of rendering data, using the trace data key and the trace data value. (Унаследовано от Control) |
| SetTraceData(Object, Object, Object) | Задает данные трассировки для трассировки данных отрисовки во время разработки, используя трассируемый объект, ключ данных трассировки и значение данных трассировки.Sets trace data for design-time tracing of rendering data, using the traced object, the trace data key, and the trace data value. (Унаследовано от Control) |
| ToString() | Возвращает строку, представляющую текущий объект.Returns a string that represents the current object. (Унаследовано от Object) |
| TrackViewState() | Отслеживает изменения состояния представления элемента управления CheckBox для сохранения в объекте элемента управления StateBag.Tracks view-state changes to the CheckBox control so that they can be stored in the control’s StateBag object. Этот объект доступен с помощью свойства ViewState.This object is accessible through the ViewState property. (Унаследовано от CheckBox) |
| CheckedChanged | Происходит, если значение свойства Checked изменяется между отправками на сервер.Occurs when the value of the Checked property changes between posts to the server. (Унаследовано от CheckBox) |
| DataBinding | Происходит при привязке серверного элемента управления к источнику данных.Occurs when the server control binds to a data source. (Унаследовано от Control) |
| Disposed | Происходит при освобождении памяти, занятой серверным элементом управления, т.е. на последнем этапе жизненного цикла серверного элемента управления при запросе страницы ASP.NET.Occurs when a server control is released from memory, which is the last stage of the server control lifecycle when an ASP.NET page is requested. (Унаследовано от Control) |
| Init | Происходит при инициализации серверного элемента управления, который находится на первом этапе его жизненного цикла.Occurs when the server control is initialized, which is the first step in its lifecycle. (Унаследовано от Control) |
| Load | Происходит при загрузке серверного элемента управления в объект Page.Occurs when the server control is loaded into the Page object. (Унаследовано от Control) |
| PreRender | Происходит после загрузки объекта Control, но перед отрисовкой.Occurs after the Control object is loaded but prior to rendering. (Унаследовано от Control) |
| Unload | Происходит при выгрузке серверного элемента управления из памяти.Occurs when the server control is unloaded from memory. (Унаследовано от Control) |
| IAttributeAccessor.GetAttribute(String) | Возвращает атрибуту веб-элемента управления указанное имя.Gets an attribute of the Web control with the specified name. (Унаследовано от WebControl) |
| IAttributeAccessor.SetAttribute(String, String) | Задает атрибуту веб-элемента управления указанное имя и значение.Sets an attribute of the Web control to the specified name and value. (Унаследовано от WebControl) |
| IControlBuilderAccessor.ControlBuilder | Описание этого члена см. в разделе ControlBuilder.For a description of this member, see ControlBuilder. (Унаследовано от Control) |
| IControlDesignerAccessor.GetDesignModeState() | Описание этого члена см. в разделе GetDesignModeState().For a description of this member, see GetDesignModeState(). (Унаследовано от Control) |
| IControlDesignerAccessor.SetDesignModeState(IDictionary) | Описание этого члена см. в разделе SetDesignModeState(IDictionary).For a description of this member, see SetDesignModeState(IDictionary). (Унаследовано от Control) |
| IControlDesignerAccessor.SetOwnerControl(Control) | Описание этого члена см. в разделе SetOwnerControl(Control).For a description of this member, see SetOwnerControl(Control). (Унаследовано от Control) |
| IControlDesignerAccessor.UserData | Описание этого члена см. в разделе UserData.For a description of this member, see UserData. (Унаследовано от Control) |
| IDataBindingsAccessor.DataBindings | Описание этого члена см. в разделе DataBindings.For a description of this member, see DataBindings. (Унаследовано от Control) |
| IDataBindingsAccessor.HasDataBindings | Описание этого члена см. в разделе HasDataBindings.For a description of this member, see HasDataBindings. (Унаследовано от Control) |
| IExpressionsAccessor.Expressions | Описание этого члена см. в разделе Expressions.For a description of this member, see Expressions. (Унаследовано от Control) |
| IExpressionsAccessor.HasExpressions | Описание этого члена см. в разделе HasExpressions.For a description of this member, see HasExpressions. (Унаследовано от Control) |
| IParserAccessor.AddParsedSubObject(Object) | Описание этого члена см. в разделе AddParsedSubObject(Object).For a description of this member, see AddParsedSubObject(Object). (Унаследовано от Control) |
| IPostBackDataHandler.LoadPostData(String, NameValueCollection) | Описание этого члена см. в разделе LoadPostData(String, NameValueCollection).For a description of this member, see LoadPostData(String, NameValueCollection). |
| IPostBackDataHandler.RaisePostDataChangedEvent() | Описание этого члена см. в разделе RaisePostDataChangedEvent().For a description of this member, see RaisePostDataChangedEvent(). |
| FindDataSourceControl(Control) | Возвращает источник данных, связанный с элементом управления данными, для заданного элемента управления.Returns the data source that is associated with the data control for the specified control. |
| FindFieldTemplate(Control, String) | Возвращает шаблон поля для заданного столбца в контейнере именования заданного элемента управления.Returns the field template for the specified column in the specified control’s naming container. |
| FindMetaTable(Control) | Возвращает объект метатаблицы для контейнерного элемента управления данными.Returns the metatable object for the containing data control. |
Переключатели и флажки в PHP
Переключатели radiobutton в PHP
Когда в HTML форме нужно выбрать один из нескольких вариантов, используют элемент HTML формы Radiobutton.
Синтаксис элемента Radiobutton в HTML
<input name=»имя элемента» type=»radio» value=»значение элемента»>Название варианта
Общий синтаксис формы с элементом Radiobutton
<form method=’get’>
<input name=»имя элемента» type=»radio» value=»Значение варианта 1″>Название варианта 1<br>
<input name=»имя элемента » type=»radio» value=» Значение варианта 2″> Название варианта 2<br>
<input name=» имя элемента » type=»radio» value=» Значение варианта 3″> Название варианта 3<br>
…
<input type=’submit’ name=»Submit» value=’Отправить’>
</form>
Название выводится на веб страницу, а значение передаётся в массив $_GET.
После нажатия кнопки с типом submit все данные передаются в PHP обработчик форм.
Синтаксис PHP обработчика radiobutton
<?php
echo $_GET[‘имя элемента’]; // Он выведет значение выбранного варианта для элемента формы Radiobutton
?>
Пример PHP скрипта с использованием элемента HTML формы Radiobutton Задаётся вопрос и даются варианты ответов. При выборе неправильного ответа на веб странице выведется «Неверно», при выборе правильного ответа выведется «Верно». В значение вариантов radiobutton мы вписываем «Верно» или «Неверно»
<form method=’get’>
Кто написал «Война и мир»?<br>
<input name=»answer» type=»radio» value=»Неверно»>А.С. Пушкин<br>
<input name=»answer» type=»radio» value=»Верно»>Л.Н. Толстой<br>
<input name=»answer» type=»radio» value=»Неверно»>М.Ю. Лермонтов<br>
<input type=’submit’ name=»Submit» value=’Отправить’>
</form>
<?php echo $_GET[‘answer’]; ?>
Флажки Checkbox в PHP Подсчет количества выбранных флажков
Когда в HTML форме требуется выбрать несколько вариантов ответа, используется элемент HTML формы Checkbox
Синтаксис элемента Checkbox в HTML форме
<input type=»checkbox» name=»имя массива с ответами[]» value=»значение элемента» />Название варианта ответа <br />
Общий синтаксис HTML формы с элементом Checkbox
<form method=»get»>
<input type=»checkbox» name=»имя массива с ответами[]» value=»Значение 1″ />Название варианта 1<br />
<input type=»checkbox» name=» имя массива с ответами[]» value=»Значение 2″ /> Название варианта 2<br />
<input type=»checkbox» name=»имя массива с ответами[]» value=»Значение 3″ /> Название варианта 3<br />
…
<input type=»submit» name=»formSubmit» value=»Submit» />
</form>
Когда нажата кнопка с типом submit, весь массив элемента checkbox передаётся в массив $_GET С помощью цикла foreach мы перебираем все элементы массива checkbox. Подробно о работе с массивами в PHP Для корректной работы цикла перебора всех вариантов checkbox необходимо осуществлять проверку является ли объект перебираемый в foreach массивом
Синтаксис обработки элемента формы Checkbox
if (is_array($_GET[‘имя массива с ответами’])){
foreach($_GET[‘имя массива с ответами’] as переменная значения)
{
echo переменная значения;
}
}
Чтобы проверить, что элемент не пустой, используется конструкция
if(!empty(элемент)){
Команды;
}
Пример PHP скрипта с использованием флажка Checkbox В примере анализируются ответы и подсчитывается количество выбранных ответов.
<?php
$k=0;
if (is_array($_GET[‘answer’])){
foreach($_GET[‘answer’] as $value)
{
if (!empty($value)) {
$k=$k+1;
}
echo $value, ‘<br>’;
}
echo «Вы знаете {$k} языков программирования», ‘<br>’;
}
?>
<form method=»get»>
Какие вы знаете языки программирования?<br />
<input type=»checkbox» name=»answer[]» value=»C++» />C++<br />
<input type=»checkbox» name=»answer[]» value=»Python» />Python<br />
<input type=»checkbox» name=»answer[]» value=»Pascal» />Pascal <br />
<input type=»submit» name=»formSubmit» value=»Submit» />
</form>
Как узнать какой выбран флажок в HTML форме
Когда требуется узнать какой выбран именно флажок в HTML форме можно в форме использовать для каждого флажка свое имя.
Синтаксис HTML формы c элементами checkbox с уникальными именами флажков
<form method=»get»>
<input type=»checkbox» name=»Имя первого флажка» value=»Значение первого флажка» />Надпись в форме первого флажка<br />
<input type=»checkbox» name=»Имя второго флажка» value=»Значение второго флажка» />Надпись в форме второго флажка<br />
…
<input type=»submit» name=»formSubmit» value=»Submit» />
</form>
Чтобы проверить выбран ли конкретный флажок в форме HTML в PHP обработчике нужно использовать следующую конструкцию
if (!empty($_GET[‘имя флажка’])) { действия;}
Или
if ($_GET[»имя флажка»]==значение этого флажка) {действия;}
Пример обработки в PHP скрипте HTML формы с уникальными именами флажков. Узнаем какие флажки выбраны
<?php
if (!empty($_GET[‘v1’])) { echo ‘Вы выбрали первый флажок <br>’;}
if ($_GET[‘v2’]==2) { echo ‘Вы выбрали второй флажок<br>’;}
if ($_GET[‘v3’]==3) { echo ‘Вы выбрали третий флажок<br>’;}
?>
<form method=»get»>
Выбор флажков<br />
<input type=»checkbox» name=»v1″ value=»1″ />Флажок 1<br />
<input type=»checkbox» name=»v2″ value=»2″ />Флажок 2<br />
<input type=»checkbox» name=»v3″ value=»3″ />Флажок 3<br />
<input type=»submit» name=»formSubmit» value=»Submit» />
</form>
В итоге на веб странице будет выведено
Вернуться к содержанию курса PHP Перейти к примеру обработки формы заказа в PHP >>
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
HTML input type = «radio»
❮ Атрибут типа HTML
Пример
Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:
Определение и использование
определяет переключатель.
Радиокнопки обычно представлены в радиогруппах (набор радиокнопок). описание набора связанных опций). Только один переключатель в группе может быть выбранными одновременно.
Примечание: Радиогруппа должна иметь одно и то же имя (
значение атрибута name ) для обработки как группы. Как только радиогруппа
создан, выбор любого переключателя в этой группе автоматически отменяет выбор любого
другой выбранный переключатель в той же группе.У вас может быть столько радиогрупп
на странице, как хотите, при условии, что каждая группа имеет собственное имя.
Примечание: Атрибут value определяет уникальное значение
связанный с каждой радиокнопкой. Значение не отображается пользователю, но отображается
значение, которое отправляется на сервер при «отправке», чтобы определить, какой переключатель
что было выбрано.
Совет: Всегда добавляйте тег за лучшие практики доступности!
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| type = «радио» | Есть | Есть | Есть | Есть | Есть |
Синтаксис
❮ Атрибут типа HTML
— 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 ();
}, ложный); Попробуйте этот пример и убедитесь, что для группы contact никогда не бывает более одного результата.
В дополнение к общим атрибутам, общим для всех элементов , входы radio поддерживают следующие атрибуты:
| Атрибут | Описание |
|---|---|
проверено | Логическое значение, указывающее, является ли этот переключатель выбранным по умолчанию элементом в группе |
значение | Строка для использования в качестве значения радио при отправке формы, если радио в настоящее время переключено на |
проверено Логический атрибут, который, если он присутствует, указывает, что этот переключатель является выбранным по умолчанию в группе.
В отличие от других браузеров, Firefox по умолчанию сохраняет состояние динамической проверки при загрузке страницы. Используйте атрибут автозаполнения для управления этой функцией.
значение Атрибут 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;
} Наиболее примечательным здесь является использование свойства Appearance (с префиксами, необходимыми для поддержки некоторых браузеров).По умолчанию радиокнопки (и флажки) имеют собственный стиль операционной системы для этих элементов управления. Указав внешний вид : нет , вы можете полностью удалить собственные стили и создать для них свои собственные стили. Здесь мы использовали границу вместе с границей border-radius и переходом , чтобы создать красивый анимированный выбор радио. Также обратите внимание, как псевдокласс : checked используется для определения стилей внешнего вида переключателя при его выборе.
Примечание о совместимости : Если вы хотите использовать свойство внешний вид , вам следует очень внимательно его протестировать. Хотя он поддерживается в большинстве современных браузеров, его реализация сильно различается. В старых браузерах даже ключевое слово none не имеет одинакового эффекта в разных браузерах, а некоторые вообще не поддерживают его. В новейших браузерах различий меньше.
Обратите внимание, что при нажатии на радиокнопку появляется приятный, плавный эффект исчезновения / появления, когда две кнопки меняют состояние.Кроме того, стиль и цвет легенды и кнопки отправки настроены так, чтобы иметь сильный контраст. Возможно, это не тот вид, который вы хотели бы видеть в реальном веб-приложении, но он определенно демонстрирует возможности.
Таблицы BCD загружаются только в браузере
Как создавать радиокнопки в HTML [+ примеры]
Хотя кажется, что каждый год для привлечения посетителей вводятся новые веб-технологии, некоторые из них выдержали испытание временем и не уйду.В этом посте мы обсудим один из таких элементов - скромный переключатель HTML.
От контактных форм до тестов с несколькими вариантами ответов - вы наверняка уже видели переключатели (даже если не знали, как они называются). Эти круглые элементы необходимо знать, если вы хотите собирать информацию о пользователях из внешнего интерфейса вашего веб-сайта.
Удобно, что HTML имеет встроенный тип ввода для переключателей, и реализовать их на странице довольно просто. Здесь мы рассмотрим, что такое переключатели, когда их использовать и как кодировать форму с переключателями в HTML.
Что такое радио-кнопка HTML?
В HTML радиокнопка - это интерактивный элемент страницы для выбора одного варианта из нескольких. Если флажок не установлен, переключатель отображается в виде пустого кружка. При щелчке мышью или выборе с помощью клавиатуры кружок заполняется, указывая на выбор. Радиокнопка сопряжена с меткой (обычно текст или иногда изображение) - это то, что выбирает пользователь, когда выбирает конкретную радиокнопку. .
Радиокнопки почти всегда появляются группами по два или более для обозначения связанных, взаимоисключающих вариантов. В этой группе опций пользователь может выбирать только одну за раз. Это означает, что выбор переключателя отменяет выбор другой выбранной кнопки в группе. Кроме того, пользователи не могут отменить выбор переключателя, щелкнув его. Единственный способ отменить выбор переключателя - выбрать другой вариант в группе.
Радиокнопки и флажки
Радиокнопки похожи на другой распространенный интерактивный элемент - флажок.Различия между этими двумя вариантами невелики, но важно отметить: в то время как переключатели позволяют пользователям выбирать только один вариант для каждой группы, флажки позволяют пользователям выбирать (или «отмечать») один, несколько или ни одного варианта для каждой группы. Пользователи также могут снять флажок, щелкнув его - переключатели не позволяют этого.
Признаюсь, это не самая захватывающая тема. Однако их смешение может вызвать у посетителей серьезное недоумение. Поэтому обязательно используйте радиокнопки для меню «Выбрать одно» и сохраните флажки для своих меню «Выбрать все подходящие» или своих одноразовых вопросов (т.д., «Поставьте отметку, если…»).
Теперь, когда мы понимаем назначение переключателей HTML, давайте узнаем, как их создавать.
Как сделать радиокнопку в HTML
Чтобы создать переключатель в HTML, используйте элемент с типом radio . Это создает единственную радиокнопку, с которой пользователи могут взаимодействовать:
См. Радиокнопку Pen Single от Кристины Перриконе (@hubspot) на CodePen.
Конечно, нам нужно добавить немного больше кода, чтобы сделать это полезным.В частности, нам нужно несколько кнопок и меток для каждой кнопки. Вот как должна выглядеть простая группа переключателей, использующая только HTML:
См. Группу переключателей пера Кристины Перриконе (@hubspot) на CodePen.
Здесь у нас есть три элемента типа radio , а также с некоторыми новыми атрибутами. Также есть новый элемент для каждого . Давайте рассмотрим все, что мы добавили в код.
Во-первых, атрибут id является уникальным идентификатором тега . Его можно использовать в качестве селектора CSS для элемента переключателя, а также он объединяет кнопку с соответствующим ей .
Как уже упоминалось, переключатели располагаются группами. Используйте обязательный атрибут name , чтобы сгруппировать набор связанных переключателей. В приведенном выше примере все имеют одно и то же значение для name , поэтому они рассматриваются как часть одной группы.Это позволяет пользователям выбирать только один вариант в группе за раз - попробуйте его выше.
Затем атрибут value представляет уникальное значение для переключателя. Пользователи его не видят, но отправлено для представления выбранной опции. Например, если форма выше была отправлена с выбранным элементом «17 лет или моложе», система, обрабатывающая форму, получит значение age = child . Если пользователь не выберет какой-либо переключатель, значение не будет отправлено. Если атрибут value отсутствует для выбранной опции, форма отправит значение по умолчанию на .
Обратите внимание, что теги создают только элемент радиокнопки, а не метку. Чтобы пометить радиокнопку, добавьте элемент после элемента и вставьте атрибут для с тем же значением, что и идентификатор id связанного элемента . Затем напишите текст вашей метки в теге .
Хотя использование не является строго необходимым, оно считается оптимальным по двум причинам.Во-первых, семантически богатый элемент делает ваш веб-сайт более доступным для людей, использующих программы чтения с экрана. Он сообщает им, какая метка связана с каким переключателем. Во-вторых, атрибут для позволяет пользователям выбирать радиокнопку, щелкая саму метку в дополнение к кнопке, что упрощает использование вашей формы.
Наконец, теги
(разрыв строки) помещают каждую опцию в новую строку. Попробуйте удалить эти теги в приведенном выше примере, чтобы разместить все параметры в одной строке.
Проверяемый атрибут
У входов радиокнопок есть один дополнительный атрибут, проверил атрибут . Если включена в тег , кнопка будет выбрана по умолчанию.
См. Форму «Переключатель пера с выбором по умолчанию» Кристины Перриконе (@hubspot) на CodePen.
Как разместить радиокнопки HTML в форме
Что хорошего в переключателях, если пользователи не могут отправлять свои ответы? Вот почему радиокнопки обычно находятся внутри HTML-форм.Элемент HTML содержит дочерние элементы, которые собирают вводимые пользователем данные, например .
Чтобы создать базовую форму с переключателями внутри, оберните группу (и) переключателей в тег и включите типа submit внизу. Когда пользователь нажимает «Отправить», его ответы отправляются обработчику формы. Ниже приведен простой пример формы.
См. Форму переключателя пера Кристины Перриконе (@hubspot) на CodePen.
Радио-кнопки: простой элемент для ваших форм
Радиокнопки есть везде в сети. Фактически, они настолько распространены, что HTML имеет для них собственный тип ввода, позволяющий любому, кто знаком с HTML, вставить их на страницу. Пока код написан правильно, браузер будет обрабатывать все основные функции за вас.
В качестве последнего напоминания убедитесь, что вы используете переключатели в правильных случаях. Не забудьте использовать переключатели, если вы хотите, чтобы пользователи выбирали только один вариант из группы, и флажки, если вы хотите, чтобы пользователи могли выбирать несколько вариантов и снимать флажки с их выбора.
input (type = radio) элемент
Специальные атрибуты
автофокус
Логическое значение, указывающее браузеру установить фокус на этот элемент управления, когда документ завершил загрузку или когда отображается диалоговое окно , в котором находится элемент управления. Если атрибут имеет значение «autofocus» или пустая строка («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после загрузки страницы или диалогового окна .
Пример
проверено
Логическое значение, указывающее, следует ли проверять элемент управления по умолчанию, то есть при загрузке страницы или при сбросе формы. Если атрибут принимает значение «checked» или пустую строку («»), или если он просто присутствует, элемент управления будет проверяться по умолчанию.
Пример
отключено
Логическое значение, указывающее, отключен ли элемент управления.Если атрибут принимает значение «отключен» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.
Отключенные элементы управления отображаются серым цветом (если они видны), блокируются от взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются при отправке формы .
Пример
форма
Значение атрибута id формы, с которой связан этот элемент управления.
Этот атрибут является новым в HTML 5 и помогает определять принадлежность элементов управления во вложенных или удаленных формах.
Все переключатели в группе должны принадлежать одной и той же форме или вообще не принадлежать ни одному из. Размещение переключателей в разных формах или документах нарушит их группировку.
Пример
Доход:
название
Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.
В настоящее время значение isindex , ранее использовавшееся особым образом в некоторых браузерах и включенное в стандарт HTML , не допускается в этом атрибуте.
Чтобы набор переключателей принадлежал одной группе, все они должны иметь одинаковое значение в атрибуте name .
Пример
требуется
Логическое значение, указывающее, может ли пользователь оставить все опции в группе снятыми.Если этот атрибут имеет значение "required" или пустую строку (""), или если он просто присутствует, пользователь должен будет выбрать параметр в группе, чтобы иметь возможность отправить форму .
Если этот логический атрибут присутствует в любой из переключателей определенной группы, браузер не разрешит отправку формы, пока одна из кнопок в группе не будет проверена.
Браузер поддерживает атрибут требуется не полностью.Авторам, возможно, придется полагаться на скрипты, чтобы обеспечить кроссбраузерность этой функциональности.
Пример
тип
Значение, указывающее тип поля, которое представляет этот элемент.Есть двадцать два возможных значения (без учета регистра):
- скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
- текст: элемент управления, используемый для ввода однострочного фрагмента текста.
- поиск: то же, что и текст, но для целей поиска.
- tel: контроль, используемый для предоставления телефонного номера. URL-адрес
- : текстовое поле, используемое для ввода единственного и абсолютного URL-адреса .
- электронная почта: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
- пароль: текстовое поле для редактирования паролей, где символы представлены точками. Дата
- : элемент управления для ввода определенной даты.
- месяц: элемент управления для ввода определенного месяца.
- неделя: элемент управления для ввода определенной недели.
- time: элемент управления для ввода определенного времени.
- datetime-local: элемент управления для ввода определенной местной даты и времени.
- число: элемент управления для ввода числа. Диапазон
- : элемент управления для ввода одного или двух чисел в диапазон.
- цвет: элемент управления для ввода цвета. Флажок
- : элемент управления для ввода логического значения (истина / ложь). Радио
- : элемент управления, используемый для выбора одного варианта из множества.
- файл: элемент управления, используемый для загрузки файлов на сервер.
- submit: кнопка, используемая для отправки формы. Изображение
- : то же, что и submit, но с возможностью отображения в виде изображения вместо использования кнопки по умолчанию.
- сброс: кнопка, используемая для сброса элементов управления формы до значений по умолчанию. Кнопка
- : кнопка, не связанная с действием по умолчанию.
Если этого атрибута нет, элемент ведет себя так, как если бы он имел значение «текст».
Пример
значение
Значение для элемента управления, которое будет отправлено агенту обработки вместе со значением атрибута name attributo, только если переключатель установлен.
Пример
Создайте RadioButton с помощью HtmlHelper в ASP.Чистая MVC
Узнайте, как создать элемент управления переключателем с помощью HtmlHelper в режиме бритвы в этом разделе.
Класс HtmlHelper включает два метода расширения для создания элемента управления HTML в виде бритвы: RadioButtonFor () и RadioButton () .
В этой статье мы будем использовать следующий класс модели Student .
общественный класс Студент
{
public int StudentId {получить; задавать; }
общедоступная строка StudentName {получить; задавать; }
общедоступная строка Пол {получить; задавать; }
}
Html.RadioButtonFor ()
Метод расширения Html.RadioButtonFor - это строго типизированный метод расширения.
Он создает элемент управления для свойства, указанного с помощью лямбда-выражения.
Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках RadioButtonFor ().
@model Student
@ Html.RadioButtonFor (m => m.Gender, "Мужской")
@ Html.RadioButtonFor (m => m.Gender, «Женский»)
<вход проверен = "проверен"
name = "Пол"
type = "радио"
value = "Мужской" />
<ввод
name = "Пол"
type = "радио"
value = "Female" /> В приведенном выше примере первый параметр - это лямбда-выражение, указывающее свойство модели, которое необходимо связать с элементом управления-переключателем.В приведенном выше примере мы создали два переключателя для свойства Gender .
Таким образом, он генерирует два элемента управления с идентификатором и именем, установленным на имя свойства Gender .
Второй параметр - это значение, которое будет отправлено на сервер при отправке формы, здесь Male будет отправлено, если выбран первый переключатель, и Female будет отправлен, если будет выбран второй переключатель.
RadioButton ()
Метод Html.RadioButton () создает элемент переключателя с указанным именем, логическими атрибутами isChecked и html.
Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода RadioButton ().
Мужской: @ Html.RadioButton ("Пол", "Мужской")
Женский: @ Html.RadioButton ("Пол", "Женский")
Мужской:
Женский: <ввод
name = "Пол"
type = "радио"
value = "Female" /> тип ввода = радио - радио-кнопка
Ⓘ тип ввода = радио - переключатель # T
Вход
элемент
с атрибутом типа, чей
значение " радио " представляет
выбор одного элемента из списка элементов (радио
кнопка).
Разрешенные атрибуты #
- Ⓘ глобальные атрибуты
- Любые атрибуты, разрешенные глобально.
- Ⓘ имя = строка #
- Часть имени пары имя / значение, связанной с этим элемент для отправки формы.
- Ⓘ отключен = "отключен" или "" (пустая строка) или пустая #
- Указывает, что элемент представляет отключенный контроль.
- Ⓘ форма = Ссылка на идентификатор НОВЫЙ #
- Стоимость я бы атрибут на форма с которым нужно связать элемент.
- type = "радио" #
- Указывает, что его Вход элемент представляет выбор одного элемента из списка элементов.
- Ⓘ проверено = "проверено" или "" (пустая строка) или пусто #
- Указывает, что элемент представляет выбранный контроль.
- значение = строка #
- Задает значение для Вход элемент.
- Ⓘ автофокус = «автофокус» или "" (пустая строка) или пустая НОВЫЙ #
- Указывает, что элемент представляет собой элемент управления, для которого UA предназначен для сосредоточения внимания, как только документ загружен.
- Ⓘ требуется = "обязательный" или "" (пустая строка) или пустая НОВЫЙ #
- Указывает, что элемент является обязательной частью формы подчинение.
Дополнительные ограничения и предостережения #
- Ввод интерактивного элемента не должен появляются как потомок элемента a.
- Ввод интерактивного элемента не должен появляются как потомок элемента кнопки.
- Любой элемент ввода, являющийся потомком элемента метки с атрибутом for должен иметь Значение идентификатора, соответствующее этому атрибуту.
- Атрибут списка входного элемента должен ссылаться на элемент списка данных.
- Ввод элемента с типом атрибута со значением «кнопка» должно иметь непустое значение атрибута.
- Атрибут usemap во входном элементе устарел. Используйте элемент img вместо элемента ввода для карт изображений.
- Атрибут align входного элемента устарел. Вместо этого используйте CSS.
Разрешенные родительские элементы #
любой элемент, который может содержать элементы фразировки
Радиокнопка- Amazon SageMaker
Кнопка, которая может быть отмечена или снята.Когда радиокнопки находятся внутри
радио
group, только один переключатель в группе может быть отмечен в любое время. Следующие
является
пример того, как настроить элемент толпы-радио-кнопка внутри толпа-радиогруппа элемент.
См. Интерактивный пример шаблона HTML, в котором используется этот элемент HTML Crowd в CodePen.
Ниже приведен пример синтаксиса, который можно использовать с элемент. Скопируйте следующий код и сохраните его в файле с
расширение .html . Откройте файл в любом браузере, чтобы просмотреть и поработать с ним.
шаблон.
<форма толпы>
Технология
Политика
Предыдущий пример можно увидеть в шаблоне настраиваемой задачи рабочего в этом примере GitHub: Пользовательский шаблон задания по распознаванию меток.
Радиокнопки Crowd HTML Element не поддерживают тег HTML, требуется . Делать
требуется выбор переключателя, используйте элементы для создания
радиокнопки и добавьте требуемый тег . Имя Атрибут для всех элементы, которые принадлежат той же группе переключателей, должны быть
такой же.Например, следующий шаблон требует, чтобы пользователь выбрал переключатель
в животное тип группа перед подачей.
<форма толпы>
Выберите тип животного:
Внимательно прочтите задание и осмотрите изображение.
Выберите соответствующий ярлык, который лучше всего подходит к изображению.
<краткие инструкции>
Внимательно прочтите задание и осмотрите изображение.
Выберите соответствующий ярлык, который лучше всего подходит к изображению.
Атрибуты
Этот элемент поддерживает следующие атрибуты.
проверено
Логический переключатель, который, если он присутствует, отображает переключатель как отмеченный.
отключено
Логический переключатель, который, если он присутствует, отображает кнопку как отключенную и предотвращает ее. от того, чтобы быть проверил.
название
Строка, которая используется для идентификации ответа, отправленного работником. Это значение будет соответствовать ключу в объекте JSON, который определяет ответ.
Если вы используете кнопки вне радиогруппы толпы
элемент, но с тем же именем , строкой и другим значением , строкой ,
объект name в выходных данных будет содержать логическое значение для каждой строки value .Чтобы гарантировать, что
выбрана только одна кнопка в группе, сделайте их детьми крауд-радио-группы
элемент и используйте разные значения имени.
значение
Имя свойства для логического значения элемента.Если не указано иное, в качестве
по умолчанию, например {"<имя>": {"<значение>": <истина или ложь>}} .
Иерархия элементов
Этот элемент имеет следующие родительские и дочерние элементы.
Выход
Выводит объект со следующим шаблоном: {"<имя>": {"<значение>": <истина или ложь>}} . Если вы используете кнопки вне радиогруппы
элемент, но с тем же именем , строкой и другим значением , строкой ,
объект имени будет содержать логическое значение для каждой строки value .Чтобы гарантировать, что
в группе кнопок выбрана только одна, сделайте их дочерними для радиогруппы толпы
элемент и используйте разные значения имени.
Пример Пример вывода этого элемента
[
{
"btn1": {
"Да, верно
},
"btn2": {
«нет»: ложь
}
}
] 