Главная страница   /   12.4. Автоматическая фокусировка на элементе input (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

12.4. Автоматическая фокусировка на элементе input

Вы можете выбрать, на каком элементе input будет фокусироваться браузер, когда отображается форма. Это означает, что пользователь может начать вводить данные непосредственно в выбранном поле изначально без его явного выбора. Вы указать, к какому элементу input будет применяться фокус при помощи атрибута autofocus, как показано в листинге 12-10.

Листинг 12-10: Использование атрибута autofocus
<!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 id="name" name="name" /></label></p>
		<button>Submit Vote</button>
	</form>
</body>
</html>

Как только браузер отобразит страницу, он будет фокусироваться на первом элементе input. На рисунке 12-6 показано, как Google Chrome визуально дает пользователю возможность определить элемент, на котором на данный момент стоит фокус.

Рисунок 12-6: Автофокусировка на элементе input

Вы можете применить атрибут autofocus только к одному input элементу. Если вы попытаетесь применить этот атрибут более одного раза, то браузер будет фокусироваться на последнем элементе в документе, у которого есть этот атрибут.