HTML5フォーム：マークアップ

キーテイクアウト

• HTML5は、電子メール、Tel、URL、検索、数字、範囲、日付、日付、日付、DateTime-Local、月、週、時間、時間、色を含む、フォームにさまざまな新しい入力タイプと属性を導入します。 JavaScriptコードなしの支援と検証
HTML5は、出力（計算またはユーザーアクションの結果）、進行状況（進行状況バー）、およびメーター（属性の設定された値に応じて色を変更できるスケール）など、読み取り専用出力オプションを提供します。 。また、入力のIDを記載する属性を使用して、入力自体の周りまたは隣にラベル要素を使用することもできます。
• HTML5入力タイプは将来ですが、要求しているデータには常に正しい入力タイプを使用して、サーバー側のユーザーデータを検証することが重要です。クライアント側の検証は、サーバー側の検証に代わるものではなく、決してありません。
これは、HTML5 Webフォームに関する3部構成のシリーズで最初です。スタイリングとクライアント側のJavaScript検証APIに進む前に、この記事の基本的なマークアップについて説明します。すでにフォームに精通していても、これを読むことをお勧めします。多くの新しい属性とgotchasがあります。 HTMLフォームはありふれたものかもしれませんが、ほとんどのWebサイトやアプリには不可欠です。 HTML4では、入力フィールドは以下に制限されていました。
入力型= "text"

入力型= "チェックボックス"
入力型= "Radio"
入力型= "パスワード"
入力型= "hidden" - データの場合、ユーザーは
• を表示できません
入力型= "ファイル" - アップロード
Textarea - より長いテキストの入力
選択 - ドロップダウンリストの場合
ボタン - 通常、フォームの送信に使用されますが、入力タイプ= "submit"および入力型= "画像"も使用できます。
また：
CSSスタイリングの可能性は限られていました

日付やカラーピッカーなどのカスタムコントロールをコードで開発する必要がありました。
クライアント側の検証には、JavaScriptが必要です。

追加のHTML5入力タイプ

新しい入力タイプの大洪水が導入されました。これらは、JavaScriptコードなしでネイティブの入力支援と検証を提供します…

タイプ 説明 メール メールアドレスを入力してください 電話 電話番号を入力します - 厳密な構文は強制されませんが、ラインブレークは削除されます URL URLを入力します 検索 ラインブレークがある検索フィールドが自動的に削除されました 番号 フローティングポイント番号 範囲 通常、スライダーで表される近似値を入力するためのコントロール 日付 日、月、年を入力してください DateTime 現在のUTCタイムゾーンに基づいて、日、月、年、時間、分、秒、マイクロ秒を入力します DateTime-Local タイムゾーンのない日付と時刻を入力します 月 タイムゾーンのない月と年を入力してください 週 タイムゾーンのない1週間の番号を入力してください 時間 タイムゾーンなしで時間を入力してください 色 色を指定します 入力属性

特に明記しない限り、入力フィールドは次のフォーム固有の属性のいずれかを持つことができます。いくつかはブール属性です。つまり、値は必要ありません。

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

より厳しいXHTMLのような構文を好む場合は、それらを追加できますが、例えば

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

属性 説明 名前 入力フィールド名 価値 初期値 チェックしました チェックボックスまたは無線入力をチェックします 最大長 入力された文字列の最大長。これは、HTML5のTextareaフィールドにも適用できます minlength 入力された文字列の最小長。これは文書化されていますが、執筆時点では、ブラウザのサポートが不十分であり、属性によりHTMLバリデーターがエラーが発生します。別のオプションはpattern = "。{3、}です「これは少なくとも3人のキャラクターを強制します。 プレースホルダー 入力ボックスに示されている微妙なテキストのヒント オートフォーカス ページが読み込まれたときにこの（非隠されていない）フィールドにフォーカスを設定します 必須 値を入力する必要があることを示します パターン 値が正規表現に付着するようにします 分 許可されている最小値（数値タイプと日付タイプ） マックス 許可されている最大値（数値タイプと日付タイプ） ステップ 値の粒度。たとえば、入力型= "number" min = "10" max = "19" step = "2"は、値10、12、14、16、または18のみが許可されます。 オートコンプリート ブラウザに自動完了のヒントを提供します。 「請求メール」または「オン」または「オフ」に設定して、それに応じて有効にして無効にすることができます inputMode 入力メカニズムを指定します。最も便利なオプション：

• verbatim - ユーザー名
などの非散布コンテンツ
• ラテン語 - 検索フィールドなどのラテンスクリプト
• ラテン名 - 名前、つまり、最初の手紙の大文字
• ラテン語 - - メッセージ、ツイートなどの散文コンテンツ
• 数値 - 数値または範囲が適切でない場合、たとえばクレジットカード番号

