Руководство по HTML5
Адам Фриман
Использование элемента input для получения поисковых терминов
Тип search
элемента input
представляет пользователю однострочное текстовое поле для ввода поисковых терминов. Это необычный тип input
, потому что он на самом деле ничего не делает. Тут нет никаких встроенных ограничений на данные, которые может ввести пользователь, и нет никаких специальных функций, таких как поиск по данной странице или использование пользовательского поискового движка для выполнения поиска. Этот тип элемента input
поддерживает те же дополнительные атрибуты, что и тип text
. В листинге 13-14 показано, как он используется.
Листинг 13-14: Использование типаsearch
элемента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="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Favorite Fruit:
<input type="text" id="fave" name="fave" />
</label>
</p>
<p>
<label for="search">
Search:
<input type="search" id="search" name="search" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
Браузеры сами решают, как отображать текстовое поле таким образом, чтобы стало очевидно, что вы собираете данные для поиска. Google Chrome представляет стандартное текстовое поле, куда пользователь может набирать текст, и тут есть значок отмены, как показано на рисунке 13-18. На момент написания этой книги другие основные браузеры работали с этим типом элемента input
, как будто это обычный тип text
.
Рисунок 13-18: Как Google Chrome отображает типsearch
элементаinput