web-dev-qa-db-ja.com

HTML5のinput type = "text" vs input type = "search"

HTML5の新しいフォーム入力フィールドを使い始めたので、私はHTML5が初めてです。フォーム入力フィールド、特に<input type="text" />と<input type="search" /> IMOを使用しているとき、Safari、Chrome、Firefox、Operaを含むすべての主要なブラウザーに違いはありませんでした。また、検索フィールドも通常のテキストフィールドのように動作します。

では、HTML5のinput type="text"とinput type="search"の違いは何ですか？

<input type="search" />の本当の目的は何ですか？

formshtml5input
120
Vijin Paulraj

今のところ、それらの間には大きな問題はありません-多分ないでしょう。ただし、必要な場合は、ブラウザーメーカーが特別な操作を行えるようにすることがポイントです。

携帯電話で<input type="number">を考えて、数字パッドを表示するか、type="email"でキーボードの特別なバージョンを表示し、@と.comと残りを使用できます。

携帯電話では、必要に応じて内部検索アプレットを検索できます。

一方、CSSを使用して現在の開発者を支援します。

input[type=search]:after { content : url("magnifying-glass.gif"); }
165
Norguard

ほとんどのブラウザではまったく何もしません。テキスト入力のように動作します。これは問題ではありません。この仕様では、特別なことをする必要はありません。ただし、WebKitブラウザーは、主にスタイリングを使用して、少し異なる方法で処理します。

WebKitの検索入力には、デフォルトで、はめ込み境界線、丸い角、厳密な文字体裁コントロールがあります。

また、

これは私が知っているどこにも文書に記載されていませんが、入力に結果パラメーターを追加すると、WebKitは以前の結果を示すドロップダウン矢印付きの小さな虫眼鏡を適用します。

<input type=search results=5 name=s>

参照

とりわけ、input typeに意味的な意味を提供します。

更新：

Chrome 51は結果属性のサポートを削除しました：

28
Jashwant

視覚的/機能的に、入力タイプが 'search'の場合、2つの違い：-

  1. 入力/検索ボックスの最後に「X」記号が表示され、ボックス内のテキストがクリアされます
  2. キーボードの「Esc」キーを押すと、テキストもクリアされます
16
Harsh Raj

一部のブラウザでは、「結果」および「自動保存」属性もサポートしており、拡大鏡アイコンを使用して自動「最近の検索」機能を提供します。

詳細

7
Scott Wilson

実際、それが何もしないと仮定することには非常に注意してください。タイプ検索でスタイル入力に行くと、変更できない特定の属性があります。 1つの境界線を変更しようとすると、それは非常に不可能です。他にも許可されていないCSS属性がいくつかあります。詳細については this をご覧ください。

また、Jashwantで言及されているように、結果属性がありますが、自動保存属性も含めない限り、うまく機能しません。ただし、ほとんどのブラウザではドロップダウンが機能しないため、ご自身の責任で使用してください。

2
sage88

ボーナスポイント：input type="search "にはonsearch属性を使用する機能があります（Microsoftの新しいEdge Browserでは機能しないことに気づきましたが）。これにより、カスタムonkeypress=if(key=13) { function() }を記述する必要がなくなります。事。

1
James Groves

input type = "search"を使用すると、キーボードのキーテキストに「search」と表示され、ユーザーエクスペリエンスが向上する場合があります。ただし、このタイプを使用する場合は、スタイルを調整する必要があります。

1
qingyang yu

ブラウザの動作に違いがあります。いくつかの単語を入力し、入力にESCを入力すると、chrome/safariのtype="search"に入力ボックスがクリアされます。ただし、type="text"シナリオでは、単語はクリアされません。したがって、オートコンプリートまたは検索関連機能に使用する場合は特に、タイプを慎重に選択してください

1
yidea

プログラマーの視点に依存し、プログラマーは型を調べることで入力の目的を簡単に判断でき、CSSスタイリングとJavaScriptまたはJQueryが入力のルールを検証するのは簡単です。

0
Fil