Valor del atributo HTML: `<input type="checkbox">`

Los elementos <input> de tipo checkbox se muestran por defecto como casillas que se marcan al activarse, como las que podrías ver en un formulario oficial del gobierno.. La apariencia exacta depende de la configuración del sistema operativo en el que se ejecuta el navegador. Generalmente, es un cuadrado, pero puede tener las esquinas redondeadas. Una casilla de verificación te permite seleccionar valores individuales para enviar (o no) en un formulario.

Pruébalo

<fieldset>
  <legend>Elige las características de tu monstruo:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Escamas</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Cuernos</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Nota: Los botones de radio son similares a las casillas de verificación, pero con una distinción importante: los botones de radio del mismo nombre se agrupan en un conjunto en el que solo se puede seleccionar un botón de radio a la vez, mientras que las casillas de verificación te permiten activar o desactivar valores individuales. Cuando existen varios controles con el mismo nombre, los botones de radio permiten seleccionar solo uno de todos ellos, mientras que las casillas de verificación permiten seleccionar varios valores.

Valor

Una cadena que representa el valor de la casilla de verificación. Esto no se muestra en el lado del cliente, pero en el servidor es el value que se envía junto con el name de la casilla de verificación. Ve el siguiente ejemplo:

html

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">¿Suscribirse al boletín?</label>
  </div>
  <div>
    <button type="submit">Suscribirse</button>
  </div>
</form>

En este ejemplo, tenemos un name de subscribe y un value de newsletter. Cuando se envía el formulario, el par nombre/valor de los datos será subscribe=newsletter.

Si se omite el atributo value, el valor predeterminado para la casilla de verificación es on, por lo que los datos enviados en ese caso serían subscribe=on.

Nota: Si una casilla de verificación no está marcada al enviar su formulario, ni el nombre ni el valor se envían al servidor. No existe ningún método exclusivo de HTML para representar el estado sin marcar de una casilla de verificación (por ejemplo, value=unchecked). Si quisieras enviar un valor predeterminado para la casilla de verificación cuando no está marcada, podrías incluir JavaScript para crear un <input type="hidden"> dentro del formulario, con un valor que indique el estado sin marcar.

Atributos adicionales

Además de los atributos comunes que comparten todos los elementos <input>, los campos de tipo checkbox admiten los siguientes atributos.

checked: Un atributo booleano que indica si esta casilla de verificación está marcada de forma predeterminada (cuando se carga la página). No indica si esta casilla de verificación está marcada actualmente: si se cambia el estado de la casilla de verificación, este atributo de contenido no refleja el cambio. (Solo se actualiza el atributo IDL checked de HTMLInputElement).

Nota: A diferencia de otros controles de entrada, el valor de una casilla de verificación solo se incluye en los datos enviados si la casilla de verificación está marcada (checked) en ese momento. Si es así, entonces el valor del atributo value de la casilla de verificación se informa como el valor de la entrada, o on si no se establece ningún value. A diferencia de otros navegadores, Firefox conserva de forma predeterminada el estado dinámico de marcado de un <input> entre distintas cargas de página. Usa el atributo autocomplete para controlar esta característica.
value: El atributo value es común a todos los elementos

Valor del atributo HTML: <input type="checkbox">

Pruébalo

Valor

Atributos adicionales

Valor del atributo HTML: `<input type="checkbox">`