このモジュールは、HTML フォームの習得に役立つ記事をそろえています。 HTML フォームは、ユーザーとやり取りするための強力なツールです。しかし歴史的および技術的な理由により、その能力を十分に生かして使用する方法は、必ずしも明確ではありません。このガイドで HTML フォームの構造からスタイル、データの扱いからカスタムウィジェットまでのあらゆる側面を網羅します。

前提条件

このモジュールを始める前に、少なくとも HTML入門を一通り読んでおくべきです。ここでは簡単に理解できる 基本ガイド が見つかりますし、Native form widgets ガイドも利用できます。

しかしそれ以外のモジュールは少し高度です — ページにフォームウィジェットを置くのは簡単ですが、高度なフォームの機能や CSS や JavaScript を使わないと実際に活用できません。このため、その他の節を見る前にまずは CSSJavaScript を学んでおくのをお勧めします。

: 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、(大半の)コード例を JSBinThimble といったオンラインコーディングプログラムで試すことができます。

基本ガイド

最初の HTML フォーム
このシリーズの最初の記事では HTML フォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。
HTML フォームを構造化する方法
基本の道を外れて、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。

どんなフォームウィジェットが利用できますか?

ネイティブフォームウィジェット
色々なフォームウィジェットの機能をの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。

フォームデータを検証して送信する

フォームデータを送信する
この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そこでデータを受けたらどう扱うか、など。またフォームデータ送信に関連するセキュリティ関心事もいくらか見ていきます。
フォームデータの検証
データ送信だけで充分ではありません — ユーザーがフォームに記入したデータが、我々が処理に成功するような正しいフォーマットであり、アプリケーションが破綻しないかを確認する必要があります。またユーザーが正しくフォームを記入してアプリを使うのにイライラしないよう手助けしたいです。フォーム検証はこの目的を達成するのに役立ちます — この記事では知っておくべきことを教えます。

高度なガイド

カスタムフォームウィジェットを作る方法
場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と、考慮すべき点を、実際のケーススタディと一緒に説明します。
JavaScript でフォームを送信する
この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(FormData オブジェクトの利用も見てください)。
レガシーブラウザーでの HTML フォーム
機能検出などをカバーする記事です。これはクロスブラウザーテストのモジュールにリダイレクトすべきで、そこでは同じ内容をもっと良くカバーしています。

フォームのスタイルガイド

HTML フォームをスタイリングする
この記事は CSS でフォームをスタイリングする入門を提供し、基本的なスタイリングタスクのために知るべき基本も入っています。
HTML フォームの高度なスタイリング
ここでは、スタイルが難しい要素を扱おうとする時に必要となる、高度なフォームスタイリングテクニックを見ます。
フォームウィジェット用のプロパティ互換性テーブル
最後の記事ではどの CSS プロパティがどのフォーム要素と互換性があるのか調べられる、手軽なリファレンスを提供します。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: tomouchi_, Uemmra3, chrisdavidmills, yyss, ethertank
最終更新者: tomouchi_,