ホームページ > 記事 > ウェブフロントエンド > html5のdatalistタグの使い方は何ですか? datalistタグの使用例はこちら
この記事では、html5 datalistタグの使い方とhtml5 datalistタグの使用例を中心に説明します。この記事では、誰もが選択して視聴できる一般的に使用されるオプション ボックスの 2 つの例について説明します。一緒にこの記事を見てみましょう
まず、HTML5 datalist タグの使用法を見てみましょう:
データリストとそのオプションは表示されません。これは正当な入力値のリストにすぎません。
データリストをバインドするには、input 要素の list 属性を使用してください。
利用可能性: datalist: 選択して入力できるリスト (選択ドロップダウン リストのみより便利です)
それでは、html5 datalist タグの例を見てみましょう:
以下は入力です要素とその可能性は datalist で説明されています:
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="PHP中文网"> <option value="html"> <option value="寻梦"> </datalist>
これはブラウザに次のように表示されます:
これは何もアクションを行わない場合の効果です。 それでは、入力ボックスを見てみましょう。マウスを上に移動した後にクリックする効果:
ほら、効果が現れています。 html5のdatalistタグの基本的な使い方です。
input入力ボックスのlist属性値はデータリストのidとなるため、データリストをinput入力ボックスに関連付けることができます。データリスト自体は表示されず、入力と一致させる必要がある場合にのみ自動的に表示されます。
HTML5 datalist タグの別の使用例:
Web デザインでは、入力ボックスなどの自動ドロップダウン プロンプトがよく使用され、ユーザーの入力が大幅に容易になります。以前は、このような機能を実装したい場合は、開発者が Javascript スキルまたは関連フレームワークを使用して ajax 呼び出しを行う必要があり、それにはある程度のプログラミング作業が必要でした。しかし、HTML5 が徐々に普及するにつれて、開発者は新しい datalist タグを使用して、非常に美しいオートコンプリート コンポーネント効果を迅速に開発できるようになりました
html5 datalist タグのコード例:
<!DOCTYPE html> <html> <head> <title>HTML5 datalist tag</title> <meta charset="utf-8"> </head> <p> 浏览器版本:<input list="words"> </p> <datalist id="words"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> <option value="Sogou"> <option value="Maxthon"> </datalist> </body> </html>
効果は図に示すとおりです:
クリック後の効果です、よく使うオプションボックスですね。
以上、html5 datalist タグの紹介でした。ご質問がございましたら、以下からお問い合わせください。
【編集者のおすすめ】
HTML空間コードの書き方は? html空間コードの表現まとめ
htmlのcolタグ内の漢字を中央揃えにする方法は? HTMLのcolタグの基本的な使い方(例付き)
以上がhtml5のdatalistタグの使い方は何ですか? datalistタグの使用例はこちらの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。