キーテイクアウト

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

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

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

追加のHTML5入力タイプ

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

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

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

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

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

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

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

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

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

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

datalists

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

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

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

<span><span><span><input</span>
</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>

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

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

検証の無効化

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

出力フィールド

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

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

入力の分離とラベル付け

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

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

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

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

標(biāo)準(zhǔn)制御なし

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

ブラウザサポート

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

常に正しいタイプ！

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

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

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

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

Server-Sideを検証します

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がHTML5フォーム：マークアップの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。