Cómo hacer una casilla de verificación obligatoria en html. Eliminamos la entrada y diseñamos los vanos. Las etiquetas de casilla de verificación y los botones de opción están dentro de la etiqueta.
Gracias a CSS3 podemos conseguir casi cualquier efecto que necesitemos en la pantalla. En esta lección veremos cómo podemos diseñar casillas de verificación y botones de opción.
Entrada: marcado + etiqueta: antes ( contenido: "\2022"; color: #f3f3f3; tamaño de fuente: 30px; alineación de texto: centro; altura de línea: 18px;)
Ahora, cuando presionemos el botón de opción, debería aparecer un pequeño círculo blanco en el círculo gris principal.
Estilo de casillas de verificación
Ahora comencemos a diseñar las casillas de verificación. Primero, ocultemos el elemento nuevamente:
Entrada (pantalla: ninguna;)
Dado que vamos a eliminar la visualización de la casilla de verificación estándar usando el pseudoelemento :before, simplemente agregaremos un borde:
Etiqueta de casilla de verificación: antes (radio de borde: 3px;)
Luego agregaremos un símbolo de “marca de verificación”, que aparecerá al hacer clic en la casilla de verificación. Hagamos esto por analogía con un círculo de radio. Esta vez necesitaremos convertir símbolo HTML? ✓.
Entrada: marcado + etiqueta: antes (contenido: "\2713"; sombra de texto: 1px 1px 1px rgba(0, 0, 0, .2); tamaño de fuente: 15px; color: #f3f3f3; alineación de texto: centro ;alto de línea: 15px;
Como resultado, esto es lo que deberíamos obtener:
Resultados
En esta lección, analizamos un método que puede utilizar para mostrar los botones de opción y las casillas de verificación que necesita. Como usamos CSS3, esta técnica solo funcionará en navegadores que admitan esta tecnología. Para lograr resultados similares en navegadores más antiguos, puede utilizar el apropiado
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á actualmente marcada. Si es así, entonces el valor del atributo de valor de la casilla de verificación se informa como el valor de entrada.
Usando entradas de casilla de verificación
Ya hemos cubierto el uso más básico de las casillas de verificación arriba. Veamos ahora las otras características y técnicas comunes relacionadas con las casillas de verificación que necesitará.
Manejo de múltiples casillas de verificación
El ejemplo que vimos arriba sólo contenía una casilla de verificación; En situaciones del mundo real, es probable que encuentre varias casillas de verificación. Si no tienen ninguna relación, puede tratarlas todas por separado, como se muestra arriba. Sin embargo, si todas están relacionadas, las cosas no son así de simple.
Por ejemplo, en la siguiente En la demostración incluimos múltiples casillas de verificación para permitir al usuario seleccionar sus intereses (consulte la versión completa en la sección).
En este ejemplo verá que le hemos dado a cada casilla de verificación el mismo nombre (tenga en cuenta los corchetes al final del nombre, lo que permite que los valores se envíen como una matriz). Si ambas casillas de verificación están marcadas y luego el formulario se envía, obtendrá una cadena de pares de nombre/valor enviados de esta manera: interés=codificación&interés=música. Cuando estos datos lleguen al lado del servidor, debería poder capturarlos como una matriz de valores relacionados y tratarlos adecuadamente; consulte Manejar varias casillas de verificación con una única variable del lado del servidor, por ejemplo.
Marcando casillas por defecto
Para marcar una casilla de verificación de forma predeterminada, simplemente le asigna el atributo marcado. Vea el siguiente ejemplo:
Proporcionar un área de visita más grande para sus casillas de verificación
En los ejemplos anteriores, habrás notado que puedes alternar una casilla de verificación haciendo clic en su elemento asociado que representa un título para un elemento en una interfaz de usuario.">
Más allá de la accesibilidad, esta es otra buena razón para configurar adecuadamente
Casillas de verificación de estado indeterminado
Además de los estados marcado y no marcado, hay un tercer estado en el que puede estar una casilla de verificación: indeterminado. Este es un estado en el que es imposible decir si el elemento está activado o desactivado. Esto se establece usando los elementos."> Propiedad indeterminada del objeto HTMLInputElement a través de JavaScript (no se puede configurar usando un atributo HTML):
InputInstance.indeterminado = verdadero;
Una casilla de verificación en estado indeterminado tiene una línea horizontal en la casilla (parece un guión o un signo menos) en lugar de una marca de verificación en la mayoría de los navegadores.
No hay muchos casos de uso para esta propiedad. Lo más común es cuando hay una casilla de verificación disponible que "posee" una serie de subopciones (que también son casillas de verificación). Si todas las subopciones están marcadas, la casilla de propiedad también está marcada, y si todas están desmarcadas, la casilla de propiedad también está desmarcada. Si una o más de las subopciones tienen un estado diferente al de las demás, la La casilla de verificación de propiedad está en estado indeterminado.
Ejemplos
El siguiente ejemplo es una versión extendida del ejemplo de "varias casillas de verificación" que vimos anteriormente: tiene más opciones estándar, además de una casilla de verificación "otra" que, cuando se marca, hace que aparezca un campo de texto para ingresar un valor para la opción "otra". Esto se logra con un simple bloque de JavaScript. El ejemplo también incluye algo de CSS para mejorar el estilo.
HTML
CSS
html (familia de fuentes: sans-serif;) formulario (ancho: 600 px; margen: 0 auto;) div (margen inferior: 10 px;) conjunto de campos (fondo: cian; borde: 5 px azul sólido;) leyenda (relleno: 10 px ; fondo: azul;javascript
var otherCheckbox = document.querySelector("entrada"); var otroTexto = document.querySelector("entrada"); otherText.style.visibility = "oculto"; otherCheckbox.onchange = function() ( if(otherCheckbox.checked) ( otherText.style.visibility = "visible"; otherText.value = ""; ) else ( otherText.style.visibility = "oculto"; ) );Presupuesto
| Especificación | Estado | Comentario |
|---|---|---|
| Estándar de vida HTML La definición de " "en esa especificación. |
Nivel de vida | |
| HTML5 La definición de " "en esa especificación. |
Recomendación |
Compatibilidad del navegador
La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte
Leyenda
Soporte total Soporte total Compatibilidad desconocida Compatibilidad desconocidaVer también
- El elemento se utiliza para crear controles interactivos para formularios basados en web con el fin de aceptar datos del usuario; Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, según el dispositivo y el agente de usuario."> y los elementos."> HTMLInputElement interfaz que lo implementa.
- La casilla de verificación ( ), o la opción (
Esta guía le presentará Casillas de verificación HTML y le enseñaremos cómo manejarlas en PHP.
Formulario de casilla única
Creemos un formulario simple con una casilla de verificación.
EN secuencia de comandos PHP(archivo checkbox-form.php) es posible leer el valor del campo usando la matriz $_POST. Si $_POST["formWheelchair"] está configurado en YES, entonces se seleccionó la casilla de verificación. Si la casilla de verificación no está seleccionada, entonces la variable $_POST["formWheelchair"] no está configurada.
Aquí hay un ejemplo de procesamiento de formularios en PHP:
La variable $_POST["formWheelchair"] está establecida en YES porque el atributo de valor está establecido en etiqueta de entrada es igual a "SÍ".
Tenga en cuenta que todas las casillas de verificación tienen el mismo nombre (formDoor). Un nombre indica que todas las casillas de verificación están interconectadas. Los corchetes indican que se accederá a todos los valores desde una única matriz. Es decir, $_POST["formDoor"] no devolverá una cadena, como en el ejemplo anterior, sino que devolverá una matriz que contiene los valores de las casillas de verificación seleccionadas por el usuario.
Por ejemplo, si marco todas las casillas, $_POST["formDoor"] devolverá una matriz de (A,B,C,D,E) . En el siguiente ejemplo obtenemos y mostramos todos los valores de la matriz.
La función vacía es útil en caso de que el usuario no haya seleccionado nada. Si la matriz no está vacía, contamos el número de casillas de verificación seleccionadas usando la función de conteo y mostramos todos los valores usando un bucle for.
Si se selecciona la casilla de verificación "Edificio Bellota", la matriz contendrá el valor "A".
Comprobar si una casilla de verificación específica está seleccionada
A menudo es necesario comprobar si está seleccionada una casilla de verificación específica. Para esto puedes usar siguiente función:
Función IsChecked($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( devuelve verdadero; ) ) ) devuelve falso;
Ahora solo necesita llamar a la función IsChecked(chkboxname,value). Por ejemplo:
If(IsChecked("formDoor","A")) ( //hacer... )
Para diseñar casillas de verificación y botones de opción según lo requiera el diseño, hoy no es necesario utilizar soluciones JavaScript (como mi complemento), porque para esto puedes usar solo CSS, y con compatible con versiones anteriores para navegadores más antiguos (es decir, sin sacrificar la usabilidad) que no admiten reglas CSS modernas.
En otras palabras - en navegadores modernos Las casillas de verificación y los botones de opción se verán hermosos, de acuerdo con el diseño previsto, y en los antiguos (esto se aplica a Explorador de Internet versiones 8 y inferiores) permanecerán con el diseño “predeterminado”, característico de cada sistema operativo específico.
Además, La validación HTML5 sigue siendo posible elementos con estilo (que puede no ser el caso cuando se utilizan complementos de JavaScript). En los navegadores modernos, su soporte ha sido la norma durante mucho tiempo.
Características importantes
Para que todo salga bien es importante tener en cuenta lo siguiente:
- Excepto, de hecho, la etiqueta del elemento en sí, que queremos decorar bellamente ( o ), necesitarás una etiqueta
- Etiqueta debe estar antes de la etiqueta
El "truco" consiste en utilizar los pseudoselectores: marcado y: no. En este caso, la casilla de verificación o el botón de opción se vuelven invisibles y su emulación se realiza utilizando pseudoelementos:antes y:después de la etiqueta.
Estilo para navegadores modernos
Consideremos ambas opciones para la ubicación del elemento de formulario al que se le aplicará estilo. Tú decides cuál es más conveniente. La esencia no cambia a partir de esto.
Las etiquetas de casilla de verificación y los botones de opción se encuentran antes de la etiqueta.
En código HTML se ve así:
Una vez más quiero llamar su atención sobre la etiqueta. Necesariamente debe estar ubicado antes etiqueta
Código CSS para la casilla de verificación será así:
Casilla de verificación ( posición: absoluta; índice z: -1; opacidad: 0; margen: 10px 0 0 20px; ) .checkbox + etiqueta ( posición: relativa; relleno: 0 0 0 60px; cursor: puntero; ) .checkbox + etiqueta :antes ( contenido: ""; posición: absoluta; arriba: -4px; izquierda: 0; ancho: 50px; altura: 26px; radio de borde: 13px; fondo: #CDD1DA; sombra de cuadro: inserción 0 2px 3px rgba( 0,0,0,.2); transición: .2s; ) .checkbox + etiqueta:después (contenido: ""; posición: absoluta; arriba: -2px; izquierda: 2px; ancho: 22px; alto: 22px; borde -radio: 10px; fondo: #FFF; sombra de cuadro: 0 2px 5px rgba(0,0,0,.3); transición: .2s; casilla de verificación: marcada + etiqueta: antes (fondo: #9FD468;). casilla de verificación: marcada + etiqueta: después (izquierda: 26px;). casilla de verificación: foco + etiqueta: antes (box-shadow: inserto 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255, 0,.7);
Código CSS para botón de opción será así:
Radio ( posición: absoluta; índice z: -1; opacidad: 0; margen: 10px 0 0 7px; ) .radio + etiqueta ( posición: relativa; relleno: 0 0 0 35px; cursor: puntero; ) .radio + etiqueta :antes (contenido: ""; posición: absoluta; arriba: -3px; izquierda: 0; ancho: 22px; altura: 22px; borde: 1px sólido #CDD1DA; radio de borde: 50%; fondo: #FFF;). radio + etiqueta:después ( contenido: ""; posición: absoluta; arriba: 1px; izquierda: 4px; ancho: 16px; altura: 16px; radio de borde: 50%; fondo: #9FD468; sombra de cuadro: inserción 0 1px 1px rgba(0,0,0,.5); opacidad: 0; transición: .2s; ) .radio:marcado + etiqueta:después (opacidad: 1; ) .radio:focus + etiqueta:antes (box-shadow: 0 0 0 3px rgba(255,255,0,.7);
Al usar propiedades de posición, índice z y opacidad para las clases .checkbox y .radio ocultamos visualmente los elementos originales, mientras permanecen en el mismo lugar donde estarán los elementos con estilo. Y usando el margen los desplazamos un poco para que el mensaje de validación HTML5 luzca armonioso. Dependiendo del diseño de la casilla de verificación y del botón de opción, esta sangría se puede ajustar.
Las etiquetas de casilla de verificación y los botones de opción están dentro de la etiqueta.
código HTML en este caso será el siguiente:
Por analogía con la opción anterior - etiqueta Necesariamente debe estar ubicado antes etiquetas con clase .checkbox__text y .radio__text .
Código CSS para la casilla de verificación será así:
Entrada de casilla de verificación ( posición: absoluta; índice z: -1; opacidad: 0; margen: 10px 0 0 20px; ) .checkbox__text ( posición: relativa; relleno: 0 0 0 60px; cursor: puntero; ) .checkbox__text:before ( contenido: ""; posición: superior absoluta: 0; altura: 26px; fondo: #CDD1DA; inserción 0 2px 3px, 0,.2); absoluto; arriba: -2px; izquierda: 2px; ancho: 22px; alto: 22px; radio de borde: 10px; #FFF; transición : .2s; .checkbox entrada:marcado + .checkbox__text:antes ( fondo: #9FD468; ) .checkbox entrada :marcado + .checkbox__text:después ( izquierda: 26px; ) .checkbox entrada:enfoque + .checkbox__text:antes ( caja- sombra: inserción 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255,255,0,.7);
Código CSS para botón de opción será así:
Entrada de radio ( posición: absoluta; índice z: -1; opacidad: 0; margen: 10px 0 0 7px; ) .radio__text ( posición: relativa; relleno: 0 0 0 35px; cursor: puntero; ) .radio__text:before ( contenido: ""; posición: absoluta; izquierda: 0; altura: 22px; radio del borde: 50%; (contenido: ""; posición: absoluta; arriba: 1px; izquierda: 4px; ancho: 16px; altura: 16px; radio de borde: 50%; fondo: #9FD468; sombra de cuadro: inserción 0 1px 1px rgba(0, 0,0,.5); opacidad: 0.2s; :después (opacidad: 1;) .radio input:focus + .radio__text:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7)
Los estilos aquí son los mismos que en el método anterior, solo que se aplican a otros selectores.
Estilo para navegadores antiguos
Código CSS para la casilla de verificación. En los comentarios al código agregué explicaciones sobre los navegadores:
/* Primero, designamos los estilos para IE8 y versiones anteriores, es decir. Aquí mejoramos un poco la casilla de verificación estándar. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* Esto es para todos los navegadores excepto los muy antiguos que no admiten selectores plus. Mostramos que se puede hacer clic en la etiqueta. */ .checkbox + label ( cursor: pointer; ) /* Luego viene el diseño de la casilla de verificación en los navegadores modernos, así como en IE9 y superiores. Debido al hecho de que los navegadores más antiguos no admiten los selectores :not y :checked, todos los estilos siguientes no funcionarán en ellos. En este caso, marcado se especifica sin dos puntos delante, por alguna razón funciona de esa manera. */ .checkbox:not(marcado) ( posición: absoluta; índice z: -1; opacidad: 0; margen: 10px 0 0 20px; ) .checkbox:not(marcado) + etiqueta ( posición: relativa; relleno: 0 0 0 60px; ) .checkbox:not(marcado) + etiqueta:antes ( contenido: ""; posición: absoluta; arriba: -4px; izquierda: 0; ancho: 50px; alto: 26px; radio del borde: 13px; fondo : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transición: .2s) .checkbox:not(marcado) + label:after (contenido: ""; posición: absoluta; arriba: -2px; ancho: 22px; radio del borde: 10px; sombra del cuadro: 0 2px 5px; .checkbox:marcado + etiqueta:antes (fondo: #9FD468; ) .checkbox:marcado + etiqueta:después ( izquierda: 26px;) .checkbox:focus + etiqueta:antes (box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7)
Código CSS para botón de opción:
Radio ( alineación vertical: arriba; ancho: 17px; alto: 17px; margen: 0 3px 0 0; ) .radio + etiqueta ( cursor: puntero; ) .radio:not(marcado) ( posición: absoluta; índice z: -1; opacidad: 0; margen: 10px 0 0 7px; ) .radio:not(marcado) + etiqueta ( posición: relativa; relleno: 0 0 0 35px; ) .radio:not(marcado) + etiqueta:antes ( contenido : ""; posición: absoluta; izquierda: 0; altura: 22px; radio del borde: 50%; marcado) + etiqueta: después (contenido: ""; posición: absoluta; arriba: 1px; izquierda: 4px; ancho: 16px ; altura: 16px; radio del borde: 50%; fondo: #9FD468; sombra del cuadro: .radio: marcado + etiqueta:después (opacidad: 1;) .radio:focus + etiqueta:antes (box-shadow: 0 0 0 3px rgba(255,255,0,.7);
Ejemplos
Así se hace de una forma tan sencilla. Gracias a este método, puedes diseñar casillas de verificación y botones de radio con usando CSS puedes hacerlo como quieras.
Hoy te mostraré un truco genial que te permitirá crear casillas de verificación geniales, mucho más hermosas que las que ofrece HTML por defecto. Te mostraré cómo hacerlo en diseño css casilla de verificación -s. En otras palabras, te mostraré cómo hacer css hermoso casillas de verificación, es decir, marcas de verificación.
Marcado inicial
Entonces, debemos comenzar agregando código al html que mostrará nuestras casillas de verificación, así como también los títulos para ellas (etiqueta), estos campos deben estar vinculados entre sí para que cuando haga clic en la etiqueta pueda marcar la casilla.
Entonces comentaré un poco. Tenemos tres pares: el campo de la casilla de verificación y el título del mismo. Cada campo recibe su propio identificador; la vinculación con una etiqueta se produce mediante el atributo for, donde se escribe el nombre del identificador a asociar. Hasta ahora todo en la página se ve así, es decir, es normal. apariencia casillas de verificación. Ahora lo cambiaremos.
Eliminar entrada, diseñar tramos
Entonces, ahora necesitamos ocultar las casillas de verificación habituales de la página.
Entrada (pantalla: ninguna;)
Ahora necesitamos diseñar de alguna manera los nuevos campos. Decoraremos los elementos span, ya que están dentro de la etiqueta.
Entrada + extensión de etiqueta (pantalla: bloque en línea; ancho: 40 px; margen derecho: 10 px; altura: 40 px; alineación vertical: medio; borde: 5 px verde sólido; cursor: puntero; radio del borde: 5 px;)
Con este selector seleccionamos todos los tramos en las etiquetas, que se ubican en el código inmediatamente después de las entradas con el tipo de casilla de verificación. De esta forma el diseño se aplicará a nuestros vanos. les damos tipo de línea de bloque, un cierto ancho y alto, sangría a la derecha para que el texto no encaje bien.
hagámoslo funcionar
Ahora debemos asegurarnos de que cuando haces clic dentro del lapso, es decir, cuando seleccionas una opción, automáticamente se coloca una marca de verificación en ella. Para hacer esto, primero encontré en Internet el ícono correspondiente con una marca de verificación (debe estar en formato png) y lo reduje al tamaño de nuestro campo. Ahora solo queda insertar el siguiente código:
Entrada: marcado + intervalo de etiquetas (fondo: url (btn.png) sin repetición;)
¡Eso es todo, ya funciona! Intente hacer clic y verá que aparece una bonita marca de verificación cuando lo selecciona. Mi foto estaba en la misma carpeta que archivo css y se llamó btn.png, de ahí la entrada.
Entonces, ¿qué hace nuestra entrada mágica: selector de intervalo de etiqueta marcado +? Básicamente, le indica al navegador que haga lo siguiente: cuando cualquiera de las casillas de verificación esté marcada, aplique intervalos en las etiquetas. imagen de fondo. Así que todo es simple, lo hicimos sin scripts, creando hermosas casillas de verificación usando CSS puro. Escriba en los comentarios si algo no está claro.
