Радиокнопки html: Переключатели | htmlbook.ru

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

• HTML формы
• Как работают HTML формы
• HTML тег <form>
• Элементы <input>
• Элемент <textarea>
• Выпадающий список
• Элементы <fieldset> и <legend>
• Элемент <label>

HTML формы

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

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

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

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

1. посетитель заходит на страницу с формой, заполняет ее и отсылает
2. браузер отсылает данные из формы на сервер
3. сервер получает данные и передает их сценарию для обработки
4. серверный сценарий обрабатывает данные и создает новую HTML-страницу с ответом, которую он передает обратно веб-серверу
5. веб-сервер отправляет страницу с ответом обратно браузеру
6. браузер получает страницу и отображает ее

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 — Почему не отображаются radio button

Вопрос задан 11 месяцев назад

Изменён 11 месяцев назад

Просмотрен 135 раз

Я пробую сделать маленький прототип из radio buttons. На месте инициалов (Роман) будут приходить данные из backend и с помощью radiobutton я буду выбирать их.

Проблема в том, что radio button у меня вообще не отображается на странице. Скажите, в чем проблема, почему они вообще не видны?

<main>
  <label>
    <input type="radio" name="first_user_of_similar's_user">
    Roman Dyshko
  </label>
  <label>
    <input type="radio" name="second_user_of_similar's_user">
    Roman Dyshko
  </label>
</main>

• html
• css
• angular
• radiobutton

3

Очевидно, у Вас что-то со стилями (возможно, для radiobutton где-то прописано display: none). Потому что если просто вставить Вашу разметку в сниппет, то всё отображается.

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

<main>
  <label>
    <input type="radio" name="first_user_of_similar's_user">
    Roman Dyshko
  </label>
  <label>
    <input type="radio" name="second_user_of_similar's_user">
    Roman Dyshko
  </label>
</main>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

толпа-радио-кнопка — Amazon SageMaker

Кнопка, которая может быть либо отмечена, либо снята. Когда радиокнопки находятся внутри радио group, в любой момент времени может быть выбрана ровно одна радиокнопка в группе. Ниже приводится пример того, как настроить элемент crowd-radio-button внутри толпа-радио-группа элемент.

См. интерактивный пример шаблона HTML, в котором используется этот HTML-элемент Crowd в CodePen.

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

  <массовая форма>
<массовая радиогруппа>
    Технологии
    Политика

 

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

Переключатели Crowd HTML Element не поддерживают тег HTML, требуется . Делать требуется выбор переключателя, используйте элемента для создания переключатели и добавьте требуемый тег . Атрибут name для всех элементов, принадлежащих к одной группе радиокнопок, должны быть такой же. Например, в следующем шаблоне пользователю необходимо выбрать переключатель в группа животных типа перед отправкой.

  <массовая форма>
  
Выберите тип животного:




<дел>
  
  Кот