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

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

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

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

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

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

 閲覧数:179 投稿日: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>


サイト仕様検討

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

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


場合による


クリック後表示


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

PC画面 / 他サイト調査

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

Yahoo / ユニクロ


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

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

 閲覧数:199 投稿日: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 グローバルナビゲーションにプルダウン 57
2 ホーム・トップ・サイト名・ロゴ / グローバルナビゲーション 44
3 モバイルデザイン6 / フォーム 35
4 WebサイトをHTML5で作成したら、IE8で、グローバルナビゲーション表示がおかしくなった 31
5 グラデーション練習 30
6 モバイルデザイン5 / スクロールアニメーション 29
7 「CSSキーフレームアニメーション」実行後のCSS設定 27
8 CSS3で背景色にグラデーションをつける 27
9 モバイルデザイン1 / スマホサイトのベースとなるフレームワークを検討 27
10 フォーム要素に対する(私の)CSS適用ルール 26
11 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 25
12 UIランキング。パーツ選択候補 / Topナビゲーション / Bottomナビゲーション / グリッド / 組積造 / コンテンツタブ切替 / テーブル / フォーム / ボタン 25
13 モバイルデザイン8 / スマホはbodyタグに余白なしがデフォ?  25
14 スマートフォン対応 24
15 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 24
16 テーブルレスポンシブ 24
17 SVGアニメーション 24
18 GIFアニメーション 24
19 モバイル フレンドリー テスト / viewport設定 23
20 Chromeバージョンアップでフォント指定が効かなくなる 23
2021/8/06 1:41 更新
週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新