Необходимо создать HTML-форму и обработать её ввод с помощью JavaScript

Условие:

решить

Решение:

Это задание относится к предмету **Программирование** и изучает такие разделы как **JavaScript** и **HTML**. Оно включает задачи по разработке валидации данных, отправляемых через HTML-формы, используя JavaScript. ### Разбор задания: 1. Необходимо создать HTML-форму и обработать её ввод с помощью JavaScript. 2. В задании есть несколько требований к разрабатываемому приложению: #### Требования: 1. **Типы полей ввода**: - Все поля типа `range`, дата (`date`), время (`time`), число (`number`), телефон (`tel`) и почта (`email`) нужно заменить на тип `text`. Это означает, что все поля формы должны быть текстовыми. 2. **Radio и Select**: - Поля, которые используют элементы `radio` и `select`, должны быть изначально "пустыми" (в селекторах и радиокнопках не должно быть автоматически выбранного значения). 3. **Проверка полей**: - С помощью JavaScript необходимо проверить правильность данных, введенных в поля. Если информация неверна, отправку формы на сервер следует заблокировать. - Причины ошибки вводимых данных (например, поле левой пустое либо значение некорректное) должны быть выведены в уведомление для пользователя. 4. **JavaScript код**: - JavaScript код должен быть вынесен в отдельный файл `.js` или включен внутрь самого HTML-файла. 5. **Завершение задания**: - После выполнения задания проект необходимо сжать в формат `zip` или `rar` и загрузить на сервер. ### Решение: Создадим HTML форму и подключим к ней JavaScript для валидации данных. #### HTML форма: ```html Форма ввода данных

Возраст:

Телефон:

Почта:

Пол: Мужской  Женский

Страна: Выбрать... Россия США 

Цена:

Отправить

``` #### JavaScript валидация (файл `script.js`): ```javascript document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // Останавливаем отправку данных // Получение значений из формы let age = document.getElementById('age').value; let phone = document.getElementById('phone').value; let email = document.getElementById('email').value; let gender = document.querySelector('input[name="gender"]:checked'); let country = document.getElementById('country').value; let price = document.getElementById('price').value; let errorMessage = ""; // Переменная для сообщения об ошибке // Проверка возраст (должен быть числом) if (isNaN(age) || age === "") { errorMessage += "Возраст должен быть числом.\n"; } // Проверка телефона (должен быть заполнен) if (phone === "") { errorMessage += "Введите номер телефона.\n"; } // Проверка email (должен быть заполнен) if (email === "" || !validateEmail(email)) { errorMessage += "Введите корректный email.\n"; } // Проверка пола (должен быть выбран) if (!gender) { errorMessage += "Выберите пол.\n"; } // Проверка страны (должна быть выбрана) if (country === "") { errorMessage += "Выберите страну.\n"; } // Проверка цены (должно быть числом) if (isNaN(price) || price === "") { errorMessage += "Цена должна быть числом.\n"; } // Вывод ошибки или отправка данных if (errorMessage) { document.getElementById('errorMessage').innerText = errorMessage; // Выводим ошибки } else { document.getElementById('errorMessage').innerText = ""; // Очищаем ошибки alert("Форма отправлена!"); // Если всё хорошо, выводим сообщение // Можно добавить отправку данных на сервер (например, с помощью AJAX) } }); // Функция проверки email function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(String(email).toLowerCase()); } ``` ### Пояснение: 1. **HTML форма** включает несколько полей ввода, таких как возраст, телефон, почта, пол, страна и цена. 2. Все поля с типом `range`, `number`, `date` были заменены на тип `text`. 3. Поле выбора пола (`radio`) изначально пустое, то есть пользователь должен выбрать его самостоятельно. Поле выбора страны (`select`) также начинается с пустого значения. 4. Валидация полей проводится на стороне клиента с помощью JavaScript: - Проверяется корректность введённого возраста и цены (должны быть числовыми). - Проверяется заполненность телефона, email и других полей. - Если есть ошибки, они выводятся на экран. Если все данные корректны, выводится сообщение об успешной отправке формы. ### Следующие шаги: 1. Этот код необходимо сохранить в двух файлах (`index.html` и `script.js`). 2. Упаковать файлы в архив (zip или rar). 3. Далее нужно загрузить архив на требуемый ресурс. Если остались вопросы по задаче, их можно задать преподавателю для разъяснений.