HTML5の新しいフォーム入力フィールドで作業を始めたので、私はHTML5を初めて使用します。<input type="text" />特にIMOでフォーム入力フィールドを操作しているときは<input type="search" />、Safari、Chrome、Firefox、Operaを含むすべての主要なブラウザーに違いはありませんでした。また、検索フィールドも通常のテキストフィールドのように動作します。
では、 HTML5input type="text"との違いは何ですか？input type="search"
の本当の目的は<input type="search" />何ですか？
今のところ、それらの間には大きな取引はありません-多分決してないでしょう。ただし、重要なのは、ブラウザメーカーが必要に応じて、ブラウザメーカーに特別なことを実行できるようにすることです。
携帯電話で考えてみてください<input type="number">。数字パッドを表示したりtype="email"、キーボードの特別なバージョンを表示したりできます。@と.comなどが利用できます。
携帯電話では、必要に応じて、検索によって内部検索アプレットが表示される場合があります。
反対側では、cssを使用して現在の開発者を支援します。
input[type=search]:after { content : url("magnifying-glass.gif"); }
ほとんどのブラウザではまったく何もしません。テキスト入力のように動作します。これは問題ではありません。仕様では、特別なことをする必要はありません。ただし、WebKitブラウザーは、主にスタイリングを使用して、少し異なる方法で処理します。
WebKitの検索入力には、デフォルトで、はめ込み境界線、丸みを帯びた角、および厳密な活版印刷制御があります。
また、
これは私が知っている場所にも仕様にも記載されていませんが、入力に結果パラメーターを追加すると、WebKitは以前の結果を示すドロップダウン矢印の付いた小さな虫眼鏡を適用します。
<input type=search results=5 name=s>
とりわけ、それはに意味的な意味を提供しますinput type。
アップデート：
視覚的/機能的に、入力タイプが「検索」の場合の2つの違い：-
一部のブラウザでは、拡大鏡アイコンで自動「最近の検索」機能を提供する「結果」および「自動保存」属性もサポートしています。
実際には、何もしないと想定する場合は十分に注意してください。タイプ検索を使用してスタイル入力に移動すると、変更できない特定の属性があります。1つの境界線を変更してみてください。そうすれば、それはまったく不可能です。他にも許可されていないCSS属性がいくつかあります。詳細については、これを確認してください。
また、Jashwantが述べたように、result属性がありますが、autosave属性も含めない限りうまく機能しません。ドロップダウンはほとんどのブラウザでは機能しませんが、ご自身の危険で使用してください。
type="search"ブラウザの動作には違いがあります。いくつかの単語を入力してから、Chrome / safariの入力にESCを入力すると、入力ボックスがクリアされます。しかし、type="text"シナリオでは、単語はクリアされません。したがって、特にオートコンプリートや検索関連機能に使用する場合は、タイプの選択に注意してください。
ボーナスポイント：input type="search「onsearch属性を使用する機能があります（ただし、これはMicrosoftの新しいEdgeブラウザでは機能しないことに気づきました）。これにより、カスタムのonkeypress=if(key=13) { function() }ものを作成する必要がなくなります。
input type = "search"を使用すると、キーボードエンターキーのテキストに「search」が表示され、ユーザーエクスペリエンスが向上する可能性があります。ただし、このタイプを使用する場合は、スタイルを調整する必要があります。
しかし、あなたが設定した場合、それはあなたの入力要素に悪影響を及ぼします
<input type="search">
そしてあなたのCSSであなたは設定しました
input {background: url("images/search_bg.gif");}
それはまったく現れません。
プログラマーの視点によって異なりますが、プログラマーはタイプを調べることで入力の目的を簡単に判断でき、CSSスタイルやJavaScriptまたはJQueryで入力のルールを確認するのは簡単です。