Отключение отдельных элементов input

Вы можете отключить элементы input, чтобы пользователь не мог ввести в них данные. Это не так глупо, как может показаться. Вы можете представить согласованный интерфейс, который используется для нескольких взаимосвязанных задач, но для которого не все элементы input будут уместны. Вы также можете использовать JavaScript чтобы включать элементы, основываясь на действиях пользователя. Типичным примером является общий набор элементов input для получения адреса, когда пользователь выбирает опцию для отправки на тот адрес, который не является платежным адресом пользователя. (Вы будете включать элементы через DOM, который описан в главах 25-31. Чекбоксы описаны в главе 13).

Элементы input отключаются при помощи атрибута disabled, как показано в листинге 12-11.

Листинг 12-11: Использование атрибута disabled элементов input

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<p>
			<label for="fave">Fruit:
				<input autofocus id="fave" name="fave" /></label>
		</p>
		<p>
			<label for="name">Name:
				<input disabled id="name" name="name" /></label>
		</p>
		<button>Submit Vote</button>
	</form>
</body>
</html>

В этом примере я применил атрибут disabled к элементу input, в который вводится имя пользователя. На рисунке 12-7 показано, как Google Chrome отображает отключенный элемент input. Другие браузеры используют похожий стиль.

Рисунок 12-7: Отключение элемента input

12.6. Группировка элементов формы

или RSS канал: