Флажки и переключатели

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

Флажок

Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с помощью элемента input с атрибутом type="checkbox":

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Чекбокс в HTML5</title>
	</head>
	<body>
		<h2>Изучаемые технологии</h2>
		<form>
			<p>
				<input type="checkbox" checked name="html5"/>HTML5
			</p>
			<p>
				<input type="checkbox" name="dotnet"/>.NET
			</p>
			<p>
				<input type="checkbox" name="java"/>Java
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
	</body>
</html>
Флажок/чекбокс в HTML5

Атрибут checked позволяет установить флажок в отмеченное состояние.

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Радиокнопки в HTML5</title>
	</head>
	<body>
		<form>
			<h2>Укажите пол</h2>
			<p>
				<input type="radio" value="man" checked name="gender"/>мужской
			</p>
			<p>
				<input type="radio" value="woman" name="gender"/>женский
			</p>
			<h2>Выберите технологию</h2>
			<p>
				<input type="radio" value="html5" checked name="tech"/>HTML5
			</p>
			<p>
				<input type="radio" value="net" name="tech"/>.NET
			</p>
			<p>
				<input type="radio" value="java" name="tech"/>Java
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
	</body>
</html>

Для создания радиокнопки надо указать атрибут type="radio". И теперь другой атрибут name указывает не на имя элемента, а на имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech. Из каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked:

Радиокнопки в HTML5

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

Radio button в HTML5

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

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850