HTML5 での Datalist 要素タグの使用方法

藏色散人
リリース: 2018-12-05 09:43:37
オリジナル
5603 人が閲覧しました



# タグは HTML 5 の新しいタグです。この要素は、フォームからデータを取得するために使用されます。データを受信すると、ユーザーが選択できるオプションを表示できます。

HTML5 での Datalist 要素タグの使用方法

おすすめ学習:「

HTML5 チュートリアル

以下、具体的なコード例を通して紹介します。

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Datalist元素使用示例</title>
</head>
<body>
<input name="section" list="scripts" />
<datalist id="scripts">
    <option value="PHP" />
    <option value="JavaScript" />
    <option value="java" />
    <option value="Go" />
    <option value="python" />
    <option value="c++" />
</datalist>
</body>
</html>
ログイン後にコピー

効果は以下のとおりです:

HTML5 での Datalist 要素タグの使用方法

# ユーザーがドロップでテキスト ボックスにコンテンツを入力できるようにするオートコンプリート機能があります。 -down リスト ボックスまたはラジオ ボタン これとは異なり、ユーザーは datalist で指定されたオプションに制限されることなく、任意のテキストを書き込むことができます。データリストは、入力要素リスト属性を介してバインド (またはリンク) されます。

注:

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

データリストとそのオプションは表示されません。これは単に正当な入力値のリストです。データリストをバインドするには、input 要素の list 属性を使用する必要があります。

この記事は、HTML5 での Datalist 要素の使用法を紹介するもので、困っている人たちに役立つことを願っています。

以上がHTML5 での Datalist 要素タグの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!