HTML＆CSSフォームのガイド（ハッキングなし！）

歴史的に、HTMLフォームは非常に注意が必要です。第一に、少なくとも少しのJavaScriptが必要であり、第二に、CSSがそれらを振る舞わせることができないためです。 ただし、これは必ずしも最新のWebの場合に当てはまるわけではないので、HTMLとCSSのみを使用してフォームをマークアップする方法を学びましょう。

キーテイクアウト

HTMLフォームは、JavaScriptを必要とせずに、HTMLとCSSのみを使用して作成できます。フォーム構造は

要素を使用して作成され、データはアクション属性を使用して送信されます。 Enctypeやターゲットなどの追加の属性を使用して、データエンコードタイプと出力が表示される場所を定義できます。

ラベルは、ユーザビリティとアクセシビリティに不可欠であり、入力の目的を説明しています。ラベルを宣言するには、隣接するラベル、ARIAラベル、ラッピングラベルの3つの方法があります。最も効率的な方法は、ラベル内の入力をラッピングすることです。プレースホルダーは、入力フィールドで期待されるものの例を提供するのにも役立ちます。
• ボタン、色、色、日付、電子メール、ファイルなど、さまざまな入力タイプがあります。ブラウザのデフォルトにより、スタイリング入力は困難になる可能性がありますが、外観属性はこれらをオーバーライドするために使用できます。入力検証は、ユーザー入力が特定の基準を満たしていることを確認するために重要であり、Native-HTML検証またはJavaScriptを使用して達成できます。
  基本構造の形成

要素から始めます。

ここでは何も派手なものではありません。基本的な構造をカバーするだけです。

フォームデータを自然に送信している場合（つまり、JavaScriptなし）、アクション属性を含める必要があります。ここで、値はフォームデータを送信するURLです。メソッドは、達成しようとしているものに応じて取得または投稿する必要があります（GETで機密データを送信しないでください）

さらに、送信されるデータのエンコーディングタイプを定義する使用されていないEnctype属性もあります。また、ターゲット属性は、必ずしもフォームに固有の属性ではありませんが、新しいタブに出力を表示するために使用できます。

JavaScriptベースのフォームは、必ずしもこれらの属性を必要としません

フォームは入力で構成されており、データ値が予想されます。

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

ペンを参照してください

フォーム1 SitePoint（@SitePoint）

Codepenで。

より良い使いやすさとアクセシビリティのためのラベルを含む

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

すべての入力にはラベルが必要です。

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

ラベルは、入力の目的を説明するテキスト記述子です。ラベルを宣言するには3つの方法がありますが、そのうちの1つは他の2つよりも優れています。今すぐこれらに飛び込んでみましょう。

隣接するラベル

隣接するラベルには、ラベルが説明する入力を明示的に宣言する必要があるため、ほとんどのコードが必要です。ほとんどの場合、これは直感に反するものです。代わりにラベル内に入力をラップして、コードを少なくするのと同じ効果を達成できるからです。

言われていると、隣接する方法が拡張状況で必要になる可能性があるため、次のようになります。

上記の例からわかるように、

の属性は入力のID属性と一致する必要があります。入力。入力デバイスはこれをユーザーに中継します（たとえば、スクリーンリーダーはスピーチを介してそれを指示します）。

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

ariaラベル

セマンティックHTMLの方が優れていますが、ARIA（アクセス可能なリッチインターネットアプリケーション）ラベルは、不在で補償できます。この場合、実際のhtml ：がない場合、ラベルがどのように見えるかは次のとおりです。

残念ながら、このアプローチの欠点は視覚的なラベルの欠如です。ただし、これはいくつかのマークアップで問題ないかもしれません（たとえば、見出しとプレースホルダーを備えた単一入力フォーム

）：

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

（プレースホルダーが一瞬で何をするかを説明します。）

ラベル

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

ラベル内の入力をラッピングすることは、最もクリーンなアプローチです。また、CSSのおかげで：Focus-Withinのおかげで、子供の入力がフォーカスを受け取る間、ラベルをスタイルすることもできますが、後で説明します。

プレースホルダーvsラベル

簡単な比較：

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

ラベルは、入力が予想されることを述べています

プレースホルダーは、上記の期待の例を示しています

