Un ejemplo de estilo específico
Veamos un ejemplo concreto de cómo diseñar un formulario HTML. Construiremos un formulario de contacto de "postal" de aspecto elegante; ver aquí para la versión final.
Si desea continuar con este ejemplo, haga una copia local de postcard-start.html file y siga las instrucciones a continuación.
HTML
El HTML es solo un poco más complicado que el ejemplo que usamos en el primer artículo de esta guía; solo tiene algunos IDs adicionales y un encabezado.
.png "carbon(446).png")
Agregue el código anterior en el cuerpo de su HTML.
Organizando tus recursos
¡Aquí es donde la diversión comienza! Antes de iniciar a codificar, necesitamos tres recursos adicionales:
- El fondo de la postal: Descargue esta imagen y guárdela en el mismo directorio que su archivo HTML de trabajo.
- Una fuente de máquina de escribir: La fuente "Secret Typewriter" de fontsquirrel.com: descargue el archivo TTF en el mismo directorio que el anterior.
- Una fuente dibujada a mano: La fuente "Journal" de fontsquirrel.com: Descargue el archivo TTF en el mismo directorio que el anterior.
Tus fuentes necesitan más procesamiento antes de comenzar:
- Vaya al generador de fuentes web fontsquirrel.
- Usando el formulario, cargue sus dos archivos de fuente y genere un kit de fuente web. Descargue el kit a su computadora.
- Descomprima el archivo zip descargado.
- Dentro del contenido descomprimido encontrará algunos archivos de fuentes (al momento de escribir este artículo, dos archivos .woff y dos archivos .woff2; pueden variar en el futuro). Copie estos archivos en un directorio llamado fonts, en el mismo directorio que antes. Estamos usando dos archivos diferentes para cada fuente para maximizar la compatibilidad del navegador; consulte nuestro artículo de fuentes web para obtener mucha más información.
CSS
Ahora podemos profundizar en el CSS para el ejemplo. Agregue todos los bloques de código que se muestran a continuación dentro del elemento <style>, uno tras otro.
Diseño general
Primero, nos preparamos definiendo nuestras reglas @font-face y todos los estilos básicos establecidos en los elementos <body> y <form>. Si la salida de fontsquirrel fue diferente a lo que describimos anteriormente, puede encontrar los bloques @font-face correctos dentro de su kit webfont descargado, en el archivo stylesheet.css (deberá reemplazar los bloques @font-face a continuación con ellos y actualice las rutas a los archivos de fuentes):
.png "carbon(447).png")
Tenga en cuenta que hemos utilizado CSS Grid y Flexbox para diseñar el formulario. Usando esto, podemos posicionar fácilmente nuestros elementos, incluido el título y todos los elementos del formulario:
.png "carbon(448).png")
Etiquetas y controles
Ahora podemos empezar a trabajar en los propios elementos del formulario. Primero, asegurémonos de que los <label> tengan la fuente correcta:
.png "carbon(449).png")
Los campos de texto requieren algunas reglas comunes. En otras palabras, eliminamos sus borders y backgrounds, y redefinimos sus padding y margin:
.png "carbon(450).png")
Cuando uno de estos campos tienen el foco, lo resaltamos con un fondo transparente gris claro (siempre es importante tener un estilo de foco, para la usabilidad y la accesibilidad del teclado):
.png "carbon(451).png")
Ahora que nuestros campos de texto están completos, necesitamos ajustar la visualización de los campos de texto de una y varias líneas para que coincidan, ya que normalmente no se verán igual usando los valores predeterminados.
Ajustando las áreas de texto
Los elementos <textarea> se representan de forma predeterminada como un elemento de bloque en línea. Las dos cosas importantes aquí son las propiedades resize y overflow. Si bien nuestro diseño es un diseño de tamaño fijo, y podríamos usar la propiedad resize para evitar que los usuarios cambien el tamaño de nuestro campo de texto de varias líneas, es mejor no evitar que los usuarios cambien el tamaño de un textarea si así lo desean. La propiedad overflow se usa para hacer que el campo se represente de manera más consistente en todos los navegadores. Algunos navegadores tienen por defecto el valor auto, mientras que otros tienen por defecto el valor scroll. En nuestro caso, es mejor asegurarse de que todos usen auto:
.png "carbon(452).png")
Dar estilo al botón de enviar
El elemento <button> es realmente conveniente para diseñar con CSS; puedes hacer lo que quieras, incluso usando pseudo-elementos:
.png "carbon(453).png")
El resultado final
¡Y voilá! Su formulario ahora debería verse así:
