Header Ads

Casillas de Verificación en HTML

Las casillas de verificación en HTML permiten a los usuarios seleccionar de un listado de opciones, una o mas de las opciones de la lista. Estas pueden ser una buena herramienta para formularios que tienen como finalidad recaudar diversos tipos de datos de una persona, así como también para la selección de diversas respuestas según venga el caso.

En esta publicación nos centraremos en la creación de las casillas de verificación de manera fácil y concreta.
Como ya vimos en diversas entradas sobre objetos de los formularios, al igual que muchos de esos objetos las casillas de verificación también son creadas a base de la etiqueta <input>.


Ejemplo:

Código HTML:



Resultado:


Al ejecutar nuestro código HTML tendríamos las siguientes casillas, es una forma simple de crearlas ahora aplicaremos algunos atributos y algunos textos que le darán forma de una lista de opciones:

Código HTML:



Resultado:

America Europa Africa Asia Oceania

Ahora despues de ejecutar nuestro nuevo Codigo HTML, podemos obtener ya una lista de opciones las cuales pueden ser seleccionadas con un solo clik, si desea puede probar seleccionando las opciones.

Los atributos name y value que añadimos en el código HTML, nos permiten dar una peculiaridad a las casillas a la hora que estas procesen la informacion envida a un servidor.(describiremos la acción que ejecuta cada uno de estos atributos)

name : Todas las casillas de verificación deben tener un nombre exclusivo.El nombre que eleija debe identificar de forma exclusiva la casilla de verificación dentro del formulario.El nombre no puede conterner espacios ni caracteres especiales.

value : establece el valor que debe enviarse al servidor cuando se activa la casilla de verificación.


Ahora para terminar aplicaremos un atributo peculiar que tiene como característica auto-marcar una casilla de forma automática, en otras palabras al cargar la pagina la casilla aparecerá marcada por defecto, el nombre de este atributo es checked.

Código HTML:

usaremos el atributo checked en el primera casilla, la cual pertenece al continente de America.



Resultado:

America Europa Africa Asia Oceania

Al ejecutar nuestro código HTML, observamos que la casilla de America aparece marcada de forma automática  eso es posible gracias al atributo checked, así podemos poner a mas de una casilla, mencionado atributo y el resultado sera, que estas saldrán marcadas por defecto.

Cualquier duda o aporte hacerlo por comentarios. Gracias por su tiempo!!




5 comentarios:

  1. Gracias por la información, me ha servido de mucha ayuda.

    ResponderEliminar
    Respuestas
    1. Me alegra que te aya servido Marga! Saludos Gracias por Comentar

      Eliminar
  2. Muchas gracias me sirvio de mucho el CHECKED, logre activar mi casilla tomando el
    valor de una tabla de la base de datos.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Hola! Una pregunta, quisiera utilizar las checkbox, pero no con valores ya predeterminados como usas tú, sino que quiera hacer que vayan apareciendo checkbox según vaya metiendo atributos en otro lado. Por ejemplo: Si tenemos un restaurante, ese restaurante tiene de comida patatas, arroz y ensalada, entonces tengo esas tres checkbox para que el cliente las escoja, pero ahora mi restaurante quiere aprender a hacer pasta, entonces tengo un formulario para introducir esa nueva comida. ¿Cómo se puede hacer para que en los checkbox ahora también aparezca la pasta?

    ResponderEliminar