<input type="search">
<input> 要素の search 型は、ユーザーが検索クエリーを入力するために設計されたテキスト入力欄です。 text 入力欄と機能的には同じですが、ユーザーエージェントは別なスタイルを適用するかもしれません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 4 | 5 | 18 | 4.2 | |
基本構文
HTML
<form action="/search" method="get">
<label for="q">Search:</label>
<input type="search" id="q" name="q"
placeholder="キーワードを入力" autofocus>
<button type="submit">Search</button>
</form>ライブデモ
Text and. Comparison
Search and text. Difference.search to is kriabutton that display case that exists.
プレビュー全画面表示
実務での使いどころ
-
<input type="search"> の活用
<input> 要素の search 型は、ユーザーが検索クエリーを入力するために設計されたテキスト入力欄です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。