Отметьте только одну радиокнопку в HTML

Моя проблема в том, что я столкнулся с этой проблемой в разделе «Пол», в котором нужно выбрать только один, но я могу выбрать все три. Однако, когда я выбираю только один переключатель, а затем пытаюсь отправить данные, это показывает, что я должен выбрать хотя бы один переключатель, даже если я уже выбрал один переключатель.

Я прикрепил фрагменты HTML и CSS ниже:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #34495e;
}
.box {
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -40%);
  background: #191919;
  text-align: center;
}
.box h1 {
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}

select > option {
  background: #191919;
  color: white;
}

.box textarea {
  height: 75px;
}

.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
  display: inline;
  clear: none;
  width: auto;
}

.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
  width: 280px;
  border-color: #2ecc71;
}
.box input[type='submit'] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}
.box input[type='submit']:hover {
  background: #2ecc71;
}

.box input[type='radio'] {
  display: inline;
  width: auto;
}

fieldset label {
  margin-right: 5px;
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
    <title>My Example</title>
    <link rel = "stylesheet" href = "Student-css.css" />
  </head>
  <body>
    <form class = "box" method = "POST" action = "test.html">
      <h1>Student Registration</h1>
      <!-- First Name -->
      <input type = "text" name = "Fname" placeholder = "First Name" required />
      <!-- Middle Name -->
      <input type = "text" name = "Mname" placeholder = "Middle Name" required />
      <!-- Last Name -->
      <input type = "text" name = "Lname" placeholder = "Last Name" required />
      <!-- Moblie Number -->
      <input type = "tel" name = "Mnumber" placeholder = "Mobile Number" pattern = "[0-9]{10}" required />
      <!-- Parent's Number -->
      <input type = "tel" name = "Pnumber" placeholder = "Parents Number" pattern = "[0-9]{10}" required />
      <!-- Address -->
      <textarea name = "Address" placeholder = "Address" maxlength = "500" required></textarea>
      <!-- City -->
      <input type = "text" name = "City" placeholder = "City" required />
      <!-- Branch -->
      <select required id = "Branch" name = "Branch">
        <option value = "" selected = "selected">Branch</option>
        <option value = "AutoMobile">AutoMobile</option>
        <option value = "Civil">Civil</option>
        <option value = "Computer">Computer</option>
        <option value = "Electrical">Electrical</option>
        <option value = "Mechanical">Mechanical</option>
      </select>
      <!-- Enrollment Number -->
      <input type = "tel" name = "Enroll" placeholder = "Enrollment Number" pattern = "[0-9]{12}" required />
      <!-- Gender -->
      <fieldset>
        <legend>Gender</legend>
        <label for = "Male"><input type = "radio" name = "Gender" required value = "Male" /> Male</label>
        <label for = "Female"><input type = "radio" name = "Gender" required value = "Female" /> Female</label>
        <label for = "Other"><input type = "radio" name = "Gender" required value = "Other" /> Other </label>
      </fieldset>
      <!--E-mail Address -->
      <input type = "email" name = "email" placeholder = "E-mail Address" required />
      <!-- Password -->
      <input type = "password" name = "pass" placeholder = "Password" required />
      <!--Blood Group -->
      <select id = "Blood Group" name = "Blood Group">
        <option value = "" selected = "selected">Blood Group</option>
        <option value = "A+">A+</option>
        <option value = "B+l">B+</option>
        <option value = "AB+">AB+</option>
        <option value = "O+">O+</option>
        <option value = "A-">A-</option>
        <option value = "B-">B-</option>
        <option value = "AB-">AB-</option>
        <option value = "O-">O-</option>
      </select>
      <!--Submit Button -->
      <input type = "submit" name = "" value = "Submit" />
    </form>
  </body>
</html>

Помощь будет признательна!

html css radio-button

01.01.2019 16:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Оставьте название таким же, как у входного радио, и поместите обязательный только в одно место.

<legend>Gender</legend>
<label for = "Male"><input type = "radio" name = "Gender-M" required value = "Male"> Male</label>
<label for = "Female"><input type = "radio" name = "Gender-F" required value = "Female"> Female</label>
<label for = "Other"><input type = "radio" name = "Gender-O" required value = "Other"> Other </label>

Попробуйте этот код:

<legend>Gender</legend>
    <label for = "Male"><input type = "radio" name = "gender" required value = "Male"> Male</label>
    <label for = "Female"><input type = "radio" name = "gender" value = "Female"> Female</label>
    <label for = "Other"><input type = "radio" name = "gender" value = "Other"> Other </label>

Another solution

Вы также можете добавить onClick в свою кнопку отправки:

<!--Submit Button -->
<input type = "submit" name = "" value = "Submit" onClick = "ValidateForm(this.form)">

<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) && ( form.gender[2].checked == false ) ) 
{
alert ( "Please choose your Gender: Male or Female" ); 
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>

Надеюсь это поможет!

Я использую только Html и CSS без JS, поэтому какой-либо ответ без JS?

— 01.01.2019 17:32

01.01.2019 16:07

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #34495e;
}

.box {
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -40%);
  background: #191919;
  text-align: center;
}

.box h1 {
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}

select>option {
  background: #191919;
  color: white;
}

.box textarea {
  height: 75px;
}

.box label[for = "Male"],
.box label[for = "Male"]+input,
.box label[for = "Female"],
.box label[for = "Female"]+input,
.box label[for = "Other"],
.box label[for = "Other"]+input,
.box input[type = "radio"] {
  display: inline;
  clear: none;
  width: auto;
}

.box input[type = "text"],
.box input[type = "password"],
.box select,
.box input[type = "tel"],
.box textarea,
.box fieldset,
.box input[type = "radio"],
.box input[type = "email"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}

.box input[type = "text"]:focus,
.box input[type = "password"]:focus,
.box select:focus,
.box input[type = "tel"]:focus,
.box textarea:focus,
.box input[type = "email"]:focus {
  width: 280px;
  border-color: #2ecc71;
}

.box input[type = "submit"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.box input[type = "submit"]:hover {
  background: #2ecc71;
}

.box input[type = "radio"] {
  display: inline;
  width: auto;
}

fieldset label {
  margin-right: 5px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <meta http-equiv = "x-ua-compatible" content = "ie=edge">
  <title>My Example</title>
  <link rel = "stylesheet" href = "Student-css.css">

</head>

<body>

  <form class = "box" method = "POST" action = "test.html">


    <fieldset>
      <legend>Gender</legend>
      <label for = "Male"><input type = "radio" name = "Gender" value = "Male"> Male</label>
      <label for = "Female"><input type = "radio" name = "Gender" value = "Female"> Female</label>
      <label for = "Other"><input checked type = "radio" name = "Gender" value = "Other"> Other </label>
    </fieldset>

    <input type = "submit" name = "" value = "Submit">

  </form>
</body>

</html>

Убрать "обязательно", по умолчанию установить "отмечен". радиогруппа - это то, что вам нужно. Атрибут name должен быть таким же.

да. OP в настоящее время обрабатывает переключатели как флажки.

— 01.01.2019 16:13

01.01.2019 16:11