やってみよう検索バーを押して、「さ」などを打ってみてください
入力フォームメジャー（よく見る）
検索バー
Search Bar
虫めがねの付いた丸い入力欄。押すと「キャンセル」が出て、打つたびに下の一覧が絞られる。
別名検索窓サーチバー検索フィールドSearchable
どこで使われている？
- よく見かける場所
- ほぼすべてのアプリとサイト（連絡先、ネット通販、設定）
- 使うとよい場面
- 一覧が多く、名前がわかっているものを探すとき
- 避けたい場面
- 項目が数個しかない画面
補足打ち始めると候補が下に出てくるものは「オートコンプリート」です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「検索バー（Search Bar）」を実装してください。 動き：角の丸い入力欄の左に虫めがねのアイコンを置く。押すと右に「キャンセル」ボタンが出て、文字を打つたびに下の一覧を絞り込む。文字が入っているときは右端に「×」を出して一度に消せるようにする。 使う部品：<input type="search">
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | <input type="search"> |
|---|---|
| iPhoneアプリなら | .searchable(text: ) |
| Androidアプリなら | SearchBar（Material 3） |
| Flutterなら | SearchBar（候補付きなら SearchAnchor） |
| React Nativeなら | react-native-paper の Searchbar |