ウェブフォームの構成要素

このモジュールを始める前に、少なくとも HTML 入門を一通り読んでおくべきです。ここでは簡単に理解できる導入ガイドがあり、ネイティブフォームコントロールガイドも利用できます。

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

上記のテキストは、なぜ私たちがウェブフォームを HTML、CSS、JavaScript のトピックに混ぜるのではなく、独立したモジュールにしたかを示す良い指標です。フォーム要素は他のほとんどの HTML 要素よりも複雑であり、またフォーム要素を最大限に活用するためには、関連する CSS と JavaScript のテクニックを密接に組み合わせる必要があります。

初めてのウェブフォーム

このシリーズの最初の記事では ウェブフォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。

HTML フォームの構築方法

基本的な話と共に、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。

ネイティブフォームウィジェット

オリジナルの HTML の <input> 型の詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。

HTML5 の入力型

ここでは <input> 要素を深く見ていき、HTML5 リリースにて追加された入力型や、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、<output> 要素も見ます。

その他のフォームコントロール

次には<input> 以外のフォームコントロールと関連するツール、例えば <select>、<textarea>、<meter>、<progress> を見ていきます。

ウェブフォームをスタイリングする

この記事では基本的なスタイリング作業のために知るべき基本を含む、フォームを CSS でスタイリングするための入門を紹介します。

ウェブフォームの高度なスタイリング

ここでは、スタイルが難しい要素を扱うために必要な、さらに高度なフォームスタイリングテクニックを紹介します。

UI 擬似クラス

現在の状態に応じて制御される HTML フォームコントロールを可能とする、UI 擬似クラス の入門です。

クライアント側のフォームデータ検証

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

フォームデータの送信

この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そしてそこでデータを受けたらどう扱うかなどです。また、フォームデータ送信に関連するセキュリティ上の懸念もその一部です。

下記の記事は学習コースに必須ではないですが、上記のテクニックをマスターしてそれ以上知りたいときには、興味深く役立つものでしょう。

カスタムフォームコントロールの作成方法

場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。

JavaScript によるフォームの送信

この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます（FormData オブジェクトの使用もご覧ください）。

フォームコントロール用の CSS プロパティ互換性テーブル

この最後の記事では、どの CSS プロパティがフォーム要素に互換性があるのかを引くことのできるハンディリファレンスを提供します。

• HTML フォーム要素リファレンス
• HTML <input> タイプリファレンス
• HTML 属性リファレンス
• ユーザー入力とコントロール