HTML5フォーム：新しいコントロール

html5は、<datalist></datalist>、<output></output>、<keygen></keygen>、<progress></progress>、および<meter></meter>の5つの新しいフォーム要素を導入します。それぞれが明確な目的を果たしています。

要素はゲージとして機能し、指定された範囲内の値を視覚的に表します。 重要なことに、<meter></meter>属性がなく、フォームには提出されていません。 最小値のデフォルトは0またはメーターの値（いずれか低い方）で、最大デフォルトは1またはメーターの値（いずれか高い方）になります。 name

要素は、

属性と<progress></progress>属性を使用して、タスクの完了率を表示します。 灰色（0％）から青（100％）に範囲の部分的に満たされたバーとしてレンダリングされます。 省略されたmaxは、不確定な進行状況インジケーター（多くの場合、アニメーションバーまたはドット）になります。 valuevalue要素は計算された結果を表示します。ユーザーが値を直接操作しないときに理想的です。 他のフォームフィールドから派生したその値は、フォームで提出されます。 JavaScriptは、多くの場合、この値を動的に更新します

（Alexis Goldstein、Louis Lazaris、およびEstelle Weylによる「HTML5＆CSS3 for the Real World、2nd Edition」からの抜粋。店舗および電子書籍として入手可能） <output></output>新しい

属性と一般的なフォーム要素属性を調査しました。 ただし、HTML5はもっと提供します！

とを確認し、と

。

input typeおよび<progress></progress>要素<meter></meter> <keygen></keygen><output></output>範囲内の値を表示するゲージを作成します（

、

、および<progress></progress>を使用）。 多くの数値入力とは異なり、<meter></meter>属性がなく、提出されていません。最小デフォルトは0または

、最大1または

になります。変動する値（テストスコア、燃料レベルなど）に使用します。 サポートされているブラウザ（Android 4.4、ただしiOS7またはIE11ではなく）は、色コードされたゲージ（黄色、緑、赤の範囲に基づいて赤）を表示します。 <meter></meter>min進捗状況を示すべきではありません。代わりにmaxを使用します。 valuenameとvalueを使用して、タスクの完了（0-100％）を表示します。ブラウザは、パーセンテージをバーとして計算して表示します。 不特定のvalueは、不確定な進行状況インジケーターを作成します。

とは異なり、

は<meter></meter>にのみ増加します。 デフォルトは<progress></progress>になり、幅と高さの調整が可能になります（高さは、バーの高さではなく間隔に影響します）。

<output></output>要素

<output></output>計算結果は、ユーザーに表示されますが、直接編集可能ではありません。 JavaScriptを介して多くの場合更新されるその値は、他のフォームフィールドから派生し、フォームで提出されます。 for属性は、関連する入力フィールドにリンクします

公開キーのペアを生成し、公開キーを提出します。 サポートはブラウザ（Opera、Chrome、Safari、Android、Firefoxがサポートしていますが、iOS7またはIE11をサポートしていません）によって異なります。 <keygen></keygen>およびchallenge（現在のみkeytype）はその属性です。rsa

属性contenteditable

標準のフォーム要素が不十分な状況（たとえば、インラインのwysiwygエディター）の場合、

属性（またはcontenteditable）は要素を編集可能にします。 自動的に送信されていませんが、JavaScriptはサーバー側の提出を処理できます。 これは編集可能なプロファイルでよく見られます。 contenteditable="true"を追加すると、要素とその子孫が編集可能になります（明示的にcontenteditableに設定されていない限り）。 クライアント側のDOMアップデートには、保存するためにJavaScriptが必要です contenteditable="false"既存のフォームコントロールへの変更

要素

<form></form>html5は、

（ネイティブ検証なしで提出）で

を拡張し、<form></form>（デフォルトは現在のページにデフォルト）、およびnovalidate（特定の送信ボタンの場合はオーバーライドaction）を省略します。 formactionはaction要素に直接適用することもできます。autocomplete <form></form>

要素

<optgroup></optgroup>HTML5は、マルチレベルの選択メニューのネストされた

要素を許可します

<optgroup></optgroup>要素

<textarea></textarea> 's

および

属性は不要になりました（サイジングにCSSを使用してください）。 <textarea></textarea>属性（値：rowsまたはcols）は、提出時にラインブレークを制御します。 wrap結論soft hardこれは、多くのHTML5フォームの強化をカバーしています。 ブラウザサポートの成長により、JavaScriptの検証とUIの改善が減少します。レガシーブラウザーは持続しますが、適切なポリフィルでHTML5フォームを採用することをお勧めします。 次の章では、HTML5のビデオおよびオーディオ機能を説明します

よくある質問（FAQ）

（FAQSセクションは、元のテキストに表示されている情報を正確に反映しているため、ほとんど変化していません。）

新しいフォーム要素、スタイリング、検証、イベント処理、およびモバイル使用に関する質問と回答すべて適切に対処され、提供されたテキストと一致しています。 したがって、ここでそれらを再現することは冗長です。

以上がHTML5フォーム：新しいコントロールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。