CHECKBOX

A) DESCRIPCION

El elemento input, teniendo el valor "checkbox" en su atributo type, representa un

control de dos estados que permite a los usuarios marcarlo como seleccionado o
deseleccionado. Este control puede ser útil para recolectar información que responde a
preguntas simples del estilo verdadero/falso como "¿quieres/aceptas/rechazas esto?".

El estado de una casilla de verificación es decidido por la presencia del atributo

booleano checked (si está presente, la casilla está marcada) Pero cuando el formulario
es enviado, lo que se envía de este elemento al agente procesador no es su estado de
selección, sino el par nombre/valor. En el envío, el estado de la casilla decide si el valor
del control debería ser enviado con el formulario. En otras palabras, el control es
enviado sólo si la casilla está seleccionada.

En contraste con los botones de opción que pueden conformar grupos donde solo una
opción puede ser seleccionada a la vez, las casillas de verificación son independientes.

B) EJEMPLOS

Nuestro primer ejemplo muestra una lista básica de intereses donde el usuario puede
seleccionar cualquiera de las opciones que disfruta hacer en su tiempo libre. Aquí
usaremos el atributo value, una práctica muy rara en casos reales, gracias al hecho de
que la casilla sólo es enviada cuando está seleccionada.

Al trabajar con casillas de verificación, el atributo value puede ser tranquilamente

omitido gracias a la posibilidad de saber el estado de una casilla verificando su
presencia/ausencia entre los campos enviados.

<form action="../../form-result.php" method="post" target="_blank">

<p>
Intereses:<br>
<input type="checkbox" name="cb-autos" value="gusta"> Autos<br>
<input type="checkbox" name="cb-deportes" value="gusta">
Deportes<br>
<input type="checkbox" name="cb-videojuegos" value="gusta">
Videojuegos
</p>
<p><input type="submit" value="Enviar datos"></p>
</form>

Intereses:
Autos
Deportes

Videojuegos
Como puedes ver en el ejemplo anterior, el texto junto a cada casilla no responde a los
clics como cualquiera podría esperarse. En el siguiente ejemplo, resolveremos este
problema convirtiendo este texto regular en una etiqueta para la casilla.

Para lograr esto, encerraremos al texto y al control correspondiente con

un elemento label. De esta forma, asociaremos la casilla de verificación con todo lo
demás que esté dentro del elemento label.

<form action="../../form-result.php" method="post" target="_blank">

<p>
Intereses:<br>
<label><input type="checkbox" name="cb-autos"> Autos</label><br>
<label><input type="checkbox" name="cb-deportes">
Deportes</label><br>
<label><input type="checkbox" name="cb-videojuegos">
Videojuegos</label>
</p>
<p><input type="submit" value="Send data"></p>
</form>

Intereses:
Autos
Deportes
Videojuegos

En nuestro tercer ejemplo, haremos uso del atributo checked, para indicarle al
navegador que debería marcar la casilla de verificación cuando la página es cargada y
cuando el formulario es restaurado.

<form action="../../form-result.php" method="post" target="_blank">

<p>
Intereses:<br>
<label><input type="checkbox" name="cb-html5" checked>
HTML5</label><br>
<label><input type="checkbox" name="cb-css3" checked>
CSS3</label><br>
<label><input type="checkbox" name="cb-javascript">
Javascript</label>
</p>
<p>
<input type="submit" value="Enviar datos">
<input type="reset" value="Restaurar formulario">
</p>
</form>

Intereses:
HTML5
CSS3
Javascript
Finalmente, probaremos el atributo required. Cuando este atributo booleano está
presente, el navegador no permitirá el envío del formulario hasta que la casilla de
verificación haya sido seleccionada. Esto puede ser útil en requerimientos de
conformidad.

El soporte provisto por los navegadores para el atirbuto required es incompleto. Los
autores pueden tener que recurrir a programas para proveer esta funcionalidad
consistentemente.

<form action="../../form-result.php" method="post" target="_blank">

<p>
Para entrar al programa debes aceptar nuestros términos del
servicio<br>
<label><input type="checkbox" name="cb-terminosservicio" required>
Acepto los términos del servicio</label><br>
</p>
<p><input type="submit" value="Enviar datos"></p>
</form>

Para entrar al programa debes aceptar nuestros términos del servicio

Acepto los términos del servicio

C) Representación
Atributos específicos
AUTOFOCUS

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control
cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde
el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena
vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan
pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido
cargados.

Ejemplo
<p><input type="checkbox" name="acepto" autofocus></p>
CHECKED
Un valor booleano que indica si el control debería estar seleccionado por defecto, esto
es, cuando la página es cargada o cuando el formulario es reestablecido. Si el atributo
toma el valor “checked” o la cadena vacía (“”), o si simplemente esta presente, el control
estará seleccionado por defecto.

