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

UIキーワード検索フォーム

検討事項  / 何れの仕様が良いの?

 状態:検討中  閲覧数:1,998  投稿日:2015-12-27  更新日:2015-12-27
デスクトップ画面キーワード検索フォーム
・最初から表示
・クリック後表示

スマホ画面
・ボタンクリックでフォーム送信
・Enterキー押下でフォーム送信

HTML仕様 / 要件を満たす限り、エンターキー押下でそのフォームのsubmitが実行される

 閲覧数:600 投稿日:2015-12-27 更新日:2015-12-27

大原則


要件を満たす限り、エンターキー押下でそのフォームの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>


サイト仕様検討

 閲覧数:614 投稿日:2015-12-27 更新日:2015-12-27

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


場合による


クリック後表示


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

PC画面 / 他サイト調査

 閲覧数:598 投稿日:2015-12-27 更新日:2015-12-27

Yahoo / ユニクロ


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

スマホ画面 / 他サイト調査

 閲覧数:628 投稿日:2015-12-27 更新日:2015-12-27

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




類似度ページランキング
順位 ページタイトル抜粋
1 グローバルナビゲーションにキーワード検索フォーム 83
2 グローバルナビゲーションにプルダウン 57
3 ホーム・トップ・サイト名・ロゴ / グローバルナビゲーション 44
4 モバイルデザイン6 / フォーム 35
5 WebサイトをHTML5で作成したら、IE8で、グローバルナビゲーション表示がおかしくなった 31
6 グラデーション練習 30
7 モバイルデザイン5 / スクロールアニメーション 29
8 「CSSキーフレームアニメーション」実行後のCSS設定 27
9 CSS3で背景色にグラデーションをつける 27
10 モバイルデザイン1 / スマホサイトのベースとなるフレームワークを検討 27
11 フォーム要素に対する(私の)CSS適用ルール 26
12 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 25
13 UIランキング。パーツ選択候補 / Topナビゲーション / Bottomナビゲーション / グリッド / 組積造 / コンテンツタブ切替 / テーブル / フォーム / ボタン 25
14 モバイルデザイン8 / スマホはbodyタグに余白なしがデフォ?  25
15 スマートフォン対応 24
16 テーブルレスポンシブ 24
17 GIFアニメーション 24
18 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 24
19 SVGアニメーション 24
20 サイトにプログラムコードを貼り付ける preタグのCSS 23
2025/8/29 10:56 更新
週間人気ページランキング / 8-22 → 8-28
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 15
2 鉄道会社毎のカラーコード | カラーコード(色) 14
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 13
4 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 8
5 Design 0 7
6 「bgcolor」「background-color」「background」の違い | CSS 6
7 色モデルイメージ図 | 色変換(色) 5
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 5
7 RGBの種類 / ビットカラー | RGB(色) 5
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
8 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 | CSS 4
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
9 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 3
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
9 G'MIC | GIMP 系(ソフトウェア) 3
9 個人的によく見返すエントリーへのLinkなど | その他 3
9 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 3
2025/8/29 1:01 更新