プレースホルダーはラベルに代わるものになるように設計されていませんが、上記のARIAの例で見たように、視覚的なラベルがないときに失われたコンテキストの一部を追加することができます。 ただし、理想的には、両方を使用する必要があります

ペンを参照してください
• フォーム2 SitePoint（@SitePoint）
Codepenで。

入力タイプの選択

プレースホルダーはテキストベースの入力にのみ適用されますが、実際にはさまざまな入力タイプの全範囲があります。

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

セマンティック入力タイプは、特にネイティブ検証に依存する場合に、フォーム検証中に役立ちます。これについては、まもなくご覧ください。まず、これらの入力をスタイリングする方法を学びましょう

スタイリング入力

間違いなく、コーディングフォームの最も腹立たしい側面は、ブラウザのデフォルトスタイリングを無効にすることです。ありがたいことに、今日、外観：なし; Caniuse.comによると、96.06％のブラウザサポートがあります

次のCSSコードを使用してWebブラウザのデフォルトスタイリングをリセットした後、必要な入力をスタイルできます。これには、ラジオとチェックボックスの入力タイプの両方が含まれています。

ただし、これらの入力のいくつかには、克服するのが難しいか不可能な癖が付属する可能性があります（Webブラウザーに応じて）。このため、多くの開発者はデフォルトタイプに戻る傾向があります= "text"属性=値これらの癖が望ましくないと思う場合（たとえば、入力型= "number"の「CARET」）。

ただし、

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

銀の裏地があります…

inputModeの指定 Caniuse.comによると、82.3％のWebブラウザーサポートを使用すると、新しい入力モード属性は、使用されている入力タイプに関係なく、ハンドヘルドデバイスでどのキーボードレイアウトが表示されるかを指定します。 何もないよりはましだね ユーザー入力の検証

JavaScriptソリューションよりもNative-HTML検証を選択した場合、この点で入力モードは何も達成しないことを忘れないでください。 inputMode = "email"

は

メールアドレスを検証しませんが、入力タイプ= "email"は意志があります。それが違いです。

これを脇に置いて、検証をトリガーするものについて説明しましょう： カスタムルールの作成

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

カスタムルールでは、regexpオブジェクトで使用される（ただし、スラッシュや引用符を包むことなく）、JavaScriptの正規表現の知識が必要です。 1つのルールで小文字（A – Z）およびMinlength/MaxLengthを実施する例は次のとおりです。

詳細については、

注：フロントエンドの検証（Native-HTMLまたはそれ以外）は、サーバー側の検証の代替品として使用しないでください！

スタイリング有効/無効な状態

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

特に明確にするために、これが私たちがスタイルの妥当性をどのようにするかです：

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

ヒューストン、問題があります！

入力はすぐに値（またはその欠如）を検証しようとするため、次のコード（入力が値を保持している間に有効/無効な状態のみが表示されます）が優れている可能性があります。

これは、有効な/無効なスタイリングを示していますが、

プレースホルダーが表示されない場合にのみ（ユーザーが何かを入力したため）

ペンを参照してください フォーム3 SitePoint（@SitePoint）

Codepenで。

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

その他の基本的なこと

フォームデータの送信

フォームデータをサーバーに送信するには、通常、入力に名前属性が必要です。これは、隠された入力にも適用されます：

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

長い形式の入力を受け入れる

本質的に、 は、と同じものです。はい、は確かにより直感的ですが、悲しいかな は、ユーザーからの長い形式の入力を受け入れる正しい方法です。さらに、入力が行う属性のほとんど（すべてではないにしても）を受け入れます。 アクセシビリティを向上させるための入力のグループ

短いフォームははるかに優れたユーザーエクスペリエンスを提供しますが、時にはより長いものが避けられない場合があります。このようなシナリオでは、

要素を使用して関連する入力を含めることができ、

：

知ることができる

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

入力を無効にします

無効属性を追加すると、入力（または焦点を当てる要素）が削除される可能性がありますが、これは通常JavaScriptを介して適用/適用されません。ただし、それがどのように機能するかは次のとおりです

および添付のCSS、必要に応じて：

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

ただし、ユーザーの入力が有効ではないことを示唆する視覚的なキューを追加することだけが追加されている場合は、

一般的なsiblingコンビネーター

