Los formularios son métodos simples pero efectivos para conseguir feedback y comunicación. HTML5 ha introducido una selección de nuevos input types y atributos que hacen la creación y validación de formularios más fácil. En vez de usar únicamente input=text, los usuarios pueden añadir url, fecha, teléfono y email para validar instantáneamente un campo. Añadir input type=email significa que el usuario necesita escribir una dirección de email en el formato correcto. Añadiendo el elemento ‘required’ hace que el formulario no pueda ser enviado hasta que el campo requerido no sea completado. Otro componente interesante es el placeholder, que te permite incluir texto, hasta que el campo sea seleccionado, ideal para campos de búsqueda.
Los formularios son un poco sosos, pero con algún efecto CSS3 y un poco de imaginación, vamos a demostrar como hacerles atractivos y responsive.
01.- Página Básica
El primer paso es crear una página básica HTML5. Vamos a crear el formulario como componente que puede añadirse a cualquier página existente, preparado para usar.
02.- Incluye fuentes web
El formulario se va a colocar en un contenedor genérico al que se le puede añadir estilos acordes a tu página. En este tutorial vamos a usar una imagen de fondo y una fuente de Google. Coge el código de Google web fonts (por ejemplo Open Sans), y colócalo en el head de la página.
03.- Crea el contenedor
Crea una etiqueta <div> y nombrala como #form. Establece el ancho a 470px, altura en auto, añade 5px de padding en ambos lados, izquierda y derecha, y deja los margenes en auto. Esto se puede ajustar para cuadrar mejor en tu web.
04.- Añade campos input
El formulario va a incluir una selección de campos soportados por HTML5 para demostrar como funcionan. El primer paso es añadir una etiqueta de apertura y de cierre <form></form>. Vamos a usar 5 campos y un botón de enviar. Empieza añadiendo los 5 campos como input type text y el sexto como submit.
05.- Input type
Los dos primeros campos van a ser nombres, permanecerán como text. El tercero sera el email – “email”, y el cuarto fecha – “date”, y el último campo será la web – “url”.
06.- Nombrando los campos
Los campos del formulario necesitan un nombre único para identificarlos. Por ejemplo, los dos primeros campos de texto los llamaremos nombre y apellidos. El campo email será simplemente email, fechainicio y web sera direccionweb. Puedes modificar el nombre y llamarlos como quieras.
07.- Etiquetas
Vamos a etiquetar los campos para identificarlos. Añade etiquetas <label> de apertura y de cierre </label> encima de cada campo y pon un nombre acorde con el campo. Después añade el atributo “required” a los campos que necesitas que estén completos para enviar el formulario.
08.- Estilo del texto
La base del formulario ya esta hecha, es el momento de empezar con los estilos. Añade el body tag al CSS y escoge tamaño, anchura y color global para el estilo del texto. Esto modificara las labels, pero podrás modificarlas más adelante si quieres.
09.- Anchura del formulario
Para hacer el formulario responsive, daremos un porcentaje de anchura los campos input. La opción más común esta entre el 100% y el 95%, pero se puede modificar para ajustarlo a tu web. Añade el selector input en tu CSS y establece la anchura a 100% o a otra que escojas. Esto colocará inmediatamente las labels encima de su campo.
10.- Estilo de los campos
Para mejorar el estilo de los campos input, vamos a añadir estilos a los textos y arreglar la altura. Establece la altura en 40px y añade la anchura y el tamaño de fuente que deseas. Para estar seguros del resultado una buena idea es guardar y hacer una vista preliminar para ver si se complementan bien. Añade un color de fondo si quieres enfatizar cada campo.
11.- Crea algo de espacio
Las etiquetas y campos están muy juntos unos encima de otros. Para añadir algo de espacio, añade margin bottom de 10px al atributo input. Para añadir algo de espacio entre el texto y la etiqueta, añade margin top de 5px.
12.- Texto placeholder
El atributo placeholder permite añadir texto a un campo cuando esta vacío. Cuando se selecciona el campo – se hace clic sobre él – y el usuario empieza a escribir, entonces desaparece. Para añadir texto placeholder a cualquier campo, simplemente añade placeholder=”tu texto aquí”.
13.- Input fecha
Los input type date trabajan de manera diferente según el navegador. En Chrome se ve una flecha que abre un calendario para escoger fecha, mientras que en otros navegadores no se verá nada. Si quieres saber más sobre el navegador Google Chrome o descargalo, te aconsejo este artículo.
14.- Valor de URL
El campo url permite a los usuarios añadir su web. Para asegurar que el campo funciona correctamente, hay que añadir http:// antes de la dirección. Para asegurar esto, incluimos el prefijo value=”http://” al campo.
15.- Estilo del botón
El botón de submit por defecto se muestra de manera diferente en los navegadores. Para arreglar esto y hacer que el botón cuadre con el formulario, necesitas añadir un selector a tu CSS. Añade input[type=submit]{} y crea los estilos del botón entre las llaves. Te dejo unos estilos de ejemplo para el botón. Nota: hay estilo borde, si quieres crear un efecto plano añade border:none.
16.- Añade un título
Para crear un propósito claro para tu formulario puedes añadir un título a tu formulario. Crea etiquetas <h2> o <h3> y dales estilo. Te dejo un ejemplo de estilo de texto que puedes usar o modificar.
17.- Termina tu formulario HTML5 responsive
Para añadir interés puedes añadir una imagen de fondo y/o una sombra y esquinas redondeadas al contenedor del formulario. Para hacerlo responsive, simplemente redimensiona la etiqueta #form y los campos se adaptarán automáticamente. Establece la altura del formulario en auto para compensar.
No hay comentarios:
Publicar un comentario