el cssar
el cssar
Diseño UX, técnicas CSS, accesibilidad y estándares web
Saltar al contenido
  • ¿De qué va el CSSar?

formularios HTML

En HTML, formulario es un concepto que toma múltiples dimensiones. Un formulario web, es mucho más que una plantilla bidimensional en la que el usuario completa sus campos verticalmente.

La interacción con un formulario HTML implica cuestiones como, dinamismo, reactividad, validación, autocompletado de campos, acceso a información adicional, así como distintos tipos de navegación, desde scroll a paginado, pasando por arquitecturas Step by Step (paso a paso).

Formularios HTML dinámicos

Javascript nos da la posibilidad de condicionar los elementos visibles en el formulario a las selecciones previas haciendo que sea mucho más dinámico y asumible al reducir los campos a aquellos extríctamente necesarios.

Reactividad

Los elementos del formulario HTML reaccionan a la interacción gracias a CSS, al pasar por encima (:hover), poner el foco en ellos (:focus), ya sea pulsando o mediante la tecla de tabulación, o al activarlos (:active), como sucede al pulsar los botones. Esta reacción permite al usuario percibir si dicha interacción fue correcta y/o efectiva.

Validación HTML 5

HTML 5 y CSS 3 son clave a la hora de mostrar al usuario si su interacción es o no correcta. Mediante la definición del parámetro type y/0 pattern, podemos definir patrones de validación que, gracias a CSS3 y sus pseudoselectores :valid e :invalid, nos permitirán aplicar estilos e incluso mostrar elementos que ayuden al usuario a completar su formulario HTML.

Automcompletado de campos

Una función muy práctica que nos aportan los navegadores es la posibilidad de completar los formularios basándose en interacciones previas. Esto es posible gracias a la identificación estandarizada de los campos en HTML mediante sus atributos ID y Name, siempre y cuando no se haya definidio el valor Off del atributo autocomplete.

Navegación

La quinta dimensión que nos aportan los formularios HTML es la navegación. Desde una simple ancla o tooltip que nos aporte más información a la posibilidad de seleccinonar archivos de nuestro sistema para usarlos como respuesta.

Hay 7 puestos etiquetados formularios HTML (esta es la página 1 de 1).

Input type number html

Todo lo que necesitas saber de input type number de HTML5 para crear tu propio componente multinavegador de forma fácil usando estándares.

Continue leyendo →
en HTML5 | abril 11, 2025 | 2,978 Palabras | Comentario

Neumorphism CSS UI

Aprende a trabajar con Neumorphism en CSS con este completo tutorial que incluye algunos de los elementos más caracterísitcos del diseño neomórfico.

Continue leyendo →
en CSS | enero 15, 2025 | 2,713 Palabras | Comentario

HTML Select CSS dropdown

Todo lo que hay que saber sobre HTML Select y cómo personalizarlo con CSS.

Continue leyendo →
en HTML | junio 24, 2024 | 1,516 Palabras | Comentario

HTML Option – experimentos CSS

¿Como personalizar los option de un elemento select? Si llevas tiempo esperando una solución mejor que la ofrecida por algunos frameworks como Bootstrap, lee este artículo 😉

Continue leyendo →
en HTML | junio 24, 2024 | 2,595 Palabras | Comentario

Línea de dirección 2

Por qué no debemos usar la línea de dirección 2 y qué debemos usar en su lugar para mejorar la experiencia de usuario de formularios con campos de dirección.

Continue leyendo →
en UX | diciembre 31, 2023 | 2,150 Palabras | Comentario

Diseño de validación de formularios web

Cómo diseñar elementos de validación para formularios web que sean usables y accesibles.

Continue leyendo →
en UX | marzo 5, 2022 | 1,026 Palabras | Comentario

Selectores avanzados CSS 3/4 – :valid e :invalid

Tutorial para crear una validación de formularios HTML5 usable y accesible con selectores CSS :valid, :invalid, :required, :indeterminate y :out-of-range.

Continue leyendo →
en CSS | febrero 21, 2022 | 1,905 Palabras | Comentario

Subscríbete al boletín

Etiquetas

accesibilidad buscador compartir contacto CSS CSS3 css columns código estructural diseño e-mail email enlace float formularios HTML funciones CSS href HTML HTML pattern inputmode input type jQuery link marcado semántico morfismo pattern pseudo-clases CSS REGEX responsive scrollbar selectores CSS share slider bar tabla HTML Telegram UCD URL usabilidad validación validación HTML5 web 3.0 web semántica whatsapp xhtml
Independent Publisher potencializado por WordPress

elcssar.com es una obra de Daniel Fernando Abril Franco licenciada como CC BY-NC-ND 4.0