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

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

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

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

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

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

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


サイト仕様検討

PC画面 / 他サイト調査

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

Yahoo / ユニクロ


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

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

 閲覧数:366 投稿日: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 SVGアニメーション 24
17 GIFアニメーション 24
18 テーブルレスポンシブ 24
19 Chromeバージョンアップでフォント指定が効かなくなる 23
20 ドキュメントルート外のCSSファイル読込。~ 2018年 23
2023/1/28 21:41 更新
週間人気ページランキング / 1-21 → 1-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 42
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 20
5 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 12
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 12
5 GIFアニメーション | 画像 12
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 12
6 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 11
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
7 「bgcolor」「background-color」「background」の違い | CSS 10
7 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 10
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 10
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 10
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 9
8 ICCプロファイル | カラーマネージメント(色) 9
8 Design 0 9
8 RGBの種類 / ビットカラー | RGB(色) 9
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 8
2023/1/28 1:01 更新