ホームページ > 記事 > ウェブフロントエンド > html5で追加された新しいフォーム要素とは何ですか？

html5で追加された新しいフォーム要素とは何ですか？

青灯夜游オリジナル: 2022-04-25 11:54:029387ブラウズ

HTML5 では 3 つの新しいフォーム要素が追加されています: 1. datalist 要素 (入力用のドロップダウンリストの設定に使用されます。内部のオプションは事前定義されており、ユーザー入力データとして使用されます)、2. keygen 要素。フォーム内で使用されるキーペア生成フィールドを指定できます; 3. 出力要素は、計算結果を出力および表示するために使用されます。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

datalist、keygen、output という 3 つの新しいフォーム要素が HTML5 に追加されました。

1. datalist 要素

タグは、要素に使用できるオプションのリストを指定します。

タグは、要素に「オートコンプリート」機能を提供するために使用されます。ユーザーには、ユーザーの入力データとして機能する事前定義されたオプションを含むドロップダウンリストが表示されます。

这里注意datalist元素要写id，与input表单元素的 list属性创建联系

例 1:

html5で追加された新しいフォーム要素とは何ですか？

は次のようにページに表示されます。

#例 2: html5で追加された新しいフォーム要素とは何ですか？

## は次のようにページに表示されます:

html5で追加された新しいフォーム要素とは何ですか？

必要に応じて、入力は URL です。値の値を追加する必要があることに注意してください http://

html5で追加された新しいフォーム要素とは何ですか？例 3

ここでの datalist 要素は Firefox にあります。ブラウザにはドロップダウンリストがないため、注意してください。

と datalist の子要素の option 要素は、単一のラベル形式で記述することができます。例: html5で追加された新しいフォーム要素とは何ですか？

タグは、フォームのキーペアジェネレーターフィールドで使用されるコンテンツを指定します。フォームが送信されると、秘密キーがローカルに保存され、公開キーがサーバーに送信されます。

は HTML5 の新しい要素で、キージェネレーターの作成に使用されます。

フォームが送信されると、秘密キーはローカルに保存されます。公開キーがサーバーに送信されます。主な機能は、ユーザー認証の方法を提供することです
例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
    <p style="color:#FF0000">
        掌握fieldset/legend元素的用法（和figure和figcaption很像，只不过是作用于表单）
    </p>
    <form action="L3_01.html" method="get" >
        <fieldset>
        <legend>用户注册</legend>
            用户名：<input type="text" name="name"><br>
            密码：<input type="password" name="password">
            <br><input type="submit" value="确定">
        </fieldset><br>

        keygen元素用法：<br>
        加密：<keygen name="mykey"><br>
        <br><input type="submit" value="确定">
    </form>
<body>
</body>
</html>

3. Output 要素

## タグは、計算結果の出力（スクリプト実行の出力など）として表示されます。

出力タグの構文形式

<output name="名称" for="element_id">默认内容</output>

説明: 出力タグの内容はデフォルトの表示内容であり、関連要素が変更されると変更されます。

出力タグ属性

for: 出力ドメインに関連する 1 つ以上の要素をスペースで区切って定義します。

form: 入力フィールドが属する 1 つ以上のフォームをスペースで区切って定義します。

name: オブジェクトの一意の名前を定義します (フォームの送信時に使用されます)。
#例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>html中output标签详细介绍</title>
</head>
 
<body style="background-color: bisque;">
    <h4>output标签演示：</h4>
    <h5>加法计算器</h5>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" id="a" value="0"> +
        <input type="number" id="b" value="0"> =
        <output name="x" for="a b">0</output>
    </form>
</body>
</html>

上記の例で、output タグの使い方は理解できたと思いますが、引き算、掛け算、割り算などの計算機に変えるのも簡単ですので、興味のある方はぜひ試してみてください。

【関連する推奨事項: html ビデオチュートリアル、Web フロントエンド】

以上がhtml5で追加された新しいフォーム要素とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 safari html for 对象 input 算法 http

声明：

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

前の記事：html5のsvgとは何ですか？次の記事：html5のsvgとは何ですか？

続きを見る