58 lines
5.8 KiB
Markdown
58 lines
5.8 KiB
Markdown
---
|
||
id: 587d78af367417b2b2512b03
|
||
title: Створіть форму для опитування
|
||
challengeType: 3
|
||
forumTopicId: 301145
|
||
dashedName: build-a-survey-form
|
||
---
|
||
|
||
# --description--
|
||
|
||
**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
||
|
||
Заповніть нижче [ історії користувача](https://en.wikipedia.org/wiki/User_story) та отримаєте тести для проходження. Проявіть при цьому свій власний стиль.
|
||
|
||
Ви можете використовувати HTML, JavaScript, та CSS, щоб завершити цей проєкт. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Для цього проєкту не рекомендовані додаткові застосунки (як наприклад, jQuery, React, Angular, чи Vue). Ви ризикуєте, використовуючи їх. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого кодування!
|
||
|
||
**Історія користувача #1: **Я можу бачити заголовок `id="title"` текстом розміром Н1.
|
||
|
||
**Історія користувача #2: ** Я можу бачити коротке пояснення `id="description"` текстом розміром P.
|
||
|
||
** історія користувача #3:** я бачу форму `` с `id="survey-form"`.
|
||
|
||
**Історія користувача #4:** Всередині елементу форми, мені необхідно ввести ім'я в поле з `id="name"`.
|
||
|
||
**Історія користувача #5:** Всередині елементу форми, мені необхідно ввести електронну пошту у полі з `id="email"`.
|
||
|
||
**Історія користувача #6:** Якщо я введу електронну пошту, неправильно відформатовану, я побачу помилку перевірки HTML5.
|
||
|
||
**Історія користувача #7:** Всередині форми я можу ввести число у полі `id="number"`.
|
||
|
||
**Історія користувача #8:** Якщо я введу не числа з номером введення, я побачу помилку перевірки HTML5.
|
||
|
||
**Історія користувача #9:** Якщо я введу числа поза межами діапазону введення, що позначені по `min` and `max` атрибутам, я побачу помилку перевірки HTML5.
|
||
|
||
**Історія користувача #10:** Для назви, електронної пошти і поля введення чисел у межах форми, я можу побачити, що відповідні ярлики, які описують призначення кожного поля, супроводжуються певними ідентифікаторами: `id="name-label"`, `id="email-label"`, й `id="number-label"`.
|
||
|
||
**Історія користувача #11:** У полі введення назви, електронної пошти та ін., я можу побачити надані текстом заповнювача описи або інструкції для кожного з полів.
|
||
|
||
**Історія користувача #12:** Всередині елементу форми я можу обрати варіант зі спадного списку зі відповідним `id="dropdown"`.
|
||
|
||
**Історія користувача #13:** У межах форми кожного елементу я можу обрати поля з однієї чи більше групи радіокнопок. Кожна група повинна бути згрупована зі використанням `name` атрибуту.
|
||
|
||
**Історія користувача #14:** Я можу обрати декілька полів всередині форми елементу зі серії прапорців, кожен з яких повинен мати атрибут `value`.
|
||
|
||
**Історія користувача #15:** Всередині форми елементу наприкінці я надаю `textarea` для додаткових коментарів.
|
||
|
||
**Історія користувача #16:** Я можу затвердити усі внесені дані у форму елементу за допомогою кнопки `id="submit"`.
|
||
|
||
Ви можете створити проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> й натиснути `Save` для створення власного фрагмента. Або ви можете використати CDN посилання для проведення тесту у будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
||
Після завершення надайте посилання до вашого проєкту з усіма пройденими тестами.
|
||
|
||
# --solutions--
|
||
|
||
```html
|
||
// solution required
|
||
```
|