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