freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.russian.md

---
id: 587d78af367417b2b2512b03
title: Build a Survey Form
isRequired: true
challengeType: 3
forumTopicId: 301145
localeTitle: Создание формы опроса
---

## Description
<section id='description'>
<strong>Цель:</strong> Создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если вы хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! <strong>Пользовательская история # 1:</strong> Я вижу заголовок с <code>id=&quot;title&quot;</code> в формате H1. <strong>Пользовательская история # 2:</strong> Я вижу короткое описание с <code>id=&quot;description&quot;</code> в формате P. <strong>Пользовательская история # 3:</strong> Я вижу элемент <code>form</code> с <code>id=&quot;survey-form&quot;</code> . <strong>Пользовательская история # 4:</strong> Внутри элемента формы мне нужно ввести мое имя в поле с <code>id=&quot;name&quot;</code> . <strong>Пользовательская история # 5:</strong> Внутри элемента формы мне нужно ввести электронную почту в поле с <code>id=&quot;email&quot;</code> . <strong>Пользовательская история # 6:</strong> Если я введу электронную почту, которая не отформатирована правильно, я увижу HTML5 ошибку валидации. <strong>Пользовательская история # 7:</strong> Внутри формы я могу ввести число в поле с <code>id=&quot;number&quot;</code> . <strong>Пользовательская история # 8:</strong> Если я введу нечисловое значение в поле ввода, я увижу HTML5 ошибку валидации. <strong>Пользовательская история # 9:</strong> Если я ввожу число за пределами диапазона ввода, которые определены атрибутами <code>min</code> и <code>max</code> , я увижу ошибку проверки HTML5. <strong>Пользовательская история # 10:</strong> Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идент
</section>

## Instructions
<section id='instructions'>

</section>

## Tests
<section id='tests'>

```yml
tests: []
```

</section>