HTML5フォーム
HTML5の新しい入力タイプ
HTML5は、新しいフォームの入力タイプの数を持っています。これらの新機能は、より優れた入力コントロールと検証を提供します。
- Eメール
- URL
- 数
- 範囲
- 日付ピッカー（日、月、週、時間、日時、日時、ローカル）
- 探す
- 色
入力タイプ - メール
電子メールの種類は、メールアドレスの入力フィールドが含まれている必要があります。
フォームが送信されると、自動的に電子メールフィールドの値を確認します。
E-mail: <input type="email" name="user_email" />
入力タイプ - URL
URLタイプは、URLアドレスが含まれている必要があり、入力フィールドに使用されます。
フォームが送信されると、自動的にURLフィールドの値を確認します。
Homepage: <input type="url" name="user_url" />
入力タイプ - 数
タイプ番号の入力フィールドに値が含まれている必要があります。
あなたはまた、許容可能な数字の制限を設定することができます。
Points: <input type="number" name="points" min="1" max="10" />
定義された種類の所定の数に次のプロパティを使用してください：
| プロパティ | 値 | 説明 |
|---|---|---|
| 最大 | 数 | 規則によって許容される最大 |
| 私に | 数 | 規制によって許容される最小 |
| ステップ | 数 | 合法的に番号間隔（ステップ=「3」であれば、法的番号-3,0,3,6等） |
| 値 | 数 | 指定されたデフォルト値 |
入力タイプ - レンジ
入力フィールドのタイプの範囲は、デジタル値の範囲を含むべきです。
範囲タイプは、スライドバーとして示されています。
あなたはまた、許容可能な数字の制限を設定することができます。
<input type="range" name="points" min="1" max="10" />
定義された種類の所定の数に次のプロパティを使用してください：
| プロパティ | 値 | 説明 |
|---|---|---|
| 最大 | 数 | 規則によって許容される最大 |
| 私に | 数 | 規制によって許容される最小 |
| ステップ | 数 | 合法的に番号間隔（ステップ=「3」であれば、法的番号-3,0,3,6等） |
| 値 | 数 | 指定されたデフォルト値 |
入力タイプ - 日付ピッカー（日付ピッカー）
HTML5には、複数の日付と時刻を選択するための新しい入力タイプがあります。
- 日付 - 選択し、日、月、年
- 月 - 月を選択し、年
- 週 - 週とで選択
- 時間 - 時間を選択します（時間と分）
- 日時 - 時間、日、月、年（UTC時間）を選択します
- 日時ローカル - 時間を選択するために、日、月、年（現地時間）
次の例では、カレンダーから日付を選択することができます：
Date: <input type="date" name="user_date" />
入力タイプ - 検索
そのようなサイトの検索やGoogle検索などの検索ドメインの種類を検索します。
通常のテキストフィールドとしてフィールドを検索します。
新しいHTML5のフォーム要素
HTML5はフォーム関わる要素や属性の数を持っています。
- データリスト
- keygenの
- 出力
データリストの要素
データリストの要素は、オプションの入力フィールドのリストを指定します。
オプションリストが作成されたデータリスト内の要素です。
入力フィールドにバインドされたデータリストについては、プロパティ参照番号のデータリストの入力フィールドリストを使用します。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
keygenの要素
keygenの要素は、ユーザーを確認するために信頼性の高い方法を提供するように作用します。
keygenの要素は、鍵ペアジェネレータ（鍵ペアジェネレータ）です。フォームが送信されると、それは二つの鍵、秘密鍵、公開鍵を生成します。
秘密鍵（秘密鍵）をクライアントに格納され、公開鍵（公開鍵）をサーバに送信されました。公開鍵は、クライアント証明書（クライアント証明書）の後に、ユーザを確認するために使用することができます。
現在、この悪い要素のためのブラウザのサポートは、便利な安全基準にするのに十分ではありません。
<form action="demo_form.php" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
出力要素
このような計算やスクリプト出力として出力の異なるタイプのための出力素子。
<output id="result" onforminput="resCalc()"></output>
HTML5の新しいフォームのプロパティ
新しいフォームのプロパティ：
- オートコンプリート
- NOVALIDATE
新しい入力属性：
- オートコンプリート
- オートフォーカス
- 形
- フォームオーバーライド（フォームアクション、formenctype、フォームメソッド、formnovalidate、フォームのターゲット）
- 高さ和幅
- リスト
- 最小、最大和ステップ
- 複数
- パターン（正規表現）
- プレースホルダ
- 必須
オートコンプリート属性
フォームや入力フィールドが自動補完を持っている必要があることをオートコンプリート属性を指定します。
**注：**オートコンプリートを適用<form>、次の種類だけでなく、ラベル<input>テキスト、検索、URL、電話：タグ 、電子メール、パスワード、datepickers、範囲および色。
ユーザーが自動補完フィールドに入力を開始すると、ブラウザがフィールドに入力するオプションが表示されます：
<form action="demo_form.php" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
**注：**一部のブラウザでは、あなたが財産を拾うためにオートコンプリート機能を有効にする必要があります。
オートフォーカス属性
ページのロード時にオートフォーカス属性は、ドメインが自動的に焦点を当てて、指定されました。
**注：**オートフォーカス属性がすべてに適用される<input>ラベルの種類。
User name: <input type="text" name="user_name" autofocus="autofocus" />
フォームの属性
属性は、フォームの入力フィールドが1つのまたは複数のフォームに属し指定します。
**注：**フォームのプロパティは、すべてに適用される<input>ラベルの種類。
フォーム属性は、フォームの所有者のIDを参照する必要があります。
<form action="demo_form.php" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
**注：**スペース区切りのリストを使用し、複数のフォームを参照してください。
書き換え特性を形成します
書き換え特性を形成する（フォームオーバーライド属性）を使用すると、フォーム要素に設定された属性の一部を上書きすることができます。
フォーム書き換え属性は次のとおりです。
- formaction - オーバーライドフォームのaction属性
- formenctype - オーバーライドフォームのenctype属性
- formmethod - オーバーライドフォームのメソッド属性
- formnovalidate - オーバーライドプロパティNOVALIDATEの形
- formtarget - オーバーライドフォームのターゲット属性
**注：**フォーム書き換えプロパティは、次のタイプに適用され<input>たラベル：提出と画像。
<form action="demo_form.php" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.php" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
**注：**これらの属性は、ボタンが異なる作成する場合に便利です提出します。
高さと幅の属性
高さと幅が所定の像高と入力タイプの画像の幅の属性。
**注：**高さと幅のプロパティは、画像の種類に適用され<input>たラベル。
<input type="image" src="img_submit.gif" width="99" height="99" />
プロパティリスト
リストの属性データリストは、入力フィールドを所定の。データリストの入力フィールドには、オプションのリストです。
**注：**リストプロパティには、次のタイプに適用され<input>たテキスト、検索、URL、電話：タグ 、電子メール、日付ピッカー、番号、範囲および色。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
MIN、MAX、およびステップ属性
入力種類の（制約）を定義するための最小値、最大値、およびステップ属性は数値または日付が含まれています。
最大属性は、最大許容入力フィールドを指定します。
分の属性は、入力フィールドに許可される最小値を指定します。
ステップ属性は、法的番号入力フィールド区間（IFステップ=「3」、法的数値-3,0,3,6等）を指定します。
**注：次のタイプのための** MIN、MAX、およびステップ属性<input>タグ：日付ピッカー、数及び範囲。
次の例が示す数値フィールド、フィールドは、ステップ3（法的番号0,3,6および9）を用いて、0と10の間の値を受け入れ：
Points: <input type="number" name="points" min="0" max="10" step="3" />
複数のプロパティ
選択可能な所定の複数の属性値の入力フィールドの複数。
**注：**複数のプロパティには次の種類に適用され<input>、電子メール、およびファイル：。
Select images: <input type="file" name="img" multiple="multiple" />
NOVALIDATEプロパティ
フォームを送信する際NOVALIDATE財産条項は、フォームの入力フィールドを検証したりべきではありません。
**注：** NOVALIDATEプロパティが適用される<form>と、次のタイプ<input>のタグ：テキスト、検索、URL、電話 、電子メール、パスワード、日付ピッカー、範囲および色。
<form action="demo_form.php" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern属性
所定の入力フィールドパターン（パターン）を検証するための属性のパターン。
モード（パターン）は正規表現です。
**注：**パターンのプロパティは、次のタイプに適用され<input>たタグ：テキスト、検索、URL、電話 、電子メールとパスワードを入力します。
次の例では、テキストのみのフィールド（なし数字または特殊文字）を含む3つの文字を示しています。
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder属性
プレースホルダの属性は、入力フィールドの期待値を記述し、ヒント（ヒント）を提供します。
**注：**プレースホルダのプロパティは、次のタイプに適用され<input>たタグ：テキスト、検索、URL、電話 、電子メールとパスワードを入力します。
ヒント（ヒント）を入力フィールドに表示され、空に表示されているフィールドがフォーカスを取得したときに消えます。
<input type="search" name="user_search" placeholder="Search" />
必要な属性
入力フィールドが提出する前に、（空でない）満たされていなければならないという必要な属性を指定します。
**注：次のタイプのための**必要な属性<input>タグ：テキスト、検索、URL、電話 、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオおよびファイル。
Name: <input type="text" name="usr_name" required="required" />
HTML5グローバル・プロパティ
HTML5のプロパティを追加しました。
| プロパティ | 説明 |
|---|---|
contenteditable |
要素の内容の規定を編集することができるかどうか。 |
contextmenu |
コンテキストメニュー要素の規定。ユーザーが要素をクリックするとコンテキストメニューが表示しました。 |
data-* |
プライベートカスタムページやアプリケーションのためのデータストレージ。 |
draggable |
要素の規定をドラッグすることができるかどうか。 |
dropzone |
コピー、移動、またはリンクにあなたがドラッグされているデータをドラッグするかどうかを指定します。 |
hidden |
要素のまだか、もはや関連規定。 |
spellcheck |
スペルや文法チェックの要素の規定かどうか。 |
translate |
かどうかの規定は、要素の内容を翻訳する必要があります。 |
HTML5のイベント
イベントのプロパティ]ウィンドウ
（に適用されるトリガーイベントのWindowオブジェクト<body>ラベル）：
| プロパティ | 値 | 説明 |
|---|---|---|
| onafterprint | 脚本 | 文書印刷後に実行するスクリプト。 |
| onbeforeprint | 脚本 | 文書が印刷される前にスクリプトが実行されます。 |
| onbeforeunload | 脚本 | 文書は、以前に実行するスクリプトをアンインストールします。 |
| ONERROR | 脚本 | エラーが発生したときに実行するスクリプト。 |
| onhaschange | 脚本 | スクリプトを実行すると、文書が変更されたとき。 |
| onMessage | 脚本 | メッセージがトリガされたときに実行するスクリプト。 |
| onoffline | 脚本 | このスクリプトは、時にドキュメントをオフラインで実行するとき。 |
| ononline | 脚本 | スクリプトを実行すると、文書はライン上にあるとき。 |
| onpagehide | 脚本 | スクリプトを実行するとウィンドウが隠されているとき。 |
| onpageshow | 脚本 | スクリプトを実行するとウィンドウが表示されたとき。 |
| onpopstate | 脚本 | スクリプトウィンドウには、実行中の歴史を変更した場合。 |
| onredo | 脚本 | 文書実行アンドゥ（やり直し）がスクリプトを実行するとき。 |
| onstorage | 脚本 | 更新後のウェブストレージエリアを実行するスクリプト。 |
| onundo | 脚本 | 実行元に戻す際に、文書を実行するスクリプトで。 |
フォームイベント
HTMLフォームでトリガイベントアクション（ほぼすべてのHTML要素に適用されるが、フォームの中で最も一般的な要素）：
| プロパティ | 値 | 説明 |
|---|---|---|
| oncontextmenu | 脚本 | ときに、コンテキストメニューがトリガーされたときに実行されるスクリプト。 |
| onformchange | 脚本 | フォームが変更されたときに実行するスクリプト。 |
| onforminput | 脚本 | フォームは、ユーザーの入力を実行するスクリプトを取得するとき。 |
| oninvalid | 脚本 | 時に無効な要素を実行するスクリプト。 |
マウスイベント
マウスまたは同様のユーザーアクションイベントによってトリガ：
| プロパティ | 値 | 説明 |
|---|---|---|
| ondrag | 脚本 | 要素はあなたがドラッグしたときに実行するスクリプトです。 |
| ondragend | 脚本 | ドラッグ操作で実行中のスクリプトの終わり。 |
| ondragenter | 脚本 | 効果的な要素の要素は、時にエリアを実行するスクリプトをドラッグしてドラッグされたとき。 |
| ondragleave | 脚本 | 要素はスクリプトを去ったとき時に、有効なドロップターゲットを実行しています。 |
| OnDblClick | 脚本 | script要素は、ドロップターゲットの効果的な運用にドラッグされた場合。 |
| ondragstart | 脚本 | このスクリプトは、ドラッグ操作で実行して始まりました。 |
| ondrop | 脚本 | このスクリプトは、要素のドラッグ＆ドロップ操作をドラッグされているとき。 |
| onmousewheel | 脚本 | マウスホイールは、実行スクリプトであることをスクロールするとき。 |
| onscroll | 脚本 | スクリプトは時に転動体のスクロールバーで実行された場合。 |
メディアイベント
トリガ（ビデオ、画像、音声など）イベントのメディアでは（のようなメディア要素内のすべてのHTML要素に適用されますが、一般的な、<audio>、<embed>、<img>、<object>および<video>）：
| プロパティ | 値 | 説明 |
|---|---|---|
| oncanplay | 脚本 | スクリプトファイルには、実行の再生を開始する準備ができている場合には（バッファの先頭に十分です）。 |
| oncanplaythrough | 脚本 | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 |
| ondurationchange | script | 当媒介长度改变时运行的脚本。 |
| onemptied | script | 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 |
| onended | script | 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 |
| onerror | script | 当在文件加载期间发生错误时运行的脚本。 |
| onloadeddata | script | 当媒介数据已加载时运行的脚本。 |
| onloadedmetadata | script | 当元数据（比如分辨率和时长）被加载时运行的脚本。 |
| onloadstart | script | 在文件开始加载且未实际加载任何数据前运行的脚本。 |
| onpause | script | 当媒介被用户或程序暂停时运行的脚本。 |
| onplay | script | 当媒介已就绪可以开始播放时运行的脚本。 |
| onplaying | script | 当媒介已开始播放时运行的脚本。 |
| onprogress | script | 当浏览器正在获取媒介数据时运行的脚本。 |
| onratechange | script | 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 |
| onreadystatechange | script | 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 |
| onseeked | script | 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 |
| onseeking | script | 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 |
| onstalled | script | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 |
| onsuspend | script | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 |
| ontimeupdate | script | 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 |
| onvolumechange | script | 每当音量改变时（包括将音量设置为静音）时运行的脚本。 |
| onwaiting | script | 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本 |
