HTML5 で新しく一般的に使用されるフォーム要素は何ですか?添付の使用例

HTML5 は現在ますます人気が高まっていますが、HTML5 には古いバージョンよりも多くの新しいフォーム要素があります。 HTML5 で新しく一般的に使用されるフォーム要素は何ですか?どのように使用されますか?

この章では、次の新しいフォーム要素を紹介します: datalist; keygen; Output

datalist 要素:

datalist 要素は、入力フィールドのオプションのリストを指定します。

リストはdatalist内のoption要素を通じて作成されます。

データリストを入力フィールドにバインドする必要がある場合は、入力フィールドの list 属性を使用してデータリストの ID を参照してください:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="php中文网" value="http://www.php.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

ヒント: option 要素は常に value 属性を設定する必要があります。

keygen 要素:

keygen 要素の目的は、ユーザーを認証するための信頼できる方法を提供することです。

keygen 要素はキーペアジェネレーターです。フォームが送信されると、2 つのキーが生成されます。1 つは秘密キー、もう 1 つは公開キーです。

秘密鍵はクライアントに保存され、公開鍵はサーバーに送信されます。公開キーは、後でユーザーのクライアント証明書を検証するために使用できます。

現在、ブラウザーによるこの要素のサポートは、セキュリティ標準として有用であるほど不十分です。

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output要素:

output要素は、計算やスクリプト出力など、さまざまなタイプの出力に使用されます:

<output id="result" onforminput="resCalc()"></output>

入力タイプ:

HTML5には、いくつかの新しいフォーム入力タイプがあります。これらの新機能により、入力制御と検証が向上します。

1.入力タイプ - 電子メール

電子メール タイプは、電子メール アドレスを含める必要がある入力フィールドに使用されます。フォームを送信すると、電子メールフィールドの値が自動的に検証されます。

2.入力タイプ - url

url タイプは、URL アドレスを含む必要がある入力フィールドに使用されます。フォームを送信すると、URL フィールドの値が自動的に検証されます。

3.入力タイプ - 数値

数値タイプは、数値を含む必要がある入力フィールドに使用されます。受け入れられる数値に制限を設定することもできます:

4.入力タイプ - 範囲

範囲タイプは、特定の範囲内の数値を含む必要がある入力フィールドに使用されます。

範囲タイプはスライダーとして表示されます。

受け入れられる数値に制限を設定することもできます:

5. 入力タイプ - 日付ピッカー

HTML5 には日付と時刻を選択するための新しい入力タイプがいくつかあります:

date - 日、月、年を選択します

月- 月、年を選択します

week - 週と年を選択します

time - 時間 (時間と分) を選択します

datetime - 時間、日、月、年 (UTC 時間) を選択します

datetime-local - 時間、日を選択します、月、年 (現地時間)

6.入力タイプ - 検索

検索タイプは、サイト検索や Google 検索などの検索フィールドに使用されます。

検索フィールドは通常のテキスト フィールドとして表示されます。

7b6478e34619ea5e0b694735d9238fae

ff9c23ada1bcecdd1a0fb5d5a0f18437 ユーザー入力用のフォームを定義します

d5fd7aea971a85678ba271703566ebfd 入力領域を定義します

4750256ae76b6b9d804861d8f69e79d3 ）＆lt＆gt;オプショングループ

5a07473c87748fb1bf73f23d45547ab8ドロップダウンリストでオプションを定義します

bb9345e55eb71822850ff156dfde57c8ボタンを定義します

【関連記事】

HTMLとHTML5の開発の歴史

基本要素HTML をゼロから学ぶことができます

以上がHTML5 で新しく一般的に使用されるフォーム要素は何ですか?添付の使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。