<commit_before>---
id: 587d78af367417b2b2512b03
title: Build a Survey Form
isRequired: true
challengeType: 3
videoUrl: ''
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://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать простой CSS, потому что это то, что до сих пор изучали уроки, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS, если вы выберете. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, и использование их на свой страх и риск. Другие проекты дадут вам возможность работать с различными технологическими пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! <strong>User Story # 1:</strong> Я вижу заголовок с <code>id=&quot;title&quot;</code> в формате H1. <strong>User Story # 2:</strong> Я вижу короткое объяснение с <code>id=&quot;description&quot;</code> в тексте размера P. <strong>User Story # 3:</strong> Я вижу <code>form</code> с <code>id=&quot;survey-form&quot;</code> . <strong>User Story # 4:</strong> Внутри элемента формы мне нужно ввести мое имя в поле с <code>id=&quot;name&quot;</code> . <strong>User Story # 5:</strong> Внутри элемента формы мне нужно ввести электронное письмо в поле с <code>id=&quot;email&quot;</code> . <strong>User Story # 6:</strong> Если я ввешу электронное письмо, которое не отформатировано правильно, я увижу ошибку проверки HTML5. <strong>User Story # 7:</strong> Внутри формы я могу ввести число в поле с <code>id=&quot;number&quot;</code> . <strong>User Story # 8:</strong> Если я вводил не номера в число ввода, я увижу ошибку проверки HTML5. <strong>User Story # 9:</strong> Если я ввожу числа за пределами диапазона ввода номера, которые определены атрибутами <code>min</code> и <code>max</code> , я увижу ошибку проверки HTML5. <strong>User Story # 10:</strong> для полей ввода имени, электронной почты и номера внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: <code>id=&quot;name-label&quot;</code> , <code>id=&quot;email-label&quot;</code> , и <code>id=&quot;number-label&quot;</code> . <strong>User Story # 11:</strong> для полей ввода имени, электронной почты и ввода номера я вижу текст заполнителя, который дает мне описание или инструкции для каждого поля. <strong>User Story # 12:</strong> Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий <code>id=&quot;dropdown&quot;</code> . <strong>User Story # 13:</strong> Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута <code>name</code> . <strong>User Story # 14:</strong> Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут <code>value</code> . <strong>User Story # 15:</strong> Внутри элемента формы я получаю <code>textarea</code> в конце для дополнительных комментариев. <strong>User Story # 16:</strong> Внутри элемента формы мне предоставляется кнопка с <code>id=&quot;submit&quot;</code> для отправки всех моих входов. Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask,</a> если вы застряли. </section>

## Instructions
<section id="instructions">
</section>

## Tests
<section id='tests'>

```yml
tests: []

```

</section>

## Challenge Seed
<section id='challengeSeed'>

</section>

## Solution
<section id='solution'>

```js<commit_msg>[Rus] Improved translation of build-a-survey-form (#32029)<commit_after>---
id: 587d78af367417b2b2512b03
title: Build a Survey Form
isRequired: true
challengeType: 3
videoUrl: ''
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> Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: <code>id=&quot;name-label&quot;</code> , <code>id=&quot;email-label&quot;</code>  и <code>id=&quot;number-label&quot;</code> . <strong>Пользовательская история # 11:</strong> Для полей ввода имени, электронной почты и ввода числа я вижу плейсхолдер, который дает мне описание или инструкции для каждого поля. <strong>Пользовательская история # 12:</strong> Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий <code>id=&quot;dropdown&quot;</code> . <strong>Пользовательская история # 13:</strong> Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута <code>name</code> . <strong>Пользовательская история # 14:</strong> Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут <code>value</code> . <strong>Пользовательская история # 15:</strong> Внутри элемента формы, в конце, я вижу <code>textarea</code> для дополнительных комментариев. <strong>Пользовательская история # 16:</strong> Внутри элемента формы есть кнопка с <code>id=&quot;submit&quot;</code> для отправки всех моих введённых данных. Вы можете создать свой проект от данного <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">CodePen шаблона</a> . Или вы можете использовать ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask,</a> если вы зашли в тупик. </section>

## Instructions
<section id="instructions">
</section>

## Tests
<section id='tests'>

```yml
tests: []

```

</section>

## Challenge Seed
<section id='challengeSeed'>

</section>

## Solution
<section id='solution'>

```js
{'fraction_non_alphanumeric': 0.11561119293078057, 'fraction_numerical': 0.016200294550810016, 'mean_word_length': 6.000736377025037, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 181, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '686176', 'n_tokens_mistral': 3640, 'n_tokens_neox': 4087, 'n_words': 981}