HTML5のinput type =“ text” vs input type =“ search”

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

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

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

現在、それらの間には大きな契約はありません-おそらくないでしょう。ただし、重要なのは、ブラウザメーカーが必要に応じて、ブラウザメーカーに特別な機能を提供できるようにすることです。

@と.comとその他が利用可能な<input type="number">、携帯電話、数字パッド、またはtype="email"キーボードの特別なバージョンを考えてみてください。

携帯電話では、必要に応じて、検索により内部検索アプレットが表示されます。

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

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

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

WebKitの検索入力には、デフォルトで、はめ込み枠、丸みを帯びた角、厳密な文字体裁制御があります。

また、

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

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

参照

何よりも、それはに意味的な意味を提供しますinput type。

更新：

Chrome 51では、results属性のサポートが削除されました：

視覚的/機能的に、入力タイプが「検索」の場合の2つの違い：-

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

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

より詳しい情報

実際にはそれが何もしないと仮定することに非常に注意してください。タイプ検索でスタイル入力に移動すると、変更できない特定の属性があります。境界線を1つ変更してみてください。変更するのは非常に困難です。他のいくつかの許可されないCSS属性は、チェックアウトがあり、これをすべての詳細については。

また、Jashwantによって言及されたように、autosave属性も含めない限り、うまく機能しませんが、result属性があります。ただし、ドロップダウンはほとんどのブラウザーでは機能しないため、ご自身の危険で使用してください。

ブラウザーの動作に違いがありますtype="search"。クロム/サファリの入力でいくつかの単語を入力してからEscキーを押すと、入力ボックスがクリアされます。しかし、type="text"シナリオでは、単語はクリアされません。オートコンプリートや検索関連機能に使用する場合は特に、タイプの選択に注意してください

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

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

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

しかし、設定すると、入力要素に悪影響を及ぼします。

<input type="search">

そしてあなたのCSSであなたは設定しました

input {background: url("images/search_bg.gif");}

それはまったく現れません。