Ejemplo
<form action="../../form-result.php" method="post" target="_blank">
<p>
Intereses:<br>
<label><input type="checkbox" name="cb-matematicas" value="likes"
checked> Matemáticas</label><br>
<label><input type="checkbox" name="cb-arte" value="likes">
Arte</label>
</p>
<p>
<input type="submit" value="ENviar datos">
<input type="reset" value="Restaurar formulario">
</p>
</form>

Intereses:
Matemáticas
Arte

DISABLED

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo

toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control
estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son
impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen)
no son enviados cuando el formulario es despachado.

Ejemplo
<form action="../../form-result.php" method="post" target="_blank">
<p>
<input type="checkbox" name="nomegusta" disabled> No me gusta este
sitio
<input type="submit" value="Enviar datos">
</p>
</form>
 No me gusta este sitio

FORM

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en

formularios anidados o distantes.

Ejemplo
<p><input type="checkbox" name="megusta" form="formulario1"> Me
gusta!</p>
<form id="formulario1" action="../../form-result.php" method="post"
target="_blank">
<p><input type="submit" value="Enviar datos"></p>
</form>

Me gusta!

NAME

Un nombre para el control. Este nombre será enviado por el navegador al agente
procesador, emparejado con el contenido del atributo value. Ambos atributos juntos
conformarán un par nombre-valor que será utilizado para procesar la información del
formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos

navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo
<form action="../../form-result.php" method="post" target="_blank">
<p>
<input type="checkbox" name="estoyseguro"> Estoy seguro...
<input type="submit" value="Enviar datos">
</p>
</form>

Estoy seguro...
REQUIRED

Un valor booleano que indica si este control puede ser dejado deseleccionado. Si este
atributo tiene el valor "required" o la cadena vacía (""), o si está simplemente presente,
el usuario tendrá que seleccionar el control a fin de poder enviar el formulario.

Si una casilla con el atributo required presente es dejada sin seleccionar, los
navegadores que soporten este mecanismo arrojarán un error previo al envío y
cancelarán el proceso inmediatamente.

El soporte provisto por los navegadores para el atributo required es incompleto. Los
autores pueden tener que recurrir a programas para proveer esta funcionalidad
consistentemente.

Ejemplo
<form action="../../form-result.php" method="post" target="_blank">
<p>
<input type="checkbox" name="terminosaceptados" required> Acepto
tus términos
<input type="submit" value="Enviar datos">
</p>
</form>

Acepto tus términos

TYPE

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós
valores posibles (insensibles a mayúsculas/minúsculas):

 hidden: un control oculto utilizado para enviar información al servidor,

típicamente manejado por programas.
 text: un control usado para la entrada de una sola línea de texto.
 search: igaul a text pero con fines de búsqueda.
 tel: un control usado para proveer un número de teléfono.
 url: una caja de texto usada para el ingreso de un único URL absoluto.
 email: un control diseñado para editar una o más direcciones de e-mail.
 password: una caja de texto para la edición de contraseñas, donde los
caracteres son representados por puntos.
 date: un control para ingresar una fecha específica.
 month: un control para ingresar un mes específico.
 week: un control para ingresar una semana específica.
  time: un control para ingresar una hora específica.
 datetime-local: un control para ingresar una fecha y hora local específica.
 number: un control para ingresar un número.
 range: un control para ingresar uno o dos números dentro de un rango.
 color: un control para ingresar un color.
 checkbox: un control para ingresar un valor booleano (verdadero/falso).
 radio: un control para elegir una única opción entre varias.
 file: un control usado para subir archivos al servidor.
 submit: un botón usado para enviar el formulario.
 image: igual a submit pero con la habilidad de verse como una imagen en
lugar de usar la apariencia predeterminada de los botones.
 reset: un botón usado para reiniciar los controles del formulario a sus valores
iniciales.
 button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si

tuviera el valor "text".

Ejemplo
<input type="checkbox" name="deacuerdo">

VALUE

Un valor para el control que será enviado al agente procesador, emparejado con el valor
del atributo name, sólo si la casilla ha sido seleccionada.

En contraste con otros controles, en las casillas de verificación este atributo puede
omitirse. En tal caso, el navegador rellenará el atributo con un valor por defecto
(comúnmente "on"). Siendo que la casilla de verificación es enviada únicamente cuando
está seleccionada, los agentes procesadores pueden deducir el estado de una casilla a
partir de su presencia o ausencia en la información enviada.

Ejemplo
<form action="../../form-result.php" method="post" target="_blank">
<p>
<input type="checkbox" name="perfilpublico" value="yes"> Haz
público mi perfil
<input type="submit" value="Enviar datos">
</p>
</form>

Haz público mi perfil