Руководство по HTML5
Адам Фриман
Автоматическая фокусировка на элементе 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
элементу. Если вы попытаетесь применить этот атрибут более одного раза, то браузер будет фокусироваться на последнем элементе в документе, у которого есть этот атрибут.