formulario html5 responsive

Crea un formulario HTML5 responsive

Añade a tu formulario HTML5 validación, estilo y resolución adaptable a todas las pantallas (responsive) con HTML5 input types, atributos y CSS3.

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.

 

 

Si te ha gustado, ¡compártelo!
Share on Google+0Tweet about this on TwitterShare on Facebook0Share on LinkedIn1Email this to someone

20 Responses to "Crea un formulario HTML5 responsive"

  1. Antonio
    Antonio 3 años ago .Responder

    gracias

  2. CURSO DOPPLER
    CURSO DOPPLER 3 años ago .Responder

    bueno

  3. humberto
    humberto 3 años ago .Responder

    hola, gracias por explicar como se hace el formulario html5 pero tengo una duda, a donde van los datos que recibe? como puedo obtener o ver esos datos, soy nuevo en desarrollar sitios web, espero me pueda ayudar, muchas gracias

  4. leo
    leo 3 años ago .Responder

    que tal brother, muy bueno el tutorial sobre el formulario responsive, una duda de que forma hago para que los datos del formulario lleguen a una cuenta predeterminada?, saludos men gracias!

  5. Gema
    Gema 3 años ago .Responder

    Gracias por el tutorial, lo he empleado en una de las páginas de mi web de Inglés de la Escuela Oficial de Idiomas:
    http://palaciodeverano.es/a1/contact.html

    También en mi blog:
    http://rutadeviaje.tk/ingles-nivel-a1-responsive-formularios/
    Allí he copiado literalmente el css que has indicado (espero que no te moleste, lo he referido expresamente en la entrada y he hecho un enlace a esta página de tu blog). Así como he añadido otras funcionalidades: los archivos php y javascript, para que el mensaje se envíe al correo y a fin de que se retorne a la página principal, y los retoques necesarios en el html para que el php y el javascript actúen.

  6. freddi
    freddi 3 años ago .Responder

    Hola Javier tengo un tema en html5 “pluton” agadable a la vista intento que el formulario de contacto envie a mi correo la informacion pero no doi como me podrias ayudar

  7. Andres Fernandez
    Andres Fernandez 3 años ago .Responder

    Me ha gustado mucho como se explica el formulario y muy bueno aplicando estilos css3

  8. loreto
    loreto 3 años ago .Responder

    esta muy buena tu pagina de como hacer un formulario gracias por la ayuda

  9. Tania Meza
    Tania Meza 2 años ago .Responder

    Hola. Me quedó muy lindo mi formulario y muy clara la explicación, pero ahora cómo lo mando a un correo determinado??

    Gracias.

  10. Adonaí Valencia M
    Adonaí Valencia M 2 años ago .Responder

    Excelente explicación, voy a hacerlo a ver si me funciona porque estoy muy novato en ésto de páginas Web. Gracias por tu explicacion.

  11. Pedro Estepa Morente
    Pedro Estepa Morente 2 años ago .Responder

    Interesante y útil tutorial para un formulario responsive. Me he percatado que en el código css del paso 17, el que habla de poner una imagen de fondo, hay una errata; le falta una “n” a la propiedad de background-color.

    Gracias por el aporte, un saludo :)

  12. boris
    boris 2 años ago .Responder

    Hola, ojala puedas orientarme. Tengo una plantilla responsive (aysha acme) y el formulario de contacto no funciona. El pack del template no trae el archivo contact.php.
    Muchas gracias por la ayuda que puedas darme. Atte., Boris

  13. Eric
    Eric 2 años ago .Responder

    Hola! Tienes un enlace con el ejemplo creado? Gracias!

    • Javier Marcos
      Javier Marcos 2 años ago .Responder

      Hola Eric. He tenido el blog un poco desatendido el ultimo año. Demasiadas mudanzas y cambios de ubicación. La verdad es que tengo que actualizar el post con la opción a descargar el formulario. Me lo apunto!

  14. daniel
    daniel 2 años ago .Responder

    buen blog

  15. jesus
    jesus 2 años ago .Responder

    Esta muy bueno tu blog, si le entiendo y todo y eos que no se nada. Seria bueno que frente al codigo le pusieras el resultado de como se va viendo.

    Igual trataré de aprender algo, si no ya te contacto. Cuanto gana un freelance por una pagina web? ganan bien? Con tus cursos me estan dando ganas de estudiarle mas

  16. jesus
    jesus 2 años ago .Responder

    En este tuto solo falto ver a donde se va a guardar esa info, o se manda por correo o como la recupero?

  17. Juan Francisco
    Juan Francisco 2 años ago .Responder

    Muy Bueno Gracias

Deja un comentario