Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Radio checked input: 🤷🏽‍♀️ Page not found | MDN Web Docs

On

Radio checked input: 🤷🏽‍♀️ Page not found | MDN Web Docs

By alexxlab

Содержание

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

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

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

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

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

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

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

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

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

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

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

$remember = $_POST["remember"];

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

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

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


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

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


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

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

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

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


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

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


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

Список

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


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

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

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


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

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


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

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

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

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

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

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

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

Дизайн-развитие по подписке

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

Присоединиться

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

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

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

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

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

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

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

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

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

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

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

  1. Квадрат
  2. Круг
  3. Шестиугольник
  4. Треугольник

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

  1. Радиокнопки
  2. Флажки

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

  1. Радиокнопки
  2. Флажки

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

  1. Радиокнопка
  2. Флажок

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

  1. A
  2. B

ОТВЕТЫ:
1): 3. Неограниченное кол-во
2): 2. Круг
3): 2. Флажки
4): 1. Радиокнопки
5): 2. Флажок
6): 1. A

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

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

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

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

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

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

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

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

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

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

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

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

Радиокнопки и флажки с изображениями. Изображения: (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux

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

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

Селекторы с сеткой изоражений. Изображения (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Состояния

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нажато (Pressed)

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

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

Выбрано (Selected)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот вариант предложил Thomas Veit, спасибо ему:)
6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором

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

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

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

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

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

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

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

  1. Один элемент

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

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

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

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

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

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

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

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

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

Стилизация элементов checkbox и radio button на CSS3


Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажем, как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3.

HTML разметка


Расположим элементы на странице: 


	
<!-- Элемент флажок -->
<input type="checkbox" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

<!-- Элемент переключатель -->
<input type="radio" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>


Здесь ничего особенного, каждому элементу задаем id и name, также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label, вставляем span. Для чего именно, написано ниже.

Правила CSS


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


	
input[type="checkbox"] {
    display:none;
}


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


	
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}


С помощью CSS селектора выбираем все span внутри тега label, которые принадлежат элементам input с типом >checkbox (т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):


Для выбранных span задаем высоту и ширину в 19px, и располагаем фоновое изображение.


Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked). Для этого просто смещаем данное изображение влево на 19px: 


	
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}


Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio».

Голосов: 967 | Просмотров: 9091

Переключение radio кнопки и checkbox нажатием на подпись в HTML

При создании HTML формы часто применяются радио кнопки (radio) и переключатели (checkbox). В самом простом виде они добавляются следующими тегами:

<input type="radio" name="mycheck" value="1"/> Значение 1<br/>
<input type="radio" name="mycheck" value="2"/> Значение 2<br/>
<input type="radio" name="mycheck" value="3"/> Значение 3

 

<input type="checkbox" name="mycheck1" value="1"/> Значение 1<br/>
<input type="checkbox" name="mycheck2" value="2"/> Значение 2<br/>
<input type="checkbox" name="mycheck3" value="3"/> Значение 3

В результате получается следующие формы:

Значение 1
Значение 2
Значение 3
Значение 1
Значение 2
Значение 3

В общем-то, все работает и можно оставить все так, но все же, есть некоторые неудобства. Для использования установленных переключателей, посетителю страницы необходимо нажать именно на них. Учитывая размеры этих переключателей, попадать в них достаточно неудобно. Например, в windows-программах аналогичные компоненты имеют собственные поля подписи, и переключение срабатывает как по нажатию на сам переключатель, так и по его подписи.

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

Первый способ – размещение переключателя и его подписи в пределах одного тега:

<label>
<input type="radio" name="mycheck" value="1"/> Значение 1<br/>
</label>
<label>
<input type="radio" name="mycheck" value="2"/> Значение 2<br/>
</label>
<label>
<input type="radio" name="mycheck" value="3"/> Значение 3
</label>

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

Второй способ – обрамление подписи тегами LABEL с указанием для них атрибута FOR, который должен содержать ID нужного переключателя:

<input type="checkbox" name="mycheck1" value="1"/>
<label for="ch2">Значение 1</label><br/>
<input type="checkbox" name="mycheck2" value="2"/>
<label for="ch3">Значение 2</label><br/>
<input type="checkbox" name="mycheck3" value="3"/>
<label for="ch4">Значение 3</label>

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