サイズ テキストまたはパスワード入力の文字のサイズまたは電子メール、Tel、URL、または検索入力のピクセル。 CSSを使用してフィールドをスタイリングする必要があるため、おそらく最も避けられます。 行 テキスト行の数（Textareaのみ） cols テキスト列の数（Textareaのみ） リスト 設定されたデータリストのオプションを指します スペルチェック スペルチェックを有効または無効にするためにtrueまたはfalseに設定します 形状 この入力が属するフォームのID。一般に、入力はフォーム内にネストする必要がありますが、この属性により、ページのどこでも入力を定義することができます 形式 送信時にフォームアクションをオーバーライドするためのURIを指定します（ボタン/画像のみを送信） formmethod 指定して、送信時にフォームメソッドをオーバーライドするために取得または投稿します（ボタン/画像のみを送信） FOMENCTYPE 送信時にコンテンツの種類を指定します（Text/Plain、MultiPart/Form-DataまたはApplication/x-www-form-urlencoded on submit buttons/imagesのみ） formtarget ターゲットウィンドウ/フレームを指定して、送信時にフォームターゲットをオーバーライドします（ボタン/画像のみを送信） 読みます 入力値は変更され、検証され、送信されます 無効 入力を無効にします - 検証は発生せず、データは送信されません
日付フィールドは、値、最小、および最大に常にyyyy-mm-ddを使用する必要があることに注意してください 属性。
次の例では、 @mysite.comで終了し、ページが読み込まれたときに焦点を合わせた必須のメールを要求します。

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

datalists

データリストには、あらゆる種類の入力に適したオプションのセットが含まれています。

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

データリストがサポートされると、ブラウザは入力を開始すると自動コンプリートオプションを提示します。コントロールをダブルクリックするか、ダウン矢印をクリックすると、リスト全体が表示されます（表示されている場合）。標準の選択ドロップダウンとは異なり、ユーザーはこれらの選択を無効にして独自の価値を入力できます。 標準選択オプションなどの値とテキストを設定することができます。

<span><span><span><input>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span></span>

ただし、実装は異なることに注意してください。たとえば、Chromeが値（つまり）を好む一方で、テキスト自体（Internet Explorer）にFirefox Auto Completesが表示され、テキストがグレイアウトしています。

Ajaxを介してオプションを取得したい場合、データリストはJavaScriptによって入力されます。

検証の無効化

フォーム要素にNovalidate属性を設定することにより、フォーム全体の検証を無効にできます。または、フォームの送信ボタン/画像にFormNoValidate属性を設定することもできます。 また、入力の無効な属性を設定すると、そのフィールドでの検証が妨げられることを忘れないでください。

出力フィールド

主に入力タイプについて説明していますが、HTML5は読み取り専用の出力オプションも提供しています。

• 出力 - 計算またはユーザーアクションの結果
• 進行状況 - 進行状況バー（値と最大属性がステータスを定義します）
• メーター - 属性値、min、max、low、high、optimumの値に応じて、緑、mber、赤の間で変化できるスケール

入力の分離とラベル付け

whatwg.orgフォーム仕様は次のように述べています。 フォームの各部分は段落と見なされ、通常、

要素を使用して他の部分から分離されます

面白い。私は通常、divを使用していますが、それはセマンティックの観点から重要だとは思いません。マージンを変更するにはクラスを適用する必要があるが、Pタグは短くなります。 さらに重要なことは、入力自体の周りまたは隣にラベル要素を使用する必要があります。

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

標準制御なし

ブラウザベンダーが従うべき特定のインターフェイスガイドラインはありません。これは意図的です。典型的なデスクトップマウス制御の日付ピッカーは、モバイルデバイスでは小さすぎるため、ベンダーはタッチベースの代替品を実装できます。

ブラウザサポート

すべてのブラウザですべての入力タイプと属性がサポートされているわけではありません。一般に、IE10のほとんどの最新のブラウザーには、電子メールや番号などの基本が含まれています。ただし、日付タイプは、執筆時点でWebKitおよびBlinkブラウザでのみサポートされています。 ブラウザは、特定のタイプのときに標準のテキスト入力に戻り、それらの値がサポートされていない場合は属性を無視します。

常に正しいタイプ！

を使用してください 要求しているデータに正しい入力タイプを使用することが重要です。それは明らかなように思えるかもしれませんが、標準のテキスト入力を使用するように誘惑されると、状況に遭遇します。 日付を検討してください。サポートは斑状であり、これは実装の問題につながります。

標準の日付入力は、日付ピッカーがロケールでどのように表示されるかに関係なく、常にyyyy-mm-dd形式で日付を返します。
IEとFirefoxは標準のテキスト入力に戻りますが、ユーザーはUS MM-DD-YYYまたはヨーロッパDD-MM-YYY形式に値を入力することを期待する場合があります。

2. jQuery UIのようなJavaScriptの日付ピッカーを使用すると、カスタム形式（一貫性のためにyyyy-mm-dd）を定義できますが、JavaScriptが有効になることを保証することはできません。

簡単な解決策は、HTML5日付入力を放棄し、テキストに戻し、独自の日付制御を実装することです。しないでください。すべての画面解像度ですべてのデバイスで機能するカスタム日付ピッカーを作成することは決してありません。キーボード、マウス、タッチ入力をサポートし、JavaScriptが無効になっているときに動作し続けます。特に、モバイルブラウザーは多くの場合、デスクトップのいとこよりも先を行っており、優れたタッチスクリーンコントロールを実装しています。 HTML5入力タイプは未来です。それらを使用し、必要に応じて、適切なクロスブラウザーサポートが必要な状況でJa​​vaScriptポリフィルを追加します。しかし、忘れないでください…

