Cómo usar el atributo "requerido" con un campo de entrada "radio"

409

Me pregunto cómo usar el nuevo atributo de entrada HTML5 "requerido" de la manera correcta en los botones de opción. ¿Cada campo de botón de radio necesita el atributo como se muestra a continuación o es suficiente si solo un campo lo obtiene? 

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html radio-button required nerdess
fuente

Respuestas:

692

TL; DR: establece el requiredatributo para al menos una entrada del grupo de radio.

La configuración requiredpara todas las entradas es más clara, pero no necesaria (a menos que genere dinámicamente botones de radio).

Para agrupar botones de radio, todos deben tener el mismo namevalor. Esto permite seleccionar solo uno a la vez y se aplica requireda todo el grupo.

<form>
  Select Gender:<br>

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

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

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

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

También tome nota de:

Para evitar confusiones sobre si se requiere o no un grupo de botones de radio, se alienta a los autores a especificar el atributo en todos los botones de radio de un grupo. De hecho, en general, se alienta a los autores a evitar tener grupos de botones de radio que no tengan controles inicialmente controlados en primer lugar, 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.

Fuente

Seybsen
fuente
1
@kumar_harsh: se debe marcar cualquier casilla marcada como requerida. Del mismo modo, marcar una casilla de verificación requerida no tiene efecto en ninguna otra casilla de verificación (mismo nombre o no). No hay un marcado simple para indicar indicar "de estas x casillas de verificación con el mismo nombre", al menos uno debe estar marcado.
Brad Kent
3
@Davdriver sí, puede especificarlo en todos los botones de radio, si lo desea. De hecho, w3c escribió: Para evitar confusiones sobre si se requiere o no un grupo de botones de radio, se alienta a los autores a especificar el atributo en todos los botones de radio de un grupo. (ver w3.org/TR/html5/forms.html#the-required-attribute en el Ejemplo de código )
Seybsen
1
Sin embargo, lo siguiente es un montón de tonterías: de hecho, en general, se alienta a los autores a evitar tener grupos de botones de radio que no tengan controles controlados inicialmente, 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. ¿Por qué? Porque no tener un control inicialmente verificado es un caso totalmente válido (UX).
PussInBoots
2
También me gustaría agregar que, en algunos casos, los botones de opción que no tienen un estado "verificado" inicializado son algo muy bueno y una buena experiencia de usuario. En mi caso, el usuario debe clasificar inicialmente algún objeto en función de una lista semi larga de respuestas sí / no. Obtener las respuestas incorrectas a estas preguntas afectaría negativamente la lógica descendente. Por lo tanto, no puedo predeterminar las respuestas a Sí o No porque variará para cada objeto que el usuario esté clasificando. Es posible que se pierdan uno que necesita ser cambiado e ingresen datos incorrectos en la base de datos. O la tarea puede ser interrumpida e insegura de dónde la dejaron.
Joel Wigton
1
@Seybsen Nah, "en general" cubre que esto no es absoluto. Pero estos organismos de normas nunca dan ejemplos de cuándo sería realmente una interfaz de usuario deficiente utilizar sus recomendaciones, por lo que quería proporcionar una. Hacen que parezca que si lo usas, no has pensado en tu UX. Quiero que otros desarrolladores tengan la confianza necesaria para tomar una decisión de diseño informada, no solo omitiendo ciegamente cada botón de radio.
Joel Wigton
4

Puede usar este fragmento de código ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Especifique la palabra clave " requerida " en una de las declaraciones de selección . Si desea cambiar la forma predeterminada de su apariencia. Puedes seguir estos pasos. Esto es solo para información adicional si tiene alguna intención de modificar el comportamiento predeterminado.

Agregue lo siguiente en su .cssarchivo.

/* style all elements with a required attribute */
:required {
  background: red;
}

Para obtener más información, puede consultar la siguiente URL.

https://css-tricks.com/almanac/selectors/r/required/

Dulith De Costa
fuente
3

Si sus botones de radio se han personalizado, por ejemplo, el icono original del botón de radio se ha ocultado a través de css display:nonepara que pueda crear su propio botón de radio, entonces es posible que reciba el error.

La forma de solucionarlo es reemplazarlo display:noneconopacity:0

James
fuente
Supongo que quiere decir que el mensaje de error del navegador no es visible si el botón de opción está oculto display:none. Eso ya ha sido respondido aquí: stackoverflow.com/questions/49687229/…
Seybsen
1

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

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="other" class="hidden" required><span>Other</span></label>
  </div>

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

</form>
Expandir fragmento

Aunque soy un gran admirador del enfoque minimalista del uso de la validación HTML5 nativa, 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 pseudo clases) para mejorar el estilo de los campos (in) válidos. Esta validación HTML5 nativa puede ser su alternativa en caso de Javascript roto (o falta de). Puede encontrar un ejemplo de eso aquí , junto con algunas otras sugerencias sobre cómo crear formas mejores , inspiradas en Andrew Cole .

JoostS
fuente
0

Tuve que usar required="required"junto con el mismo nombre y tipo que la validación funcionó bien.

input type="radio" name="userradio"  id="" value="User" required="required"

input type="radio" name="userradio" id="" value="Admin" 

input type="radio" name="userradio" id="" value="Guest"
mk
fuente
1
Sería útil si formateara su respuesta y explicara por qué funcionó.
Joe Lissner
1
estuvo de acuerdo w @ JoeLissner. Formatee su código como tal utilizando las herramientas proporcionadas.
Sao