Чтобы отобразить выбранный пол (мужской или женский) в элементе `<span>` на вашей странице, вам нужно добавить небольшой JavaScript-код, который будет отслеживать нажатие на радио-кнопки и выводить результат в нужный элемент, например, в `span`. Давайте по шагам разберемся, как это сделать.
1. **Добавьте элемент `<span>` для вывода результата** в вашу форму, чтобы там отображался выбранный пол.
2. **Используйте JavaScript для получения значения выбранной радио-кнопки** при отправке формы.
Вот ваши изменения, включая HTML и JavaScript:
### HTML:
```html
<h1>Форма опроса</h1>
<form class="form" action="#" method="post" onsubmit="return showSelection();">
<p>Имя:<input class="name" type="text" required></p>
<p>Email:<input class="email" type="email" required></p>
<span>Пол:</span>
<input type="radio" name="radio" class="radio" id="1" value="Мужской">
<label class="redio-label" for="1">Мужской</label>
<input type="radio" name="radio" class="radio" id="2" value="Женский">
<label class="redio-label" for="2">Женский</label><br><br>
<span>Оценка сервиса</span>
<input type="range" min="0" max="10" step="1"><br>
<p>Интересы</p>
<input type="checkbox" class="check" id="check1">
<label for="check1">Спорт</label><br>
<input type="checkbox" class="check" id="check2">
<label for="check2">Музыка</label><br>
<input type="checkbox" class="check" id="check3">
<label for="check3">Кино</label><br>
<p>Комментарий</p>
<textarea class="textarea" width="300" height="150"></textarea><br>
<input type="submit" value="Отправить" class="btn">
</form>
<span id="result"></span>
<script>
function showSelection() {
// Получаем выбранный пол
const radios = document.querySelectorAll('.radio');
let selectedGender = '';
for (let radio of radios) {
if (radio.checked) {
selectedGender = radio.value; // Получаем значение выбранной радио-кнопки
break;
}
}
// Отображаем результат
const resultSpan = document.getElementById('result');
resultSpan.textContent = `Выбранный пол: ${selectedGender}`;
// Возвращаем false, чтобы предотвратить отправку формы
return false; // Уберите эту строку, если хотите, чтобы форма была отправлена
}
</script>
```
### Объяснение кода:
1. **JavaScript функция `showSelection()`:**
- Перебирается массив радио-кнопок с классом `.radio`.
- Если кнопка отмечена (свойство `checked`), берется ее значение (используя атрибут `value`).
- Затем это значение отображается в элементе `<span id="result">`.
- Функция возвращает `false`, чтобы предотвратить стандартное поведение отправки формы. Если вы хотите отправить форму, удалите это значение (или измените обработку отправки).
2. **HTML:**
- Добавлен атрибут `value` для радио-кнопок, чтобы сохранить значения, которые будут выводиться в `span`.
- Теперь при отправке формы будет отображаться выбранный пол.
Таким образом, при нажатии на кнопку "Отправить" будет вызвана функция, которая покажет выбранный пол пользователя в элементе `<span>`.