registration form

オンライン登録フォーム

このプロジェクトは、チームツリーハウスのフロントエンド開発コースの3番目のプロジェクトです。

このプロジェクトでは、さまざまなHTMLフォーム入力タイプと属性を使用して、レスポンシブでモバイルに優しい登録フォームを構築します。付属のモックアップファイルを使用して、メディアクエリを使用してフォームのモバイルおよびデスクトップバージョンと「モバイルファースト」アプローチを構築することになります。

このプロジェクトのライブリンクはここにあります

スクリーンショット

説明書

1. モバイルファーストデザインを使用してレイアウトを作成します。

• HTMLファイルに、ドキュメントのヘッドにViewportメタタグが含まれていることを確認してください。このタグを追加する理由と方法を理解するには、ビューポートの構成を参照してください。
• 提供されたモックアップ（Mobile-form.png）を見て、同じコンテンツをindex.htmlファイルに追加します。

2. フォーム構造を作成します。1つの<form>タグのみを使用します。 <form>タグには、すべてのフォーム要素を含める必要があります。次のセクションのそれぞれにfieldsetとlegendを追加します。

• ページの「連絡先情報」セクション、および
• ページの「ニュースレター」セクション

3. 次のフォームフィールドタイプを含めるようにしてください。

• テキスト入力
• 電子メール入力
• 電話入力
• [メニュー]を選択します
• チェックボックス
• ラジオボタン
• Textarea
• [提出]ボタン

4. フォームフィールドには、次の属性を含める必要があります。

• input ： id 、 type 、 name属性を含める必要があります。
• select and textarea ： idとname属性を含める必要があります。

5. HTML <label>タグを使用して、各フォーム要素にラベルを追加します。ラベル内のテキストは、モックアップのフォームフィールドの名前と一致する必要があります。

• for属性を介して、各<label>要素を対応するフォームコントロールと適切にペアリングしてください。例については、上記のリンクを参照してください。そして、Textarea要素を忘れないでください。機能するラベルも必要です。

6. 入力フィールドのplaceholder属性を使用して、テキストを「必須」に追加します。

• フルネームフィールド
• メールアドレスフィールド

7. モバイルレイアウトのためにすべてを配置したら、メディアクエリを使用してブレークポイントを追加して、より広いタブレットとデスクトップ画面のレイアウトを調整します。

• デザインは、デスクトップフォームを使用して幅768pxのタブレットまたはデスクトップで見る必要があるため、デザインを一致させます。
• CSSのmin-widthプロパティを使用してメディアクエリを作成して、モバイルファーストアプローチを使用します。

8. すべてのブレークポイントが設置されたら、レイアウトマッチを両方のモックアップと再確認します。

• ラベルテキストの位置が両方のモックアップと一致することを確認してください。
  • モバイル：テキストはフォームフィールドの上にある必要があります。
  • デスクトップ：テキストはフォームフィールドの左側にある必要があります。

9. テキストにはGoogleフォントを使用します

10. 追加:focus合わせます。

11. HTMLおよびCSS Validatorを使用して実行して、コードが有効であることを確認してください。

• バリデーターへのリンクは、プロジェクトリソースにあります。これは、コードにある可能性のあるエラーを見つけるのに役立ちます。
• 修正する必要のないいくつかの例外があります。
  • 警告を心配しないでください。そこにある可能性のあるエラーを確認するだけです。
  • CSSバリデーターフラグが計算、ベンダープレフィックスまたは擬似要素/擬似クラスの使用にフラグがある場合、これらのエラーは無視する必要があります。
  • Googleフォントリンク/URLSでHTMLバリデーターフラグがパイプ（ '|'）の使用にフラグを立てている場合、このエラーも無視できます。