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" />Respuestas:
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>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.
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.
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
display:none. Eso ya ha sido respondido aquí: stackoverflow.com/questions/49687229/…
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>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 .
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"