グローバルナビゲーションにキーワード検索フォーム

大原則

要件を満たす限り、エンターキー押下でそのフォームのsubmitが実行される
・これはW3Cでも定義されているHTML仕様
・HTML5仕様
・HTML Standard
・HTML5以前の仕様

---

概要

HTMLではForm内にテキスト一行入力系のフィールドが一つだった場合、そこでEnterキーを押すとSubmitされる仕様になっている
・Form内にチェックボックスやテキストエリアなどの他のフィールドがあってもテキストフィールドが一つだったらサブミットしてしまう

---

Enterキー押下でフォームがsubmitされる要件具体例

form内にinput[type=”text”]が1つだけ

<form method="post">

    <input type="text" name="test">

</form>

form内にinput[type=”text”]が1つだけ
・他の<input type>は存在

<form method="post">

    <input type="text" name="test1">

    <input type="hidden" name="test2">

</form>

form内にinput[type=”text”]が1つだけ
・他の入力フィールド作成タグは存在

<form method="post">

   <input type="text" name="test1">

   <textarea name="test2"></textarea>

</form>

---

Enterキー押下でフォームがsubmitされない要件具体例

form内にinput[type=”text”]が複数

<form method="post">

    <input type="text" name="test1">

    <input type="text" name="test2">

</form>

フォームをエンターキーでサブミットするのは、是か？それとも非か？

場合による

---

クリック後表示

スイッチ式検索フォームをCSSで作る！Javascriptを使わないデザイン方法

Yahoo ／ ユニクロ

何れも同じ仕様
・キーワード検索フォームを最初から表示
・ボタンクリックでフォーム送信

Yahoo

トップページ以外には検索フォーム未設置
・トップページにはキーワード検索フォームを最初から表示
・ボタンクリックでフォーム送信
※ドロワーメニュー内に、キーワード検索フォーム設置なし

---

ユニクロ

グローバルメニューに商品検索ボタンあり

<div class="uni-search-form-trigger uni-highlight" search-focus="" analytics-on="click" analytics-event="click" analytics-label="H_search" analytics-category="Common Header">

  <span class="uni-search-form-trigger-text ng-binding">商品検索</span>

</div>

・クリックすると検索アイコンが消え、検索フォームを表示
・その際、ドロワーメニューが×印に切り替わるようになっている
※画面一番上には、タイトルロゴ、検索フォーム、ドロワーアイコン(×印)のみが表示される
・Enterキー押下でフォーム送信(送信ボタン未設置。入力欄に初期値として表示されるplaceholder属性指定なし)
※ドロワーメニュー内に、検索フォーム設置なし


ドロワーアイコン×印
・2つの役割

A.ドロワーアイコンをクリックした場合
・ドロワーメニューがオープン
・ドロワーアイコンは×印へ切り替わる
・×印をクリックすると、開いているドロワーメニューが閉じる

B.検索アイコンをクリックした場合
・検索アイコンが消え、検索フォームを表示
・ドロワーアイコンは×印へ切り替わる
※画面一番上には、タイトルロゴ、検索フォーム、ドロワーアイコン(×印)のみが表示される
・×印をクリックすると、表示されていた検索フォームが消え、元の検索アイコンへ戻る