検索フォーム

検索フォーム（テキスト入力・検索ボタン）

検索フォーム（テキスト入力・検索ボタン）のコンポーネントにはsu-form-searchのクラス名を使用します。

form要素やinput要素、button要素などを用いて下記のようにマークアップし、検索用のフォームを作成します。上記クラス名を付与することでスタイルが適用されます。テキスト入力欄や検索ボタンなどに境界線や背景色、余白などが適用されます。検索テキスト入力のリセットボタンを配置する場合には、テキスト入力とリセットボタンのそれぞれinput要素、button要素を、su-form-search-input-groupでラッピングすることで、適切にレイアウトされるようになります。なお、リセットボタンを含まない場合にはこの要素は不要です。

入力したテキストを使った、テキスト入力欄と検索ボタンを含むキーワード検索用のフォームUIです。テキスト入力や検索ボタンなどが操作しやすくなるようにスタイリングされます。

※リセットボタンや検索ボタンのボタン要素は、動作やスタイリングのカスタマイズ性の観点から、input要素ではなくbutton要素でマークアップすることを推奨します。

<!-- リセットボタンあり -->
<form method="GET" action="/search" aria-label="検索フォーム">
  <div class="su-form-search">
    <label 
      id="search-description" 
      class="su-screen-reader-only"
    >
      キーワード検索
    </label>
    <div class="su-form-search-input-group">
      <input 
        type="search" 
        name="keywords" 
        placeholder="検索キーワードを入力" 
        aria-describedby="search-description"
      >
      <button 
        type="reset" 
        aria-label="検索内容をリセット"
      ></button>
    </div>
    <button type="submit">検索</button>
  </div>
</form>

<!-- リセットボタン無し -->
<form method="GET" action="/search" aria-label="検索フォーム">
  <div class="su-form-search">
    <label 
      id="search-description" 
      class="su-screen-reader-only"
    >
      キーワード検索
    </label>
    <input 
      type="search" 
      name="keywords" 
      placeholder="検索キーワードを入力" 
      aria-describedby="search-description"
    >
    <button type="submit">検索</button>
  </div>
</form>

検索フォーム（テキスト入力・検索ボタン）のボーダー、背景、入力値文字の色、角丸サイズはCSS変数を使って変更することが可能です。

.su-form-search {
  --su-color-border-search-form: red;
  --su-color-text-search-form: lime;
  --su-color-placeholder-search-form: yellow;
  --su-color-icon-search-form: blue;
  --su-size-radius-search-form: 10px;
  --su-color-border-search-submit: pink;
  --su-color-bg-search-submit: orange;
  --su-color-text-search-submit: white;
}

アイコンの表示

検索フォームのコンポーネントはsu-form-search-add-iconクラスを追加することで、インプット入力値の前にアイコンを表示させることができます。

アイコンを表示させることで、検索を目的とするフォームであることを伝わりやすくし、ユーザビリティの向上に期待できます。

<form method="GET" action="/search" aria-label="検索フォーム">
  <!-- アイコン表示用のクラスを追加 -->
  <div class="su-form-search su-form-search-add-icon">
    <label 
      id="search-description" 
      class="su-screen-reader-only"
    >
      キーワード検索
    </label>
    <div class="su-form-search-input-group">
      <input 
        type="search"
        name="keywords" 
        placeholder="検索キーワードを入力" 
        aria-describedby="search-description"
      >
      <button 
        type="reset" 
        aria-label="検索内容をリセット"
      ></button>
    </div>
    <button type="submit">検索</button>
  </div>
</form>

アクセシビリティの支援

検索フォームのコンポーネントはアクセシビリティの対応として、form要素に対してaria-label属性を、input要素に対してaria-describedby属性を使うことで、スクリーンリーダーに対してより詳しく情報を伝えることができます。その場合にスクリーンリーダー用のテキストラベルで使用したlabel要素などに対して、su-screen-reader-onlyのクラスを指定することで、スクリーンリーダー向けのテキスト要素として扱うことができ、テキストを非表示とすることができます。

<form method="GET" action="/search" aria-label="検索フォーム">
  <div class="su-form-search">
    <!-- ラベル要素とテキストインプット要素を紐づける -->
    <label 
      id="search-description" 
      class="su-screen-reader-only"
    >
      キーワード検索
    </label>
    <div class="su-form-search-input-group">
      <input 
        type="search"
        name="keywords" 
        placeholder="検索キーワードを入力" 
        aria-describedby="search-description"
      >
      <button 
        type="reset" 
        aria-label="検索内容をリセット"
      ></button>
    </div>
    <button type="submit">検索</button>
  </div>
</form>