ホームページ  >  記事  >  ウェブフロントエンド  >  html5のdatalistタグの使い方は何ですか? datalistタグの使用例はこちら

html5のdatalistタグの使い方は何ですか? datalistタグの使用例はこちら

寻∝梦
寻∝梦オリジナル
2018-09-03 17:33:545675ブラウズ

この記事では、html5 datalistタグの使い方とhtml5 datalistタグの使用例を中心に説明します。この記事では、誰もが選択して視聴できる一般的に使用されるオプション ボックスの 2 つの例について説明します。一緒にこの記事を見てみましょう

まず、HTML5 datalist タグの使用法を見てみましょう:

タグ定義 オプションのリスト。この要素を input 要素と組み合わせて使用​​して、入力の可能な値を定義してください。

データリストとそのオプションは表示されません。これは正当な入力値のリストにすぎません。

データリストをバインドするには、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タグの使い方は何ですか? datalistタグの使用例はこちら

これは何もアクションを行わない場合の効果です。 それでは、入力ボックスを見てみましょう。マウスを上に移動した後にクリックする効果:

html5のdatalistタグの使い方は何ですか? 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タグの使い方は何ですか? datalistタグの使用例はこちら

クリック後の効果です、よく使うオプションボックスですね。

以上、html5 datalist タグの紹介でした。ご質問がございましたら、以下からお問い合わせください。

【編集者のおすすめ】

HTML空間コードの書き方は? html空間コードの表現まとめ

htmlのcolタグ内の漢字を中央揃えにする方法は? HTMLのcolタグの基本的な使い方(例付き)

以上がhtml5のdatalistタグの使い方は何ですか? datalistタグの使用例はこちらの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。