Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

[Duda] required

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Mejorando la semántica y actividad Datos importantes en los inputs

por Juan José Florez Argaez
| 29.9k xp | 2 posts
Agent 3

Cordial saludo.

Me gustaría saber de qué forma implementar el required para que los campos input type="radio" también sean obligatorios, teniendo en cuenta que solo puede marcar una opción por la propiedad name="contacto"

Adjunto mi código para saber exactamente en donde se debe poner el required.

<p>¿Cómo le gustaría que lo contactemos?</p>

<label for="radioEmail"><input type="radio" name="contacto" value="E-mail" id="radioEmail"> E-mail </label>

<label for="radioTel"><input type="radio" name="contacto" value="Télefono" id="radioTel">Teléfono</label>

<label for="radioWhatsApp"><input type="radio" name="contacto" value="WhatsApp" id="radioWhatsApp" checked >WhatsApp</label>

Muchas gracias.

2 respuestas
solución!
por Thiago Vazquez Enninger
| 775.1k xp | 1813 posts
Instructor

Hola Juan,

Puede implementar el atributo "required" en un input de tipo radio, puede abarcar todos los inputs dentro de un form y aplicar el required en el primer input, como muestro en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form >
      Select Gender:
      <label>
        <input type="radio" name="gender" value="male" required>Male
      </label>
      <label>
        <input type="radio" name="gender" value="female">Female
      </label>
      <label>
        <input type="radio" name="gender" value="other">Other
      </label>
      <input type="submit">
    </form>
  </body>
</html>

De esta manera, si intenta hacer clic en el botón sin haber seleccionado algunas de las opciones, recibirá un mensaje predeterminado del navegador indicando que al menos una opción de las 3 debe ser seleccionada.

Espero haberte ayudado y si sigues teniendo dudas, recuerda que estaremos aquí para ayudarte.

Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Juan José Florez Argaez
| 29.9k xp | 2 posts
Agent 3

Perfecto, muchísimas gracias