ホームページ > 記事 > ウェブフロントエンド > html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら
html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら
- 寻∝梦オリジナル
- 2018-09-03 17:33:545696ブラウズ
この記事では、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 サイトの他の関連記事を参照してください。