検索ワード用の入力フィールドを作るには?
input type="search"タグの書式
input type="search"タグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
input type="search"タグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
指定可能なフォーム部品の共通属性 | name、disabled、form、autocomplete、autofocus、list、maxlength、pattern、readonly、required、size、placeholder、dirname&br、value ※フォーム部品の共通属性のページを参照してください。 |
input type="search"タグの解説
<input>タグは、入力コントロールを表すための要素です。
<input>要素の「type」属性に「search」を指定すると、検索ワードを入力するための入力フィールドを作ることができます。
input type="search"タグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<p>検索する商品名を入力してください。</p>
<form action="sample.cgi" method="post">
<p><label>商品名:<input type="search" name="search" maxlength="10"></label><input type="submit" value="検索"></p>
</form>
</body>
</html>
input type="search"タグのサンプル画面1
input type="search"タグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<section>
<h1>住所から地図を検索</h1>
<form action="sample.cgi" method="post">
<p><label>住所を入力<input type="search" name="search" size="50" placeholder="例:東京都豊島区南池袋"></label>
<input type="submit" value="地図検索"></p>
</form>
</section>
</body>
</html>
input type="search"タグのサンプル画面2
input type="search"タグの関連項目