Server-Sideを検証します

ブラウザの検証は保証されていません。クロムの最新バージョンを使用して全員にアクセスを強制したとしても、次のことはできません。

• ブラウザのバグまたはJavaScriptの障害が無効なデータを許可します
• ブラウザツールを使用してHTMLまたはスクリプトを変更するユーザー制御外のシステムからの提出、または
ブラウザとサーバーの間のデータ傍受（確かにHTTPを超えて）。
• クライアント側の検証は、サーバー側の検証に代わるものではなく、決してありません。サーバー上のユーザーデータの検証が不可欠です。クライアントでは、それはです。 最後に、日付をyyyy-mm-ddで受け取るか、ユーザーに指定した形式（mm-dd-yyyy、ddmm-yyyなど）が最初の4文字で数字をチェックするか、母国語を使用します/必要に応じて、フレームワークの解析方法。 この記事では多くのことを取り上げました。次の部分では、フォーム関連のCSSプロパティを調べます。 HTML5に関するよくある質問（FAQ）はマークアップ

を形成します 形式のマークアップでHTML5を使用することの重要性は何ですか？

HTML5は、フォームフィリングのより良いユーザーエクスペリエンスを提供するさまざまな新しい入力タイプと属性を紹介します。これらの新しい機能により、電子メール、日付、時間など、より具体的な入力タイプが可能になり、ブラウザ自体によって検証され、追加のJavaScriptが必要になります。これにより、よりクリーンで効率的なコードとよりスムーズなユーザーエクスペリエンスにつながります。

HTML5は、フォームマークアップのアクセシビリティをどのように改善しますか？たとえば、「必須」属性を使用して、必須フィールドが記入されるようにすることができます。「プレースホルダー」属性は、フィールドで予想される情報の種類についてのヒントをユーザーに提供できます。さらに、「オートフォーカス」属性は、ページが読み込まれたときに特定の入力フィールドにカーソルを自動的に焦点を合わせて、ユーザーのフォームとの対話をガイドできます。

フォームマークアップにHTML5を使用する場合に避けるべきいくつかの一般的な間違いは何ですか？

1つの一般的な間違いは、HTML5で導入された新しい入力型と属性を適切に使用しないことです。たとえば、間違った入力タイプを使用すると、データが誤って送信される可能性があります。別の間違いは、HTML5をサポートしていない古いブラウザーに適切なフォールバックを提供しないことです。これにより、古いテクノロジーを使用している人のユーザーエクスペリエンスの低下につながる可能性があります。

HTML5を使用してよりインタラクティブなフォームを作成するにはどうすればよいですか？インタラクティブフォーム。たとえば、「Datalist」要素を使用して入力フィールドのオプションのドロップダウンリストを作成できますが、「進行状況」および「メーター」要素を使用して、タスクの進行状況または現在の値を視覚的に表すことができます。それぞれ既知の範囲。

HTML5はフォームの検証をどのように処理しますか？

HTML5は、特定の属性を使用して組み込みのフォーム検証を導入します。たとえば、「必須」属性を使用して、フィールドが空のままにならないようにし、「パターン」属性を使用して、入力フィールドの値が一致する必要がある正規表現を指定できます。入力がこれらの基準を満たしていない場合、フォームは提出されず、ユーザーは入力を修正するように求められます。 HTML5の要素は、それらに含まれるコンテンツの種類を明確に示しているため、開発者とマシン（検索エンジンなど）の両方がWebページの構造とコンテンツを理解しやすくなります。これにより、検索エンジンの最適化とアクセシビリティが向上します。

HTML5フォームが古いブラウザーと互換性があることを確認するにはどうすればよいですか？すべてのHTML5機能をサポートしない可能性のあるブラウザ。これは、JavaScriptを使用して、ブラウザが特定の機能をサポートするかどうかを検出し、そうでない場合は代替の実装を提供することで実行できます。 🎜> HTML5は、フォームのモバイルエクスペリエンスを改善できるいくつかの機能を紹介します。たとえば、「オートフォーカス」属性を使用して、ページが読み込まれたときに特定の入力フィールドにカーソルを自動的にフォーカスすることができ、ユーザーがフィールドを手動でタップする必要性を減らします。さらに、「電子メール」や「Tel」などの新しい入力タイプにより、モバイルデバイスに特殊なキーボードが表示されるため、ユーザーが正しいタイプのデータを簡単に入力できます。

HTML5のWebフォームを構築するためのいくつかのベストプラクティスは何ですか？

CSSを使用してHTML5フォームをスタイリングするにはどうすればよいですか？ HTML5はさまざまな方法で形成されます。たとえば、CSSを使用して、フォーム要素の色、サイズ、フォントを変更し、境界と背景を追加し、ホバー効果を適用できます。さらに、CSSを使用して、フォームコントロールやラベルを調整したり、マルチコラムフォームの作成などのフォーム要素のレイアウトを制御できます。

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