Значение 1
Значение 2
Значение 3
Значение 1
Значение 2
Значение 3

форм — селектор CSS для метки

отмеченного переключателя

Я забыл, где впервые увидел это упоминание, но вы действительно можете встроить свои метки в контейнер в другом месте, если у вас установлен атрибут for = . Итак, давайте посмотрим образец на SO:

  * {
  отступ: 0;
  маржа: 0;
  цвет фона: # 262626;
  цвет белый;
}

.переключатель {
  дисплей: нет;
}

#filter {
  дисплей: гибкий;
  justify-content: center;
}

.filter-label {
  дисплей: встроенный блок;
  граница: сплошной зеленый цвет 4px;
  отступ: 10 пикселей 20 пикселей;
  размер шрифта: 1.4em;
  выравнивание текста: центр;
  курсор: указатель;
}

главный {
  ясно: слева;
}

.содержание {
  обивка: 3% 10%;
  дисплей: нет;
}

h2 {
  размер шрифта: 2em;
}

.Дата {
  отступ: 5 пикселей 30 пикселей;
  стиль шрифта: курсив;
}

.filter-label: hover {
  цвет фона: # 505050;
}

# Feature-radio: проверено ~ # filter.признакам,
# personal-radio: проверено ~ # filter .personal,
# tech-radio: проверено ~ # filter .tech {
  цвет фона: зеленый;
}

# Feature-radio: checked ~ main .featured {
  дисплей: блок;
}

# personal-radio: проверено ~ main .personal {
  дисплей: блок;
}

# tech-radio: проверено ~ main .tech {
  дисплей: блок;
}  
  



<заголовок>
  
  
  


<основной>
  <статья>
    <заголовок>
      
 Крутые штуки 

      
 Сегодня 

    

    

      Я показываю классные вещи в этой статье!
<статья> <заголовок>

Не так круто

Вторник

