Вы здесь: Главная > CSS > Флажки и переключатели: элементы input

Флажки и переключатели: элементы input

Опубликовано автором Просмотры: 16

Создание флажков и переключателей на CSS с помощью input.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Checkbox and radio inputs</title>
	<style>
		body {
			font: 100% arial, helvetica, sans-serif;
		}

		fieldset {
			padding: 0 1em 1em 1em;
		}

		legend {
			padding: 1em;
		}

		label {
			float: left;
			width: 6em;
		}
	</style>
</head>
<body>
	<form action="someplace.php">
		<fieldset>
			<legend>Films you like</legend>
			<div>
				<label for="drama">Drama</label>
				<input type="checkbox" name="drama" id="drama" value="drama">
			</div>
			<div>
				<label for="action">Action</label>
				<input type="checkbox" name="action" id="action" value="action">
			</div>
			<div>
				<label for="comedy">Comedy</label>
				<input type="checkbox" name="comedy" id="comedy" value="comedy">
			</div>
			<div>
				<label for="horror">Horror</label>
				<input type="checkbox" name="horror" id="horror" value="horror">
			</div>
			<div>
				<label for="scifi">Sci-fi</label>
				<input type="checkbox" name="scifi" id="scifi" value="scifi">
			</div>
		</fieldset>

		<fieldset>
			<legend>Your age</legend>
			<div>
				<label for="lt20">19 or under</label>
				<input type="radio" name="age" id="lt20" value="lt20">
			</div>
			<div>
				<label for="20to39">20 to 39</label>
				<input type="radio" name="age" id="20to39" value="20to39">
			</div>
			<div>
				<label for="40to59">40 to 59</label>
				<input type="radio" name="age" id="40to59" value="40to59">
			</div>
			<div>
				<label for="gt59">60 or over</label>
				<input type="radio" name="age" id="gt59" value="gt59">
			</div>
		</fieldset>
	</form>
</body>
</html>

Страницы в тему:

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