（〜）を使用することを望むでしょう。次のコードは、基本的に「無効な入力のある要素に従うものに従う送信ボタン」を意味します。これは機能を変更しませんが、Native-HTMLフォームの検証を活用している場合（これは、送信可能性の無効化/有効化を自動的に処理する）問題です。

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

入力を無効にしますが、とにかくデータを送信します とのミックス、次の例では、値を変更できないことを保証します。違いは、障害者とは異なり、読み取り値がフォームデータとして送信されることです。そして、隠されたものとは異なり、Readonlyが表示されます：

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

増分の変更

数値ベースの入力には、数値を調整する「スピンボタン」があり、各調整の代替増分値を決定するステップ属性も受け入れます。

フォーカスのスタイリングフォーム、ラベル、フィールドセット

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Focus-within：Style

を使用することができます

現在フォーカスを受信して​​いる入力の親

。ほとんどの場合、この要素は、入力の、、または

コンテナになります：

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span>></span>
</span><span><span><span></label</span>></span>
</span>

1つの入力で複数の値を送信します

倍数はファイルと電子メール入力タイプに有効です：

shorthand form code

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span> placeholder<span>="Bruce"</span>></span>
</span><span><span><span></label</span>></span>
</span>

を書く フォームがsingular 、、またはのみで構成されている場合、htmlフォームをマークする速記の方法があります。例を次に示します：

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

これとは対照的に

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

私は何かを逃しましたか？

HTMLは、たとえば10年前よりもはるかに直感的です。それは絶えず進化しており、間違いなくHTML/CSSフォームのテーマをやがて追加することがあります。思い浮かぶ例の1つは、Datalist Elementであり、現時点では非常にバグがかかります（特にFirefoxで）。しかし、それはさておき、私は何かを逃しましたか？

私は、以下を含むそれらの使用が推奨されないため、私が議論しなかったHTMLフォームにはいくつかの側面があることに注意して終わります。

オートフォーカス（アクセシビリティには悪い）
AutoComplete（AutoCompleteを使用しないことは、デフォルトではなく、ユーザーの選択である必要があります）
AccessKey（悪いサポートとアクセシビリティ）
novalidate（これはjavascriptなしでは役に立たない）
HTMLフォームに関する faq

HTMLフォームとは何ですか？

HTMLフォームは、Webページでユーザー入力を収集して収集するために使用される重要な要素です。ユーザーはデータを入力したり、選択を作成したり、処理のためにサーバーに情報を送信したりできます。

基本的なHTMLフォームを作成するには、要素を使用し、テキストフィールド、チェックボックス、ラジオボタン、ボタンなどのさまざまな入力要素を含めます。フォームタグには、データの送信先とそれをどのように処理するかを指定するアクションやメソッドなどの属性があります。

一般的な入力タイプには、テキストフィールド（）、チェックボックス（）、ラジオボタン（）、ドロップダウンリスト（）、およびボタン（）。

ユーザー入力は、サーバー側のスクリプトまたはクライアント側のスクリプト（JavaScriptなど）を使用して処理されます。フォームのアクション属性は、データが送信されるURLを指定し、メソッド属性は送信に使用されるHTTPメソッド（GETまたはPOST）を定義します。フォーム？

GETメソッドは、アドレスバーに表示されるURLにデータを追加し、感度の低いデータに適しています。 POSTメソッドは、リクエスト本体にデータを送信し、ユーザーから隠しておき、機密情報に対してより安全にします。フォームデータは、必要なようなHTML属性を使用して、またはJavaScriptを使用してより複雑な検証を使用して検証できます。 JavaScriptを使用すると、リアルタイム検証を実行でき、入力されたデータが提出前に特定の基準を満たすことを保証します。

はい、CSSを使用してHTMLフォームをスタイリングできます。フォーム要素の外観を変更し、レイアウトを調整し、スタイルを適用して、全体的な視覚的魅力とユーザーエクスペリエンスを向上させることができます。

HTMLフォームを使用してファイルをアップロードできますか？

はい、要素でファイルアップロードを有効にすることができます。これにより、ユーザーはフォームを介してファイルを選択および送信できます。フォームのenctype属性は、ファイルアップロードのために「MultiPart/Form-Data」に設定する必要があります。

以上がHTML＆CSSフォームのガイド（ハッキングなし！）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。