HTML5 検索ボックスの入力 type='search'_html/css_WEB-ITnose

ご存知のとおり、HTML5 では、日付や数値など、入力用にさらに多くの入力ボックス タイプが定義されています。 input type="search" もその 1 つですが、その定義ではこの型の機能についてはあまり説明されていません。むしろ、見た目も機能も type=text とあまり変わらないので、何に使うのでしょう。現在、すべてのブラウザは新機能の実装を部分的にサポートしていますが、完全にサポートされている場合でも、差異は避けられません。ここでは、Chrome、Firefox、Edge を参照としてのみ使用します。

Edge に慣れている人は、Edge がデフォルトで入力テキストにクリア ボタンを追加するという事実に精通しているかもしれません (入力ボックスにコンテンツがある場合は最後に「x」が表示され、そのコンテンツはクリックすると入力ボックスのクリアボタンが追加されます。 表記は入力検索にも適用されます。つまり、検索とテキストの 2 つのタイプはまったく同じです。

Firefox はテキストまたは検索のいずれにも目に見える変更を加えていません。

最後に、Chrome について説明します。テキストと検索の主な違いは、Chrome では入力検索用に別のクリア ボタンが提供されることです。それだけでなく、コンテンツを入力した後、ESC キーを押すと、Chrome はコンテンツを自動的にクリアします。これらの機能はヘビーユーザーにとって非常に配慮されています。

つまり、テキストと検索の間には特に明らかな違いはありません。両者の違いはブラウザの違いにあります。検索ボックスで検索を使用する方がセマンティックであることは明らかですが、現時点では明らかな違いはありませんが、長期的には合理的です。

いくつかの主流の検索エンジンの入力ボックス コードをリストします。

<!-- google: -->  <input maxlength="2048" name="q" autocomplete="off" title="Search" type="text" value="" aria-label="Search" aria-haspopup="false" role="combobox" aria-autocomplete="both" dir="ltr" spellcheck="false"><!-- bing: -->  <input name="q" title="Enter your search term" type="search" value="" maxlength="100" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="both" aria-expanded="false" aria-owns="sa_ul"><!-- baidu: -->  <input type="text" name="wd" maxlength="100" autocomplete="off"><!-- sou: -->  <input type="text" name="q" suggestwidth="528px" autocomplete="off"><!-- sogou: -->  <input type="text" name="query" size="47" maxlength="100" autocomplete="off">  

これからわか​​るように、入力検索を使用するのは Bing だけです。もちろん、BingやGoogleのコードは国産ブラウザに比べて明らかに長く、スクリーンリーダーなどの細かい部分では明らかに優れていることがわかります。

外観には影響はありませんが、インタラクションには影響を与えます。最近、いくつかのインタラクティブなドラフトを受け取りましたが、デザイナーは明らかにブラウザーのクリア ボタンについてよく知りません。入力ボックスでそのようなクリア ボタンやインタラクティブな動作を繰り返し作成することは、さまざまなブラウザーが存在する時代では不要です。