ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 タグ

<!-->
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML5 フォーム要素


HTML5 新たなフォーム要素

HTML5 のフォームには、いくつかの新たな要素と属性があります。

この章は、次のフォーム要素をカバーします:

  • <datalist>
  • <keygen>
  • <output>

ブラウザ・サポート

タグ IE Firefox Opera Chrome Safari
<datalist> No 4.0 9.5 No No
<keygen> No 4.0 10.5 3.0 No
<output> No 4.0 9.5 10.0 5.1


<datalist> 要素

<datalist> 要素は、入力フィールドの選択肢のリストを指定します。

リストは、datalist の中の option 要素で作成します。

<datalist> を入力フィールドとバインドするためには、入力フィールドの list 属性に datalist の id を参照させるようにします:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Try it yourself »

チップ: <option> 要素には、必ず value がなければなりません。


<keygen> 要素

<keygen> 要素の目的は、ユーザを認証するための安全な方法を提供することです。

<keygen> 要素は、鍵をペアで生成します。フォームを送信すると、 秘密鍵と公開鍵の2つの鍵が生成されます。

秘密鍵はクライアントに保存され、公開鍵はサーバに送られます。 公開鍵は、将来的にユーザの認証にクライアント証明書を生成するために使用することができます。

現在、この要素のブラウザサポートは、有益なセキュリティ標準であるほど十分ではありません。

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

Try it yourself »


<output> 要素

<output> 要素は、計算またはスクリプトの出力のような、いろいろな出力タイプのために使用します:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

Try it yourself »


HTML5 新フォーム要素

タグ 説明
<datalist> 入力フィールドの選択肢のリストを定義する
<keygen> 鍵ペア生成フィールドを定義する
<output> 計算の結果を表す