El Atributo CHECKED

Se utiliza en elementos input de tipo checkbox y radio para marcarlos como seleccionados por defecto al cargar la página.

El atributo checked se utiliza en elementos <input> de tipo checkbox y radio para marcarlos como seleccionados por defecto al cargar la página. Es fundamental en formularios para preestablecer opciones comunes y mejorar la experiencia del usuario.

¿Qué es el atributo `checked`?

Propósito:
Establece que una casilla de verificación (checkbox) o botón de opción (radio) aparezca marcado inicialmente.
Tipo de atributo:
Booleano (no requiere valor, pero en XHTML se usa checked="checked").
Compatibilidad:
Funciona en todos los navegadores modernos.

Sintaxis básica

Checkbox (selección múltiple)

<input type="checkbox" id="newsletter" checked>
<label for="newsletter">Suscribirse al newsletter</label>

Radio button (selección única en un grupo)

<input type="radio" id="opcion1" name="grupo" checked>
<label for="opcion1">Opción 1</label>

<input type="radio" id="opcion2" name="grupo">
<label for="opcion2">Opción 2</label>

Casos de uso comunes

Formulario de registro con opción pre-marcada

<form>
  <label>
    <input type="checkbox" name="terminos" checked> 
    Acepto los términos y condiciones
  </label>
</form>

Selección de método de pago predeterminado

<label>
  <input type="radio" name="pago" value="tarjeta" checked> 
  Tarjeta de crédito
</label>
<label>
  <input type="radio" name="pago" value="paypal"> 
  PayPal
</label>

Errores comunes y buenas prácticas

Múltiples radio buttons marcados en un mismo grupo

Solo el último elemento con checked será seleccionado:

<!-- Incorrecto -->
<input type="radio" name="color" value="rojo" checked>
<input type="radio" name="color" value="azul" checked> <!-- Este prevalece -->

Usar `checked` sin asociar un `<label>`

Siempre vincula etiquetas para mejorar la accesibilidad:

<!-- Correcto -->
<input type="checkbox" id="notificaciones" checked>
<label for="notificaciones">Recibir notificaciones</label>

No usar `name` en grupos de radio buttons

Los radio buttons deben compartir el mismo name para funcionar como grupo:

<!-- Incorrecto -->
<input type="radio" name="talla1" value="s" checked>
<input type="radio" name="talla2" value="m">

Diferencias entre `checked` (HTML) y `checked` (JavaScript)

En HTML:

El atributo checked establece el estado inicial.

<input type="checkbox" checked>

En JavaScript:

La propiedad checked refleja el estado actual (modificable dinámicamente).

document.getElementById("miCheckbox").checked = true;

Mejores prácticas

Usa checked para opciones frecuentes:
Ejemplo: Suscripción a newsletter, método de envío predeterminado.
Evita abusar de checked:
No marques opciones críticas (ej: "Acepto términos") sin consentimiento.
Combínalo con <label> y id:
Mejora la accesibilidad y la usabilidad.
Prueba en móviles:
Asegúrate de que los elementos marcados sean claros en pantallas pequeñas.

Ejemplo avanzado: Formulario de preferencias

<form>
  <fieldset>
    <legend>Preferencias</legend>
    
    <!-- Checkbox pre-marcado -->
    <label>
      <input type="checkbox" name="temas" value="tecnologia" checked> 
      Tecnología
    </label>

    <!-- Radio button predeterminado -->
    <label>
      <input type="radio" name="notificaciones" value="diarias" checked> 
      Notificaciones diarias
    </label>
    <label>
      <input type="radio" name="notificaciones" value="semanal"> 
      Resumen semanal
    </label>
  </fieldset>
</form>

Conclusión

El atributo checked es esencial para:

Preestablecer opciones en formularios.
Mejorar la experiencia del usuario al reducir pasos innecesarios.
Garantizar accesibilidad cuando se usa con <label>.

Ejemplo final:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de "checked"</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" name="oferta" checked> 
      ¡Quiero recibir ofertas exclusivas!
    </label>
    <br>
    <label>
      <input type="radio" name="genero" value="hombre"> Hombre
    </label>
    <label>
      <input type="radio" name="genero" value="mujer" checked> Mujer
    </label>
  </form>
</body>
</html>

¡Usa checked estratégicamente para crear formularios más intuitivos y eficientes!

¿Qué es el atributo checked?