Si estás creando un formulario y no sabes cómo crear las casillitas que son similares a los radio button, pero donde varias opciones pueden ser seleccionadas, a diferencia de estos, hoy queremos contarte que estos son llamados checkbox en HTML y que son muy simples de hacer. El día de hoy te enseñaremos cómo crear checkbox en HTML y te enseñaremos cómo estos pueden mejorar la experiencia del usuario.
¿Qué es un checkbox en HTML?
Un checkbox en HTML es un tipo de input que le permite a los usuarios seleccionar opciones que pueden tener un valor binario, esto quiere decir que pueden estar marcadas o desmarcadas. Su estructura es bastante intuitiva y es muy importante hacer uso de ellos en situaciones en donde hay que tomar decisiones como “Aceptar términos y condiciones” o “seleccionar categorías de interés”:
<label for="opcion1">
<input type="checkbox" id="opcion1" value="opcion1"> Selecciona esta opción
</label>Para el ejemplo anterior el código genera una casilla de verificación junto a una etiqueta descriptiva. El atributo value es lo que se enviará al servidor si la casilla está marcada, mientras que el atributo id conecta la etiqueta con el input para mejorar la accesibilidad. Así quedaría el resultado final:
Atributos del checkbox en HTML
El checkbox en HTML no es un producto vacío, ya que puede tener distintos atributos que le dan forma y ayudan a su modificación. Veamos:
Value
Este atributo define el valor que se enviará cuando el checkbox esté marcado. Si el usuario no selecciona la casilla, el valor no será enviado al servidor. Si se omite el atributo value, el valor predeterminado que se enviará será “on”.
<input type="checkbox" id="newsletter" value="suscrito">
<label for="newsletter">Suscríbete a la newsletter</label>
Checked
Este es un atributo booleano que nos dice que el checkbox está marcado de manera predeterminada cuando la página se carga. Si deseas que el checkbox aparezca seleccionado al inicio, simplemente añade checked.
<input type="checkbox" id="terminos" value="acepto" checked>
<label for="terminos">Acepto los términos y condiciones</label>Indeterminate
Este atributo es menos conocido, pero es de gran utilidad cuando tienes una lista de opciones relacionadas. El estado indeterminado indica que el checkbox no está ni completamente marcado ni completamente desmarcado, lo que es común en casos donde algunos, pero no todos, los elementos de una lista están seleccionados.
Aunque no es directamente manejable desde HTML (debes hacerlo con JavaScript), es útil cuando tienes formularios con grupos de checkbox:
document.getElementById('miCheckbox').indeterminate = true;Ejemplo
Veamos un ejemplo que nos va a ayudar a entender a cabalidad este elemento.
Vamos a crear un formulario para que los usuarios seleccionen sus intereses. Aquí puedes usar múltiples checkbox en HTML para que puedan elegir más de una opción:
<h3>Selecciona tus intereses:</h3>
<form>
<input type="checkbox" id="deportes" value="deportes">
<label for="deportes">Deportes</label><br>
<input type="checkbox" id="musica" value="musica">
<label for="musica">Música</label><br>
<input type="checkbox" id="tecnologia" value="tecnologia">
<label for="tecnologia">Tecnología</label><br>
<input type="submit" value="Enviar">
</form>En este caso, los usuarios pueden seleccionar uno o más intereses antes de enviar el formulario.
¿Cómo mejorar la implementación del checkbox en HTML?
Si aun tienes dudas, aquí te van algunos consejos que pueden ayudarte a crera checkbox más precisos:
- Siempre usa el elemento
<label>: Esta etiqueta nos ayuda mucho a mejorar la accesibilidad. Si asociamos cada checkbox en HTML con su label, podemos hacer que la casilla sea más fácil de seleccionar, ya que los usuarios pueden hacer click tanto en la casilla como en el texto que vaya adjunto. - Agrupa checkbox relacionados: Si tenemos varios checkbox que forman parte de una misma lista (como fue el caso de la lista de intereses anterior), te recomendamos agruparlos de manera lógica, así el usuario va a poder entender fácilmente que pertenecen al mismo grupo:
<fieldset>
<legend>Selecciona tus habilidades:</legend>
<input type="checkbox" id="html" value="html">
<label for="html">HTML</label><br>
<input type="checkbox" id="css" value="css">
<label for="css">CSS</label><br>
<input type="checkbox" id="javascript" value="javascript">
<label for="javascript">JavaScript</label><br>
</fieldset>- Usa JavaScript para mejorar la funcionalidad: si ya queremos añadir más dinamismo a nuestros checkbox en HTML podemos recurrir a Javascript para controlar su estado o realizar validaciones antes de que se envíen los datos. Por ejemplo, en casos en los que quieres asegurarte de que el usuario marque la casilla antes de que se envíe el formulario:
function validarFormulario() {
var checkbox = document.getElementById('terminos');
if (!checkbox.checked) {
alert('Debes aceptar los términos y condiciones.');
return false;
}
return true;
}Este simple script alerta al usuario si intenta enviar el formulario sin haber aceptado los términos.
Si quieres seguir aprendiendo sobre cómo implementar aspectos a tus páginas web y personalizarlas aun más, no dudes en seguirnos y no te pierdas nuestro bootcamp en desarrollo web, en donde aprenderás todo lo que necesitarás para convertirte en un gran desarrollador web y podrás acceder a las mejores ofertas de empleo. ¡No esperes más y da el salto hacia el éxito!
