--- id: 587d78af367417b2b2512b03 title: アンケートフォームを作成する challengeType: 3 forumTopicId: 301145 dashedName: build-a-survey-form --- # --description-- **目標:** こちら と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。 以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。 このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 ハッピーコーディング！ **ユーザーストーリー #1:** `id="title"` を持つ H1 サイズテキストのタイトルがあります。 **ユーザーストーリー #2:** `id="description"` を持つ P サイズテキストの短い説明文があります。 **ユーザーストーリー #3:** `id="survey-form"` を持つ `form` があります。 **ユーザーストーリー #4:** フォーム要素内では、`id="name"` を持つフィールドに名前入力が必須となっています。 **ユーザーストーリー #5:** フォーム要素内では、`id="email"` を持つフィールドにメールアドレスを入力することが必須となっています。 **ユーザーストーリー #6:** メールアドレスとして正しいフォーマットでない内容を入力すると、HTML5 のバリデーションエラーが表示されます。 **ユーザーストーリー #7: ** フォーム要素内では、`id="number"` を持つフィールドに数字を入力することができます。 **ユーザーストーリー #8:** 数字ではない内容を入力すると、HTML5 のバリデーションエラーが表示されます。 **ユーザーストーリー #9:** `min` と `max` 属性で定義した範囲外の数字を入力すると、HTML5 のバリデーションエラーが表示されます。 **ユーザーストーリー #10:** フォーム内の名前、メール、数字入力フィールドには、以下の id で各フィールドの目的を説明するラベルが含まれます: `id="name-label"`、`id="email-label"`、`id="number-label"` **ユーザーストーリー #11:** 名前、メール、数値の入力フィールドには、各フィールドの説明や指示を示すプレイスホルダ―テキストが表示されます。 **ユーザーストーリー #12:** フォーム要素内では、対応する `id="dropdown"` を持つドロップダウンからオプションを選択できます。 **ユーザーストーリー #13:** フォーム要素内では、1 つ以上のグループからなるラジオボタンでフィールドを選択できます。 各グループは `name` 属性を使用してグループ化する必要があります。 **ユーザーストーリー #14:** フォーム要素内では、一連のチェックボックスからいくつかのフィールドを選択することができ、それぞれは `value` 属性を持つ必要があります。 **ユーザーストーリー #15:** フォーム要素内では、追加でコメントするために最後に `textarea` を表示します。 **ユーザーストーリー #16:** フォーム要素内では、すべての入力内容を送信するため `id="submit"` を持つボタンを表示します。 この CodePen テンプレートを使用してあなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen (CodePen 上の作品) を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` 完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。 # --solutions-- ```html // solution required ```