HTML5 のフォーム

高洛峰
リリース: 2017-02-06 14:11:23
オリジナル
1297 人が閲覧しました

HTML4 と比較して、HTML5 の要素と機能はより高度なセマンティック マークアップを提供し、スクリプトやスタイルによって HTML4 に存在する多数の冗長な要素も削除されます。 HTML5 フォーム機能は、さまざまな Web サイトでフォームをより一貫して動作させ、ユーザー入力データにタイムリーに応答することで、ユーザーに優れたエクスペリエンスを提供します。これらのエクスペリエンスは、ブラウザーのスクリプトを無効にしているユーザーにも当てはまります。

このトピックでは、Gecko/Firefox4 以降でサポートされるいくつかの新機能または変更について説明します。

要素

の type 属性には、さらに多くの値があります。この要素は検索ボックスとして表示されます。入力値から改行は削除されますが、その他の構文の拡張はありません。

tel: この要素は、電話番号を編集するための入力コントロールとして使用できます。電話番号の国際化の違いが非常に明らかであるため、入力値から改行は削除され、その他の構文の拡張は行われません。 pattern や maxlength などのプロパティを使用して、コントロールに入力される値を制限できます。

url: この要素は、URL を編集するための入力コントロールとしてレンダリングされます。改行と先頭と末尾のスペースは自動的に削除されます。

email: この要素は電子メール アドレスとして表示されます。改行は自動的に削除されます。無効な電子メール アドレスを設定することは可能ですが、入力ボックスの制約を満たす場合は、拡張バッカス標準形式 (ABNF): 1( atext / "." ) "@" ldh-str の仕様に準拠する必要があります。 1( "." ldh-str ) ここで、atext は RFC 5322 セクション 3.2.3 で定義され、ldh-str は RFC 1034 セクション 3.5 で定義されます。

注: multiple 属性が設定されている場合、複数のメールを 領域にカンマで区切って入力できますが、Firefox ではこれをサポートしていません。

list: 要素のコンテンツ、および

パターン: コントロールの値をチェックするために使用される正規表現。タイプ値が text、tel、search、url、および email である入力要素に適用できます。

form: この入力がどの

要素に属するかを示す文字列。入力は 1 つのフォームにのみ存在できます。

formmethod: フォームが送信されるときにどの HTTP メソッド (GET または POST) が使用されるかを示す文字列。定義されている場合、 要素のメソッド属性をオーバーライドできます。 formmethod は、type 値が image または submit で、form 属性が設定されている場合にのみ有効になります。

x-moz-errormessage: フォームフィールドの検証が失敗した場合にエラーメッセージを表示する文字列。この値は Mozilla 拡張機能であり、標準ではありません。

要素

要素には新しい属性があります:

novalidate: この属性を設定すると、フォームは送信される前に検証されません。

要素

要素は、 フィールドに入力するときにプロンプ​​トとして表示されます。

要素の list 属性を使用して、特定の入力を特定の 要素に関連付けることができます。

要素


要素は計算結果を表します。

for 属性を使用して、 要素を操作に影響を与える可能性のあるドキュメント内の他の要素 (入力やパラメーターなど) に関連付けることができます。 for 属性の値は、他の要素の ID のスペースで区切られたリストです。

Gecko 2.0 (他のブラウザには当てはまりません) は、 要素の有効性制約とエラー メッセージのカスタマイズをサポートしています:invalid、:valid、:-moz-ui-invalid。 、-moz-ui-valid 付き。これは、計算結果がビジネス ルールに違反しているが、特定の入力値のエラーが原因ではない (たとえば、「合計パーセンテージが 100 を超えることはできない」など) 場合に役立ちます。

placeholder 属性

placeholder 属性は、 要素と