Morton 17 de noviembre de 2013 a las 09.09
   Imprimir artículo
elWebmaster.com

Cómo hacer un formulario con validación en HTML5


html5logowideHTML5 ya es funcional en todos los navegadores, y es m√°s simple de lo que parece. En este sencillo tutorial te ense√Īamos c√≥mo armar un formulario.

Para empezar tendremos que establecer la estructura.

html5-contact-form

  1. <div id="contact-form">  
  2.    <h1>¬°Cont√°ctate con nosotros!</h1>
  3.    <h2>Usa el formulario para acercarnos tu mensaje.</h2>  
  4.    <p id="failure">Oops... Algo anduvo mal.</p>  
  5.    <p id="success">Gracias, tu mensaje ha sido enviado correctamente.</p>  
  6.    <form method="post" action="emailForm.php">  
  7.       <label for="name">Name: <span class="required">*</span></label>  
  8.       <input type="text" id="name" name="name" value="" placeholder="Your name" required="required" autofocus="autofocus" />  
  9.          
  10.       <label for="email">Email Address: <span class="required">*</span></label>  
  11.       <input type="email" id="email" name="email" value="" placeholder="your@email.com" required="required" />  
  12.          
  13.       <label for="website">Website: </label>  
  14.       <input type="web" id="webstie" name="website" value="" />  
  15.          
  16.       <label for="subject">Subject: </label>  
  17.       <select id="subject" name="subject">  
  18.          <option value="hello">I just want to say hello =]</option>
  19.          <option value="quote">I'd like a quote</option>  
  20.          <option value="general">General</option>  
  21.       </select>  
  22.          
  23.       <label for="message">Message: <span class="required">*</span></label>  
  24.       <textarea id="message" name="message" placeholder="Write your message here, please." required="required"></textarea>  
  25.            
  26.       <input type="submit" value="Send away!" id="submit" />
  27.    </form>  
  28. </div>

Habr√°s notado que gracias a las nuevas capacidades de HTML5, ahora es posible que el tipo de input sea definido como email, lo que nos permite que al momento de intentar enviarse el formulario, se valide el campo y arroje un error en caso de no ser un e-mail v√°lido.

Adicionalmente, el atributo required se asegura de que el formulario chequee automáticamente que todos los campos hayan sido completados en los campos requeridos. Finalmente, placeholder permite colocar un texto de explicación que desaparecerá cuando intentemos comenzar a escribir en ese campo.

Para darle estilo a nuestro formulario, este es el CSS recomendado:

  1. body {
  2.    background: #BFD7C1; /* light green */
  3.    color: #262626;
  4.    font-family: Arial, san-serif;
  5. }
  6.  
  7. #contact-form {  
  8.    background-color: #87C489;
  9.    width: 465px;  
  10.    padding: 20px;  
  11.    margin: 50px auto;  
  12.    border-radius: 15px;    
  13.    -moz-border-radius: 15px;  
  14.    -webkit-border-radius: 15px;  
  15. }
  16.  
  17. #contact-form input,  
  18. #contact-form select,  
  19. #contact-form textarea,  
  20. #contact-form label {  
  21.    font-size: 15px;  
  22.    margin-bottom: 2px;
  23.    font-family: Arial, san-serif;
  24. }  
  25.  
  26. #contact-form input,  
  27. #contact-form select,  
  28. #contact-form textarea {  
  29.    width: 450px;
  30.    background: #fff;
  31.    border: 0;
  32.    -moz-border-radius: 5px;  
  33.    -webkit-border-radius: 5px;  
  34.    border-radius: 5px;
  35.    margin-bottom: 25px;  
  36.    padding: 5px;  
  37. }  
  38.  
  39. #contact-form input:focus,  
  40. #contact-form select:focus,  
  41. #contact-form textarea:focus {  
  42.    background-color: #E5E6E7;
  43. }  
  44.  
  45. #contact-form textarea {  
  46.    height: 150px;  
  47. }  
  48.  
  49. #contact-form #submit {  
  50.    width: 450px;  
  51.    color: #BFD7C1;  
  52.    border: none;  
  53.    background-color: #6EA070;
  54. }  
  55.  
  56. #contact-form #submit:hover {  
  57.    background-color: #BFD7C1;  
  58.    color: #6EA070;
  59. }
  60.  
  61. input:required, textarea:required {  
  62.    box-shadow: none;
  63.    -moz-box-shadow: none;  
  64.    -webkit-box-shadow: none;  
  65.    -o-box-shadow: none;  
  66. }
  67.  
  68. #contact-form .required {  
  69.    font-weight:bold;  
  70.    color: #E5E6E7;      
  71. }
  72.  
  73. #failure, #success {
  74.    color: #6EA070;
  75.    display:none;  
  76. }

Y eso es todo ¬°Esperamos que te sea de utilidad!

Fuente original del artículo: Web Design Views
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (13)

  1. Javier Cisneros dice:

    Podrían indicar como es la estructura del emailForm.php que solicita al principio el formulario?

    saludos

  2. Marcelo dice:

    Podrían indicar como es la estructura del emailForm.php que solicita al principio el formulario?
    saludos

  3. Genaro dice:

    Podrían indicar como es la estructura del emailForm.php que solicita al principio el formulario?
    saludos

  4. Juan Miranda dice:

    Sres, si se percatan el autor solo indica que el peque√Īo tutorial est√° dise√Īado para aprender a crear formularios en HTML5, esto con la ayuda de CSS3 on lo cual nos permitir√° la validaci√≥n del formato del e-mail.

    Es decir, despues de esta ayuda cada uno debería crear un archivo .php de nombre emailForm el cual enviará lo que se ingrese en este formulario.

  5. pepe dice:

    Si Juan, pero es verdad que si pusieran tambi√©n el archivo .php estar√≠a genial! ūüėČ

  6. pepe dice:

    Por cierto, muchas gracias por el formulario, est√° muy bien!!!

  7. xilux dice:

    Disculpa y para crear el formulario para agregar comentarios en la pagina,(osea este donde he dejado el comentario) es el mismo método, ? podrías explicarlo :)

  8. Moises dice:

    exelente felicitaciones muy util

  9. Pablo dice:

    Hola, soy de Paraguay, estoy haciendo un curso para webmaster y este tutorial me sirvio muchísimo, gracias.

  10. Rusel Cierto Trinidad dice:

    crear un archivo con nombre emailForm.php y guardarlo en la ruta del formulario. Luego creas conexión a base datos, debes guardar todos los campos del <input:
    id="name"
    id="email"
    id="webstie"
    id="subject"
    id="message"
    emailForm.php

  11. Carolina dice:

    Te hago una consulta, c√≥mo hago si en lugar de “asunto” quiero validar un n√ļmero de tel√©fono? O simplemente dejar el espacio para completar el tel√©fono pero sin validaci√≥n para un n√ļmero.

  12. Aldo dice:

    Una pregunta, se puede validar como obligatorio tambi√©n el uso del combo? ya que ah√≠ no veo ning√ļn “required”. Gracias

  13. Dolores Garnica dice:

    Arriba del “Cont√°ctate con nosotros” aparece un espacio vac√≠o muy alto, ¬Ņc√≥mo lo reduzco?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder