Creando una forma responsiva con estilo con CSS3 y HTML5

La codificación con CSS3 ha cambiado dramáticamente el panorama dentro del desarrollo web frontend. Hay más oportunidades para crear interfaces únicas con degradados, sombras y esquinas redondeadas. Todos estos efectos se están adoptando lentamente en todos los principales navegadores web.

En este tutorial quiero mostrar muchos de estos geniales efectos CSS3. He creado un formulario web simple utilizando algunos de los tipos de entrada HTML5 más nuevos. El diseño también es sensible; Se adaptará a medida que se reduzca el tamaño de la ventana. Esta situación es perfecta para crear formularios web para usuarios de teléfonos inteligentes..

Verifique el código fuente y vea si puede seguir la estructura de archivos. También puede personalizar estos elementos y copiarlos en sus propios sitios web..

Manifestación
Descargar el código fuente

Construyendo la Estructura de la Forma

Para empezar he creado un archivo principal. index.html junto con dos hojas de estilo separadas. style.css contiene todos los selectores por defecto mientras responsive.css Maneja diferentes tamaños de ventana. Mi doctype es HTML5 y envolví todo el formulario en un contenedor

Este ejemplo solo demuestra los efectos que puede manifestar al codificar en CSS3. Por lo tanto, no tenemos una secuencia de comandos de envío posterior o destino para redirigir al usuario. Mi código a continuación contiene las etiquetas de entrada de apertura para nuestros primeros elementos de formulario.

La primera área de bloques está envuelta en una etiqueta de sección para que podamos flotar el diseño lado a lado. La columna de la izquierda contiene todas estas entradas: texto, correo electrónico, URL y número de teléfono. A medida que se mueve en su teléfono, la pantalla del teclado móvil debe adaptarse según el tipo de entrada. Existen muchas buenas razones para admitir estas funciones para dispositivos móviles, ya que todo el mundo está trabajando en estos días..

El elemento textarea también puede tener un texto de marcador de posición definido en la carga de la página. Esto es similar a una etiqueta que desaparece una vez que el usuario ingresa algún texto en el campo. El atributo que no se transfiere es autocompletar Porque las textareas no suelen rellenar contenido relacionado..

Controles de la barra lateral

Quería crear este formulario para que respondiera apropiadamente al cambio de tamaño de las ventanas. Cuando la ventana está lo suficientemente llena, ambas columnas de entrada están flotando una al lado de la otra. Pero si el ancho se reduce ligeramente, entonces la barra lateral derecha cae debajo del contenido principal.

Aquí está mi HTML para el área de la barra lateral:

   Recipiente:
  
  Prioridad:
   Bajo    Medio    Alto

Este código en realidad no es nada demasiado confuso. Sólo una simple opción, seleccione el menú y algunos botones de radio. Además, después de estos objetos, coloqué un botón de reinicio y envío hacia el final de la sección.

Todo esto se ve muy bien, así que ahora vamos a pasar a algunas propiedades CSS. Hay tantas personalizaciones que puede aplicar al trabajar en elementos de formulario. Trata de no aturdirte pensando demasiado y diviértete!

Caja de sombras animadas

Notarás que al pasar por cada uno de los elementos de entrada principales, he animado una sombra exterior colorida. Google Chrome tiene una propiedad de esquema que hace algo similar, pero no tan extravagante. Esta pequeña parte de la interfaz es atractiva para los visitantes por primera vez..

 / ** los elementos de formulario ** / # hongkiat-form box-sizing: border-box;  # hongkiat-form .txtinput display: block; Familia tipográfica: "Helvetica Neue", Arial, sans-serif; estilo de borde: sólido; ancho del borde: 1px; color de borde: #dedede; margen inferior: 20px; tamaño de fuente: 1.55em; relleno: 11px 25px; relleno-izquierda: 55px; ancho: 90%; color: # 777; caja-sombra: 0 1px 3px rgba (0, 0, 0, 0.1) inserción; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserto; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserto; transición: borde 0.15s 0s lineales, cuadro-sombra 0.15s 0s lineales, color 0.15s 0s lineales; -webkit-transición: borde 0.15s 0s lineales, box-shadow 0.15s 0s lineales, color 0.15s 0s lineales; -moz-transición: borde 0.15s 0s lineales, cuadro-sombra 0.15s 0s lineales, color 0.15s 0s lineales; -o-transición: borde 0.15s 0s lineales, cuadro-sombra 0.15s 0s lineales, color 0.15s 0s lineales;  # hongkiat-form .txtinput: focus color: # 333; color de borde: rgba (41, 92, 161, 0.4); caja-sombra: 0 1px 3px rgba (0, 0, 0, 0.1) inserción, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), recuadro, 0 0 8px rgba (41, 92, 161, 0.6); esquema: 0 ninguno;

Para apuntar a cada elemento de texto he usado la clase. .txtinput. Cada una de las propiedades de transición funciona en el borde, el cuadro de sombra y el color. Estoy usando tamaño de caja: caja de borde; en el contenedor de formularios para que el relleno no arruine nuestro diseño responsivo.

Tuve que copiar estos mismos estilos y editarlos ligeramente para el área de texto. Cambié algunos de los rellenos y márgenes, y añadí un icono de fondo único.

 # hongkiat-form textarea display: block; Familia tipográfica: "Helvetica Neue", Arial, sans-serif; estilo de borde: sólido; ancho del borde: 1px; color de borde: #dedede; margen inferior: 15px; tamaño de letra: 1.5em; relleno: 11px 25px; relleno-izquierda: 55px; ancho: 90%; altura: 180px; color: # 777; caja-sombra: 0 1px 3px rgba (0, 0, 0, 0.1) inserción; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserto; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserto; transición: borde 0.15s 0s lineales, cuadro-sombra 0.15s 0s lineales, color 0.15s 0s lineales; -webkit-transición: borde 0.15s 0s lineales, box-shadow 0.15s 0s lineales, color 0.15s 0s lineales; -moz-transición: borde 0.15s 0s lineales, cuadro-sombra 0.15s 0s lineales, color 0.15s 0s lineales; -o-transición: borde 0.15s 0s lineales, cuadro-sombra 0.15s 0s lineales, color 0.15s 0s lineales;  # hongkiat-form textarea: focus color: # 333; color de borde: rgba (41, 92, 161, 0.4); caja-sombra: 0 1px 3px rgba (0, 0, 0, 0.1) inserción, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), recuadro, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserción, 0 0 8px rgba (40, 90, 160, 0.6); esquema: 0 ninguno;  # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no se repite;

Entradas de barra lateral

Los botones de opción y los elementos de menú seleccionados tienen un estilo mucho más simple. Puede aplicar efectos de brillo externo y sombras similares en estos elementos, pero no siempre se ve bien. Alternativamente, los diseñadores crearán interfaces de usuario personalizadas y las adjuntarán como imágenes de fondo. Pero esto puede requerir una solución alternativa de jQuery para que las opciones se muestren correctamente..

 span.radiobadge display: block; margen inferior: 8px;  etiqueta de span.radiobadge font-size: 1.2em; parte inferior de relleno: 4px;  select.selmenu font-size: 17px; color: # 676767; relleno: 9px! importante; borde: 1px sólido #aaa; ancho: 200px;

No he hecho mucho para alejarlos de los elementos de entrada principales. Un montón de relleno adicional es importante para que los usuarios se sientan cómodos interactuando con el formulario. Cuando el texto es muy pequeño, puede ser difícil rellenar cada parte. Mantenga su fuente grande, pero no tan grande que abrume la página.

Botones personalizados

Los botones de reinicio y envío están diseñados en una clase propia. He construido un conjunto de gradientes de luz para combinar bien con los reflejos azules en nuestros campos de formulario.

A continuación se encuentra mi código CSS para el botón de envío en estado estándar y de desplazamiento.

 #buttons #submitbtn display: block; flotador izquierdo; altura: 3em; relleno: 0 1em; borde: 1px sólido; esquema: 0; font-weight: negrita; tamaño de letra: 1.3em; color: #fff; text-shadow: 0px 1px 0px # 222; espacio en blanco: nowrap; ajuste de palabras: normal; alineación vertical: medio; cursor: puntero; -moz-border-radius: 2px; -webkit-border-radius: 2px; radio del borde: 2px; color de borde: # 5e890a # 5e890a # 000; -moz-box-shadow: recuadro 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: recuadro 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: recuadro 0 1px 0 rgba (256,256,256, .35); caja-sombra: recuadro 0 1px 0 rgba (256,256,256, .35); color de fondo: rgb (226,238,175); imagen de fondo: -moz-lineal-gradiente (superior, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (3%, rgb (226,238,175)), stop de color (3%, rgb (188,216,77)), stop de color (100) %, rgb (144,176,38))); imagen de fondo: -webkit-linear-gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); imagen de fondo: -o-lineal-gradiente (superior, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); imagen de fondo: gradiente lineal-ms (superior, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); imagen de fondo: gradiente lineal (arriba, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; color: #fff; -moz-box-shadow: inserción 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: inserción 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow: recuadro 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); caja-sombra: recuadro 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); fondo: rgb (228,237,189); Fondo: gradiente lineal-moz (arriba, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, límite de color (2%, rgb (228,237,189)), límite de color (3%, rgb (207,219,120)), límite de color (100%, rgb ( 149,175,54))); Fondo: -webkit-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); Fondo: -o-gradiente lineal (superior, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fondo: -ms-gradiente lineal (superior, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); Fondo: gradiente lineal (arriba, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

¡Es casi imposible mantener este tipo de selector limpio! Simplemente hay demasiadas propiedades que necesita enumerar y admitir para muchos navegadores antiguos. Internet Explorer puede incluso representar estos gradientes con el filtro adecuado. Observe que, además de los degradados de fondo, también he incluido un nuevo color de borde, esquinas redondeadas y un cuadro sombreado al pasar el cursor..

El botón de reinicio se ve similar pero he ido por una ruta completamente diferente con la combinación de colores. El gris claro tiende a caer en el fondo en comparación con los colores verdes brillantes. Es probable que nuestro botón de reinicio no se use mucho, por lo que no necesita toda la atención.

 #buttons #resetbtn display: block; flotador izquierdo; color: # 515151; text-shadow: -1px 1px 0px #fff; margen derecho: 20px; altura: 3em; relleno: 0 1em; esquema: 0; font-weight: negrita; tamaño de letra: 1.3em; espacio en blanco: nowrap; ajuste de palabras: normal; alineación vertical: medio; cursor: puntero; -moz-border-radius: 2px; -webkit-border-radius: 2px; radio del borde: 2px; color de fondo: #fff; imagen de fondo: -moz-lineal-gradiente (superior, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (2%, rgb (255,255,255)), stop de color (2%, rgb (240,240,240)), stop de color (100%, rgb (222,222,222))); imagen de fondo: -webkit-linear-gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagen de fondo: -o-lineal-gradiente (superior, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagen de fondo: gradiente lineal-ms (superior, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagen de fondo: gradiente lineal (arriba, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); borde: 1px sólido # 969696; caja de sombra: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75);  #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); color: # 818181; color de fondo: #fff; imagen de fondo: -moz-lineal-gradiente (superior, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (2%, rgb (255,255,255)), stop de color (2%, rgb (244,244,244)), stop de color (100%, rgb (229,229,229))); imagen de fondo: -webkit-linear-gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagen de fondo: -o-linear-gradient (top, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagen de fondo: gradiente lineal (arriba, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); color de borde: # aeaeae; caja-sombra: recuadro 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5);

Incluso podría eliminar el tipo de reinicio y usar esta combinación de colores blanco / gris como botón de envío principal. He usado muchos de los mismos estilos de degradado y efectos de sombra, junto con una sombra de texto para la etiqueta interna. Definitivamente proporciona una sensación diferente a la experiencia del usuario..

Cambios de diseño responsivo

Al pasar a mi otro archivo CSS, podemos ver las sencillas consultas de medios sensibles que he configurado. Cualquier ventana del navegador por encima de 800 px experimentará la interfaz de la barra lateral completa. A medida que llega por debajo de este umbral, la columna de la izquierda se expande a un ancho del 100% y ve que los elementos de la barra lateral se despliegan a continuación..

 Pantalla @media y (ancho máximo: 800 px) cuerpo relleno: 10 px 15 px;  #container ancho: 100%;  # hongkiat-form #aligned width: 100%; flotar: ninguno; bloqueo de pantalla;  # hongkiat-form #aside ancho: 100%; bloqueo de pantalla; flotar: ninguno;  # hongkiat-form .txtinput, # hongkiat-form textarea ancho: 85%;  #prioritycase float: left; bloqueo de pantalla;  #recipientcase float: left; bloqueo de pantalla; margen derecho: 55px;

A medida que nos acercamos al tamaño, trato de adaptar cada uno de los formularios de entrada. La propiedad de ancho puede terminar más larga que la propia página web y luego tenemos formularios de entrada que sobresalen del borde. Esto sucede alrededor de 550px, que es donde rompo la siguiente consulta, junto con las resoluciones de pantalla de iPhone para vertical y horizontal..

 / * pantalla de visualización más pequeña ******* / @media only screen y (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%;  / * iPhone Landscape ******** / @media only screen and (max-width: 480px) body padding: 10px 0px;  select.selmenu width: 190px;  / * iPhone portrait ******* / @media only screen and (max-width: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea ancho: 70%;  # hongkiat-form #aligned desbordamiento: oculto;  select.selmenu width: 160px;  #recipientcase margin-right: 30px;

El modo de paisaje horizontal aún mantiene todo muy bien unido. Solo he hecho que el menú de selección desplegable sea un poco más delgado para dejar espacio para los botones de radio. En la vista de retrato, he cambiado el tamaño de todos los elementos a anchos mucho más pequeños. Ahora nuestro código no se interrumpirá incluso en ventanas de navegador redimensionadas. Pero también es bueno tener soporte para teléfonos inteligentes iOS / Android.

Manifestación
Descargar el código fuente

Conclusión

Espero que este tutorial haya sido informativo para explicar cuánto se puede hacer en sus formularios web. Las nuevas propiedades de CSS3 son lo suficientemente poderosas como para crear animaciones que funcionan completamente con solo unas pocas líneas de código. Es realmente un momento emocionante para trabajar en el desarrollo web y seguir estas tendencias..

Si tiene ideas o sugerencias sobre el código del tutorial, no dude en compartirlas con nosotros a través del cuadro de comentarios a continuación..