etiqueta - HTML5: cómo utilizar el atributo "requerido" con un campo de entrada de "radio"

radio button html5 ejemplos

Question

Me pregunto cómo usar el nuevo atributo de entrada HTML5 "requerido" de la manera correcta en los botones de radio. ¿Cada campo de botón de radio necesita el atributo como abajo? ¿O es suficiente si solo un campo lo consigue?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

Answer 1

Aquí hay una implementación muy básica pero moderna de los botones de radio requeridos con validación nativa de HTML5:

body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>

  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

Aunque soy un gran fanático del enfoque minimalista del uso de la validación nativa de HTML5, es posible que desee reemplazarlo con la validación de Javascript a largo plazo. La validación de Javascript le da mucho más control sobre el proceso de validación y le permite establecer clases reales (en lugar de clases de pseudo) para mejorar el estilo de los campos (in) válidos. Esta validación nativa de HTML5 puede ser su reserva en caso de Javascript roto (o sin él). Puede encontrar un ejemplo de eso here , junto con algunas otras sugerencias sobre cómo hacer mejores formas , inspiradas por Andrew Cole .

Answer 2

Si sus botones de radio se han personalizado, por ejemplo, el icono original para el botón de radio se ha ocultado a través de la display:none css display:none para que pueda crear su propio botón de radio, entonces podría estar recibiendo el error.

La forma de solucionarlo es reemplazar la display:none con opacity:0

Answer 3

prueba esto ...

<form>
      <input type="radio" name="color" value="black" required />
      <input type="radio" name="color" value="white" />

      <input type="submit" value="Click Here" />
</form>

Encontrar JSFIDDLE

Answer 4

Establezca el atributo required para al menos una entrada del grupo de radio.

La configuración required para todas las entradas es más clara, pero no necesaria (a menos que se generen dinámicamente los botones de opción).

Para agrupar los botones de radio, todos deben tener el mismo valor de name . Esto permite que solo se seleccione uno a la vez y se aplica a todo el grupo.

<form>
  Select Gender:

  <label><input type="radio" name="gender" value="male" required>Male</label>

  <label><input type="radio" name="gender" value="female">Female</label>

  <input type="submit">
</form>

También tome nota de:

Para evitar confusiones sobre si se requiere o no un grupo de botones de opción, se recomienda a los autores que especifiquen el atributo en todos los botones de opción de un grupo. De hecho, en general, se recomienda a los autores que eviten tener grupos de botones de radio que no tengan ningún control inicialmente controlado, ya que este es un estado al que el usuario no puede regresar y, por lo tanto, generalmente se considera una interfaz de usuario deficiente.

Source