Saltar al contenido

Cómo hacer una casilla de verificación en HTML [+Examples]

febrero 24, 2022
Junior developer adding HTML checkboxes to web forms.jpgkeepProtocol

Desea que sus formularios sean lo más fáciles de completar posible. Ahí es donde entran las casillas de verificación.

Las casillas de verificación hacen que suscribirse a su boletín informativo o realizar otra acción en su sitio sea tan fácil como marcar una casilla. También pueden permitir a los usuarios seleccionar una o varias opciones en una lista. Eso hace posible preguntar a los visitantes cómo se enteraron de su marca, cuáles son sus intereses y otras preguntas complejas sin pedirles que escriban respuestas largas.

Eso también hace posible que los visitantes realicen acciones más complejas, como suscribirse a varios boletines a la vez. Este es un ejemplo de un formulario de HubSpot que hace exactamente eso con las casillas de verificación.

How to Make a Checkbox in HTML [ Examples] 1

Ahora que comprende los beneficios de usar casillas de verificación, cubramos todo lo que necesita saber sobre cómo crearlas en HTML.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Entrada de casilla de verificación HTML

En HTML, una casilla de verificación es un con un atributo de tipo definido como «casilla de verificación». La sintaxis completa es:

 
<input type="checkbox">

Una casilla de verificación normalmente también contiene un atributo de nombre y valor. Este par de nombre/valor se enviará al servidor cuando se envíe el formulario.

Por ejemplo, supongamos que un formulario con casillas de verificación pregunta cómo alguien se enteró de su empresa. En ese caso, el atributo de nombre de cada elemento de entrada podría ser «fuente». Uno de los atributos de valor del elemento de entrada podría ser instagram. Entonces, los datos enviados al servidor serían «fuente = instagram».

Si no se especifica el atributo de valor, el valor notificado está «activado» de forma predeterminada.

Veamos algunos ejemplos de casillas de verificación a continuación.

Ejemplo de casilla de verificación HTML

Supongamos que desea preguntar a los visitantes cómo se enteraron de su negocio. Desfilepor ejemplo, incluye este formulario en su página de confirmación de pedido.

El formulario de desfile utiliza casillas de verificación para preguntar a los compradores cómo se enteraron de la empresa.

Puede crear algo similar utilizando el elemento de casilla de verificación HTML. En el siguiente ejemplo, el usuario puede seleccionar una o más opciones en la lista.

ver la pluma Ejemplo de casilla de verificación HTML de Christina Perricone (@hubspot) en CódigoPen.

Casilla de verificación HTML marcada

Muchas empresas de comercio electrónico mostrarán una casilla de verificación de aceptación de correo electrónico que está preseleccionada durante el proceso de pago. Tome el formulario de pedido en El sitio de Nobullpor ejemplo.

How to Make a Checkbox in HTML [ Examples] 3

Puede codificar una casilla de verificación para que se preseleccione cuando se cargue la página utilizando el atributo booleano marcado. Simplemente tienes que añadir la palabra comprobado dentro de la etiqueta de apertura del elemento de entrada.

Aquí hay un ejemplo de una casilla de verificación activada de forma predeterminada:

ver la pluma de Christina Perricone (@hubspot) en CódigoPen.

Casilla de verificación HTML requerida

Usando otro atributo booleano, puede codificar una casilla de verificación para que sea obligatoria. Eso significa que el usuario no podrá enviar el formulario hasta que marque la casilla. Este atributo a menudo se aplica a la casilla de verificación para aceptar los términos y condiciones.

Por ejemplo, AWS requiere que los usuarios lean y acepten los términos del Acuerdo de cliente de AWS. Si la casilla no está marcada, no pueden continuar con el proceso de registro.

El formulario de AWS requiere que los usuarios marquen la casilla de verificación del acuerdo de cliente de AWS para completar el proceso de registro

Puede crear algo similar usando el atributo booleano requerido. En el siguiente ejemplo, si hace clic en el botón sin marcar la casilla, verá un mensaje de error que dice «Marque esta casilla si desea continuar».

ver la pluma de Christina Perricone (@hubspot) en CódigoPen.

Tamaño de la casilla de verificación HTML

Digamos que desea cambiar el tamaño de la casilla de verificación. Puedes hacerlo usando dos métodos diferentes.

El primer método es establecer las propiedades de ancho y alto en CSS. En el siguiente ejemplo, configuré el ancho y el alto de la casilla de verificación en 10 px. Eso hace que la casilla de verificación sea más pequeña que su tamaño predeterminado, que es de aproximadamente 13 px por 13 px en Chrome.

ver la pluma de Christina Perricone (@hubspot) en CódigoPen.

El segundo método está utilizando la propiedad de transformación CSS. Específicamente, usará el método scale() para cambiar el tamaño de la casilla de verificación. Cualquier valor que coloque dentro de los paréntesis aumentará o disminuirá el tamaño de la casilla de verificación en un múltiplo de su tamaño original. Este método funciona para todos los principales navegadores, incluido Mozilla Firefox. En el siguiente ejemplo, configuré la propiedad de transformación a escala (1.5) para que sea una vez y media su tamaño predeterminado.

ver la pluma Tamaño de la casilla de verificación HTML [Transform Property] de Christina Perricone (@hubspot) en CódigoPen.

Estilo de casilla de verificación HTML

Puede diseñar la casilla de verificación HTML con CSS personalizado. Requerirá varios conjuntos de reglas, ya que debe ocultar la casilla de verificación predeterminada del navegador, luego crear una casilla de verificación personalizada y una marca de verificación personalizada. Pero el resultado puede hacer que sus formularios se vean más consistentes con su marca.

Por ejemplo, el formulario de pedido en Natación MBM presenta una casilla de verificación que se vuelve negra cuando un usuario hace clic en ella.

El formulario MBM Swim incluye una casilla de verificación HTML personalizada que se vuelve negra cuando está marcada

Puede crear un efecto similar en su sitio web. Aquí hay un ejemplo de una casilla de verificación personalizada con bordes redondeados que se vuelve azul marino cuando está marcada:

ver la pluma de Christina Perricone (@hubspot) en CódigoPen.

Codificación de casillas de verificación

Las casillas de verificación pueden ayudar a mejorar la experiencia del usuario al completar formularios, lo que probablemente significará más conversiones en su sitio. La mejor parte es que son fáciles de codificar usando HTML y un poco de CSS.

Nueva llamada a la acción