По какой-то причине это не так круто :(;

<статья> <заголовок>

Классная техническая статья

В прошлый понедельник

В этой статье есть много интересных вещей!

<статья> <заголовок>

Классная личная статья

Две пятницы назад

В этой статье рассказывается о том, как я устроился на работу в крутой стартап, потому что я рок!

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

Поскольку элемент label фактически не использует псевдоселектор : checked , не имеет значения, что метки хранятся в заголовке .Дополнительное преимущество состоит в том, что, поскольку заголовок является родственным элементом, мы можем использовать общий родственный селектор ~ для перехода от входного элемента [type = radio]: checked DOM element в контейнер заголовка , а затем используйте селекторы потомков / потомков для доступа к меткам непосредственно, позволяет стилизовать их, когда выбраны их соответствующие переключатели / флажки .

Мы можем не только стилизовать метки, но также стили другого контента, который может быть потомком одноуровневого контейнера относительно всех входных s.А теперь, пока вы все ждали, JSFIDDLE! Идите туда, поиграйте с ним, заставьте его работать на вас, узнайте, почему он работает, сломайте его, делайте то, что вы делаете!

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

флажков и радиокнопок - грозные формы

Флажки

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

Стандартные полевые опции

Поля

Checkbox и Radio Button имеют следующие стандартные параметры:

- Премиум-функция -

Опции для конкретных мест

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

Добавить опцию

Нажмите эту кнопку, чтобы добавить новую опцию в свое поле.

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

Опции массового редактирования

Используйте ссылку "Массовое редактирование", чтобы быстро добавить, отредактировать или удалить множество параметров.

Щелкните ссылку «Параметры массового редактирования» и введите или вставьте параметры в появившееся поле. Вы также можете использовать эту опцию, чтобы заполнить выбранные вами поля готовым списком стран, U.Южные штаты, аббревиатуры штатов США, возрастные диапазоны, уровни удовлетворенности, важности или согласия.

Для массового редактирования опций с отдельными значениями поместите метку, за которой следует символ |, а затем значение. Например:

Отлично | 10
Очень хорошо | 8
Хорошо | 5
Не очень хорошо | 3
Плохо | 1

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

- Премиум-функция -

Добавить другие

Разрешить пользователям вводить произвольный текст с опцией «Другое».Щелкните поле «Добавить другое», чтобы добавить этот параметр.

Использовать отдельные значения

Установите этот флажок, если вы хотите сохранить запись как значение, отличное от выбранного значения. Например, если ваш пользователь выбирает «черная футболка», вы можете сохранить значение как «черная футболка за 25 долларов США».
Подробнее об отдельных ценностях.

Вариант расположения

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

Выбор пределов

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

Значения по умолчанию и значки полей

Установите динамическое значение по умолчанию в поле флажка или переключателя. Если вы хотите получить значение из записи, см. Страницу «Получить значение из записи».Если вы хотите установить значение по умолчанию, см. Страницу «Значения по умолчанию».

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

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

Полевая укладка

Некоторые стили для флажков и радиополей доступны в Formidable → Styles → Check box & Radio Fields .Вы можете настроить стиль меток параметров и настроить выравнивание параметров по умолчанию.

Чтобы узнать больше о стилизации вашей формы, см. Страницу визуального стилизатора формы.

Добавить изображения в флажки или радио

Узнайте, как использовать переключатели или флажки с изображениями.

Посмотрите, как заменить радиокнопки изображениями в формах WordPress в блоге в качестве примера.

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

Если вы хотите отобразить поля флажка или радио в сетке, как показано ниже, узнайте, как создать сетку.

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

Изменить параметры флажка

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

Скрыть метки опций

Если вы хотите скрыть метки флажков или переключателей, см. Раздел «Скрыть метки параметров».

Включите ссылку, чтобы принять условия

У вас есть страница условий и положений на вашем сайте, на которую вы хотите сделать ссылку и требовать согласия в форме?

  1. Добавьте поле флажка в форму
  2. Добавьте новую опцию, которая выглядит так:
     Я принимаю  условия пользовательского соглашения .
  3. В настройках поля отметьте обязательное поле и установите положение метки «нет».
  4. Выберите вариант «сохранять отдельные значения» и измените сохраненное значение на что-нибудь без HTML для достижения наилучших результатов, например «Я согласен».

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

Отображение флажка и радиополя

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

  • Показать отправленные параметры : отобразить значение, отправленное в поле флажка или переключателя.
     [x]

    Замените x идентификатором или ключом поля флажка или переключателя.

  • Отображение сохраненного значения : Если используются отдельные значения и вы хотите отобразить сохраненное значение , используйте show = "value":
     [x show = "значение"]

    Замените x идентификатором или ключом поля флажка или переключателя.

  • Разделитель : используйте другой разделитель для значений поля флажка.По умолчанию это будет запятая.
     [x sep = ","]

    Замените x идентификатором или ключом поля флажка.

Показать невыбранные параметры

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

 [if x not_like = "Easy"] Легко [/ if x]
[if x not_like = "Moderate"] Moderate [/ if x]
[if x not_like = "Сложно"] Сложно [/ if x]

Замените x идентификатором или ключом флажка или радиополя.Замените Легкий, Умеренный, Сложный полевыми опциями. Если поле x НЕ содержит флажка или переключателя, то будет отображаться содержимое между открывающим и закрывающим операторами If.

Отображать текст между вариантами

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

  1. Перейдите в настройки формы → вкладка «Настроить HTML ».
  2. Найдите поле для кнопки флажка или переключателя.
  3. Найдите шорткод [input] в HTML-коде.
  4. Измените [ввод] , пока не разделите каждую опцию в поле. Затем вы можете добавить любой желаемый текст между опциями.
      [input opt ​​= 1]
[input opt ​​= 2]
[input opt ​​= 3]
...

Отображение значений, проверенных в представлении

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

 

☑- [x sep = "
 
 ☑-"]

Где x - идентификатор поля вашего флажка.

Отображение значений, отмеченных в столбцах

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

В поле Просмотр содержимого добавьте следующее:

 
 [100 sep = "
"]

Замените 100 идентификатором или ключом поля флажка.

В Formidable → Styles → Custom CSS добавьте следующее:

 .frm-three-columns {
  -webkit-columns: 100px 3; / * Chrome, Safari, Opera * /
  -moz-columns: 100px 3; /* Fire Fox */
  столбцы: 100 пикселей 3;
}

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

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

    Фрагменты

  2. ›
  3. HTML
  4. ›
  5. Как присвоить проверенное начальное значение радиокнопке

Решение с атрибутом checked¶

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

и добавляем в него элементы

. Внутри наших элементов

мы добавляем теги и

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *