HTML5 基礎チュートリアル

HTML5 API

HTML5 メディア

HTML5 グラフィックス

HTML5 フォーム属性 HTML5 入力タイプ

HTML5 フォーム要素

HTML5フォームに関連する要素や属性がいくつかあります。

HTML5 新しいフォーム要素

HTML5 以下に新しいフォーム要素があります:

<datalist>
<keygen>
<output>

注意:すべてのブラウザがHTMLをサポートしているわけではありません5 新しいフォーム要素ですが、ブラウザがフォーム属性をサポートしていない場合でも、通常のフォーム要素として表示できます。

HTML5 <datalist> 要素

<datalist> 要素は、入力エリアのオプションリストを定義します。

<datalist> 属性は、form や input 域が自動完成機能を持つことを定義します。ユーザーが自動完成エリアで入力を始めた場合、ブラウザはそのエリアに入力されたオプションを表示するべきです：

<input>要素のリスト属性は、<datalist>要素とバインドされます。

オンラインサンプル

<input>要素は、<datalist>で事前に定義された値を使用します：

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
　　　　
<form　action="demo-form.php"　method="get">
<input　list="languages"　name="language">
<datalist　id="languages">
　　<option　value="C++">
　　<option　value="PHP">
　　<option　value="Golang">
　　<option　value="Python">
　　<option　value="Ruby">
</datalist>
<input　type="submit">
</form>
<p><strong>注意:</strong>　Internet　Explorer　9（より古いIEバージョン）、Safariは　datalist　タグをサポートしていません。</p>
</body>
</html>

テストを試してみる ‹/›

HTML5 <keygen>要素

<keygen>要素の役割は、ユーザーの確認を信頼できる方法を提供することです。

<keygen>タグは、フォームのキープアiringジェネレーターフィールドを指定します。

フォームを提出するとき、2つのキーが生成されます。1つは秘密鍵、もう1つは公開鍵です。

秘密鍵（private key）はクライアント側に保存され、公開鍵（public key）はサーバーに送信されます。公開鍵は、その後ユーザーのクライアント証明書（client certificate）を検証するために使用されます。

オンラインサンプル

keygenフィールドを持つフォーム:

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo_form.php"　method="get">
　　ユーザー名:　<input　type="text"　name="username">
　　暗号化:　<keygen　name="security_keygen">
　　<input　type="submit">
</form>
<p><strong>注意:</strong>　Internet　Explorer　は　keygen　タグをサポートしていません。</p>
</body>
</html>

テストを試してみる ‹/›

HTML5 <output> 要素

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

オンラインサンプル

計算結果を <output> 元素に表示します：

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<form　oninput="x.value=parseInt(a.value)+parseInt(b.value)>0
<input　type="range"　id="a"　value="50">100
+<input　type="number"　id="b"　value="50">
=<output　name="x"　for="a　b"></output>
</form>
<p><strong>注意:</strong>　　Internet　Explorer　不支持　output　标签。</p>
</body>
</html>

テストを試してみる ‹/›

Html5中的智能表单

示例

!doctype　html>
<html>
<head>
<meta　charset="utf-8">
<title>Html5中的智能表单　oldtoolbag.com</title>
</head>
<body>
<form　action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Html5中的智能表单</legend>
　　　　　　　　　　　　<label　for="email">
　　　　　　　　　　　　　　　　email：<input　type="email"　name="email"　id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="tel">
　　　　　　　　　　　　　　　　tel:<input　type="tel"　name="tel"　id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="url">
　　　　　　　　　　　　　　　　url:<input　type="url"　name=""　id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="number">
　　　　　　　　　　　　　　　　number:<input　type="number"　name=""　id="number"　step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="search">
　　　　　　　　　　　　　　　　search:<input　type="search"　name=""　id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="range">
　　　　　　　　　　　　　　　　range:<input　type="range"　name=""　id="range"　value="60"　min="0"　max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="color">
　　　　　　　　　　　　　　　　color:<input　type="color"　name=""　id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="time">
　　　　　　　　　　　　　　　　time:<input　type="time"　name=""　id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="date">
　　　　　　　　　　　　　　　　date:<input　type="date"　name=""　id="date"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="month">
　　　　　　　　　　　　　　　　month:<input　type="month"　name=""　id="month"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label　for="week">
　　　　　　　　　　　　　　　　week:<input　type="week"　name=""　id="week"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<input　type="submit"　value="提出"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

テストを試してみる ‹/›

HTML5 新しいフォーム要素

タグ	説明
<datalist>	<input>タグは、オプションリストを定義します。input要素とこの要素を組み合わせて、inputが可能な値を定義します。
<keygen>	<keygen> タグは、フォーム用のキーペア生成フィールドを定義します。
<output>	<output> タグは、スクリプトの出力など、さまざまなタイプの出力を定義します。

HTML5 フォーム属性 HTML5 入力タイプ