このコースでは、HTML フォームをわかりやすい断片に分割します。 以降のいくつかのモジュールでは、HTML フォームの仕組みと、プロジェクトで効果的に使用する方法を学びます。 モジュール内を移動するには、Learn Forms ロゴの横にあるメニューペインを使用します。
基本的な HTML フォームの作成方法、HTML フォーム要素、フォームのスタイル設定、ユーザーによるデータ再入力の支援、フォームへのアクセスと安全性の確保、フォームのテスト方法、特定のフォームタイプについて学びます。
各モジュールにはインタラクティブなデモと自己診断が満載で、自分の知識をチェックできます。
このコースは、HTML の初心者から上級者までを対象としています。 最初のいくつかのモジュールでは HTML フォームの作成に、他のモジュールでは詳細を説明します。 このシリーズを最初から最後まで通読して、HTML フォームの一般的な理解を掴みましょう。または、特定のモジュールを選んで詳しく学習することもできます。
前提条件
このコースを始める前に、HTML について知っておく必要があります。 ウェブ開発を初めて行う場合は、MDN の HTML の概要コースでマークアップの記述方法をご確認ください。
デモ
ここでは、ほとんどのデモで CodePen を使用します。
デモを見ると、スタイルはどこから来たのか不思議に思われるかもしれません。すべてのデモに含まれる一般的なスタイルシートを使用しているため、関連するスタイルのみを示しています。CodePen では、[設定] から含まれている CSS ファイルを選択できます。
フォーム コントロールとフォーム項目
フォーム コントロールは、ユーザー操作やデータの入力または選択を可能にする要素で、<input>、<select>、<textarea>、<button> のいずれかです。
フォーム フィールドは、フォーム コントロール、特にテキスト入力の要素 <input> と <textarea> を参照するために使用されます。
これから学習する内容
フォームを使用してユーザーからデータを取得する
ここでは、フォーム要素の概要を紹介し、ウェブでのフォームの基本的な使い方を説明します。
フォームにデータを入力しやすくする
フォームを作成する際に選択できるさまざまなフォーム要素の概要。
フォームにデータを再入力しなくても済むようにする
フォームへの入力を容易にします。
フォームに正しいデータを入力できるようにする
フロントエンドでフォームを検証する方法を学習します。
フォームをテストする
フォームをテストして分析する方法を学習します。
デザインの基本
ユーザー フレンドリーなフォームの作成方法をご確認ください。
ユーザー補助
インクルーシブなフォームを作成する方法。
多言語対応とローカライズ
国際的なデータ形式に備え、フォームのローカライズを計画する方法を学びます。
セキュリティとプライバシー
フォームを安全に作成してユーザーのデータのプライバシーを保護する方法について説明します。
自動入力
autofill と autocomplete 属性の詳細について学習します。
フォームのユーザビリティをテストする方法
ユーザビリティ テストの実施方法と、フォームがすべてのユーザーで適切に機能することを確認します。
複数のデバイスとプラットフォームでフォームをテストする
フォームが、さまざまなデバイス、ブラウザ、プラットフォーム、さまざまなコンテキストで機能するようにします。
データの収集中
フォームの測定と分析の方法を学びます。
フォーム要素の詳細
フォーム要素、フォームを使用するタイミング、フォームの仕組みについて詳しく学習します。
フォーム項目の詳細
使用できるさまざまなフォーム項目と、適切なフォーム要素を選択する方法について説明します。
フォーム属性の詳細
画面キーボードのレイアウトを変更する方法、組み込みの検証を有効にする方法など、フォーム属性の詳細について学習します。
フォームのスタイル設定
CSS を使用してフォームのスタイルを設定しながら、誰もが使いやすい読みやすいフォームを作成できます。
フォーム コントロールのスタイル設定
CSS を使用してフォーム コントロールを実装する方法を学びます。
JavaScript
JavaScript を使用してフォームを充実させる方法をご紹介します。
お支払いフォーム
より適切なお支払い方法を作成して、コンバージョン率を改善しましょう。
住所フォーム
ユーザーが住所フォームにすばやく簡単に入力できるようにします。
まとめと次のステップ
次のステップに進むためのその他のリソース。
それでは、フォームについて学びましょう。それでは始めましょう。