Aprenda a crear formularios profesionales con HTML5 y CSS

En este artículo veremos cómo crear un formulario profesional por medio de CSS. En primer lugar queremos conceptualizar nuestro formulario. Para este ejemplo, vamos a crear un sencillo formulario de contacto que pide la siguiente información del usuario:


  • Nombre
  • Email
  • Sitio web
  • Mensaje

Aquí puedes ver otro Formulario con HTML5 y Ajax listo para que lo implementes en tu sitio web ASP.NET.

Queremos asegurarnos de que el usuario está introduciendo la información correctamente. Para lograr esto, vamos a utilizar HTML5. En el caso que no sepas HTML5, no te preocupes el ejemplo es muy sencillo y lo podrás comprender.

HTML

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="FormHTML5_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 y CSS Formulario de contacto</title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <form  class="contact_form" action="#" id="contact_form" runat="server">
        <div>
            <ul>
                <li>
                    <h2>Contactos</h2>
                    <span class="required_notification">* Datos requeridos</span>
                </li>
                <li>
                    <label for="name">Nombre:</label>
                    <input type="text" placeholder="John Doe" required />
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="info@developerji.com" required />
                    <span class="form_hint">Formato correcto: "name@something.com"</span>
                </li>
                <li>
                    <label for="website">Sitio web:</label>
                    <input type="url" name="website" placeholder="http://developerji.com" required pattern="(http|https)://.+" />
                    <span class="form_hint">Formato correcto: "http://developerji.com"</span>
                </li>
                <li>
                    <label for="message">Mensaje:</label>
                    <textarea name="message" cols="40" rows="6" required></textarea>
                </li>
                <li>
                    <button class="submit" type="submit">Enviar mensaje</button>
                </li>
            </ul>
        </div>
    </form>
</body>
</html>

Un poco de explicación

  • Placeholder: en el campo de texto aparece un ejemplo de lo que debe capturar el usuario. Esto ayudará al usuario a entender lo que deben capturar en cada campo.
  • <span class="form_hint"> Esta etiqueta la vamos a usar para dar consejos para los campos "Sitio Web" y "Email". Cuando el usuario capture esta información les parecerá un ejemplo de lo que deben capturar.
  • Required. Cuando se le agrega esta propiedad a un elemento de texto / textarea le dirá al navegador que se requiere un valor antes de que el formulario puede ser enviado.
  • Type. Ya todos conocemos los campos de formulario con el valor predeterminado type="text". Pero ahora queremos cambiar el atributo en nuestro sitio web para los campos de correo electrónico y sitio web a su correspondiente tipo de HTML5 que son email y url.
  • Pattern.  El atributo pattern acepta expresiones regulares javascript. Esta expresión se utiliza en lugar de la predeterminada del navegador, para validar el valor del campo.

fomulario css

CSS:

/* === Remove input autofocus webkit === */
*:focus {
    outline: none;
}

/* === Form Typography === */
body {
    font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

.contact_form h2, .contact_form label {
    font-family: Georgia, Times, "Times New Roman", serif;
}

.form_hint, .required_notification {
    font-size: 11px;
}

/* === List Styles === */
.contact_form ul {
    width: 750px;
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
}

.contact_form li {
    padding: 12px;
    border-bottom: 1px solid #eee;
    position: relative;
}

    .contact_form li:first-child, .contact_form li:last-child {
        border-bottom: 1px solid #777;
    }

/* === Form Header === */
.contact_form h2 {
    margin: 0;
    display: inline;
}

.required_notification {
    color: #d45252;
    margin: 5px 0 0 0;
    display: inline;
    float: right;
}

/* === Form Elements === */
.contact_form label {
    width: 150px;
    margin-top: 3px;
    display: inline-block;
    float: left;
    padding: 3px;
}

.contact_form input {
    height: 20px;
    width: 220px;
    padding: 5px 8px;
}

.contact_form textarea {
    padding: 8px;
    width: 300px;
}

.contact_form button {
    margin-left: 156px;
}

/* form element visual styles */
.contact_form input, .contact_form textarea {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 2px;
    padding-right: 30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

    .contact_form input:focus, .contact_form textarea:focus {
        background: #fff;
        border: 1px solid #555;
        box-shadow: 0 0 3px #aaa;
        padding-right: 70px;
    }

    /* === HTML5 validation styles === */
    .contact_form input:required, .contact_form textarea:required {
        background: #fff url(images/red_asterisk.png) no-repeat 98% center;
    }

        .contact_form input:required:valid, .contact_form textarea:required:valid {
            background: #fff url(images/valid.png) no-repeat 98% center;
            box-shadow: 0 0 5px #5cd053;
            border-color: #28921f;
        }

    .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
        background: #fff url(images/invalid.png) no-repeat 98% center;
        box-shadow: 0 0 5px #d45252;
        border-color: #b03535;
    }

/* === Form hints === */
.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left: 8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

    .form_hint::before {
        content: "\25C0";
        color: #d45252;
        position: absolute;
        top: 1px;
        left: -6px;
    }

.contact_form input:focus + .form_hint {
    display: inline;
}

.contact_form input:required:valid + .form_hint {
    background: #28921f;
}

    .contact_form input:required:valid + .form_hint::before {
        color: #28921f;
    }

/* === Button Style === */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}

    button.submit:hover {
        opacity: .85;
        cursor: pointer;
    }

    button.submit:active {
        border: 1px solid #20911e;
        box-shadow: 0 0 10px 5px #356b0b inset;
        -webkit-box-shadow: 0 0 10px 5px #356b0b inset;
        -moz-box-shadow: 0 0 10px 5px #356b0b inset;
        -ms-box-shadow: 0 0 10px 5px #356b0b inset;
        -o-box-shadow: 0 0 10px 5px #356b0b inset;
    }

Conclusión

Como puede ver, las nuevas características de formulario HTML5 son bastante buenas y claras! Todo es compatible hacia atrás para la incorporación de estas nuevas características en su sitio web no se rompe nada.

La validación HTML5 del lado del cliente es muy sencilla de implementar y ayudar a los usuarios a rellenar correctamente los formularios en línea.

Gracias por leer y espero que les sea de utilidad este ejemplo, si tienen alguna duda o comentario, escríbanme y en seguida les responderé.

Artículos relacionados
39 Comentarios
  • Rubén Comentar
    Sunday, March 23, 2014

    Tremendo, gracias a ti he descubierto que se pueden poner expresiones regulares en un formulario, y sin usar js!! Un artículo realmente bueno. Te felicito.

  • Ricardo Canteli Comentar
    Thursday, May 1, 2014

    Muy bueno el ejemplo. Sería mucho pedir el archivo en. asp para subirlo al servidor? Sin él no puedo hacer nada. Gracias

  • Juan Pelaes Comentar
    Thursday, June 19, 2014

    Muy bueno su post

  • Eduardo Comentar
    Tuesday, July 1, 2014

    Y donde va el correo al que va ser enviado??...

  • Eduardo Comentar
    Tuesday, July 1, 2014

    Disculpen mi ignorancia pero ando buscando un formulario hace una semana pero nada, y este me parece perfecto solo que nosé donde va el EMAIL a donde se enviarán los mensajes ...gracias...

    • JennerComentar
      Wednesday, March 9, 2016

      Disculpa mi ignorancia, pero como puedo hacer para que este formulario funcione, enviando correos a mi servidor. gracias

  • Estela Comentar
    Thursday, September 18, 2014

    podrías proporcionarme en .asp tu archivo por favor

  • xavi Comentar
    Wednesday, October 8, 2014

    Que IDE utilizas para poder programar? ya que las opciones de CSS me parecen muy complicadas para aprenderlas, y me gustaria poder crear formularios que estuvieran cuadrados y alienados. Gracias.

  • José I. Estrada Comentar
    Wednesday, October 8, 2014

    Utilizo el IDE de Microsoft Visual Studio.

  • Alethse Comentar
    Thursday, October 23, 2014

    con que Script envía el formulario al correo?

    • yahiriComentar
      Tuesday, March 31, 2015

      Hola amigo esto es simplemente un formulario con estilo y algunas validaciones para enviarlo al correo tienes q hacer tu las validaciones. Amigo gran aporte lo de este formulario, me encanta el diseño y esas validaciones en css estan excelentes, se podrá hacer alguna validación en css, en la clave por ejemplo: que le pida colocar mayúscula y algún símbolo ejemplo : ejfhdshM. Es que me encanta este formato, Gracias...

  • Marisela Comentar
    Monday, October 27, 2014

    Buenas tardes, estoy apenas adentrándome a la codificación en HTML5, voy a hacer una simple consulta, tengo instalado Internet Explorer 9, pero veo que en él, no se visializan los efectos del placeholder, ni tampoco el efecto que le da a los campos input, como el color rojo que indica que es un campo obligatorio, me podría explicar a qué se debe, si tengo entendido que explorer 9 ya acepta el HTML5.

    • yahiriComentar
      Tuesday, March 31, 2015

      amigo quizás es que no estas colocando las etiquetas bien, tienes que fijarte con que nombre guardaste el archivo en css y verificar bien en el formulario si estas llamando el contact_form y para llamar al css tienes q colocarlo tal cual como se visualiza en el ejemplo: "StyleSheet.css" (aquí llamaras a tu hoja de estilo css) espero q te sirva, suerte!

  • Rafael Comentar
    Wednesday, November 5, 2014

    Hola. Te cuento que hice un curso basico de HTML5 y CSS3 y todo lo que es manejo de archivos y base de datos no se vio. Sabes de algun manual, o algo que se pueda ver para crear formularios y demas cosas. Y por otro lado alguna referencia rapida de css3 para ver como se aplica cada cosa. Gracias!

  • Margarito limon de vinagre Comentar
    Wednesday, April 22, 2015

    necesito algo mas llamativo, un poco mas vistoso para mi web

    • Estrada WebGroupComentar
      Wednesday, April 22, 2015

      a ver cual es tu web para ver cuales son los colores y el tema para poder hacer el formulario adecuado

  • Mario Comentar
    Sunday, September 27, 2015

    lo hice bien, solo me perdí en la parte donde se anexa el correo para que se envíen los mensajes al destinatario gracias

  • Junior Comentar
    Thursday, November 5, 2015

    Que excelente post. Estoy haciendo un formulario basándome en tu ejemplo pero me veo con la necesidad de adjuntar un par de fotos, como sería el código y como lo enviaría?.

    • Estrada WebGroupComentar
      Thursday, November 5, 2015

      Hola Junior, primero tienes que agregar un control FileUpload a la página. Por ejemplo:

      El código de servidor seria algo como sigue:

      Using mm As New
      MailMessage("correoorigen@hotmail.com", "destino@hotmail.com")
      mm.Subject = "Titulo del Mensaje"
      mm.Body = "Cuerpo del mensaje"
      If fuAttachment.HasFile Then
      Dim FileName As String = Path.GetFileName(fuAttachment.PostedFile.FileName)
      mm.Attachments.Add(New Attachment(fuAttachment.PostedFile.InputStream, FileName)) 'aqui anexa la imagen
      End If
      mm.IsBodyHtml = False
      Dim smtp As New SmtpClient()
      smtp.Host = "smtp.gmail.com"
      smtp.EnableSsl = True
      Dim NetworkCred As New NetworkCredential("Correo del origen", "Contraseña")
      smtp.UseDefaultCredentials = True
      smtp.Credentials = NetworkCred
      smtp.Port = 587
      smtp.Send(mm)
      ClientScript.RegisterStartupScript(Me.GetType, "alert", "alert('Email sent.');", True)
      End Using

  • Henry García O Comentar
    Friday, December 11, 2015

    Muchas gracias por el aporte, muy interesante, si deseo validar los datos de tipo decimal y entero y que la salida quede formateada que se podría hacer, ejemplo $4.567.789,25.

  • Elizabeth Comentar
    Tuesday, March 8, 2016

    como puedo hacerlo con un combo agradecería tu respuesta gracias

  • Adriana Comentar
    Thursday, May 19, 2016

    Este formulario es realmente muy bueno solo tiene un detallito que te falta o no encuentro donde le pusiste para que direccion de E-mail sera enviado el mensaje ??

  • aledo Comentar
    Thursday, May 26, 2016

    sdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

  • Blackmon Comentar
    Saturday, March 10, 2018

    Great post.

  • Astley Comentar
    Sunday, March 11, 2018

    Hello, its pleasant article regarding media print, we all be familiar with media is a fantastic source of facts.

  • Gilley Comentar
    Tuesday, March 13, 2018

    Sometimes, home inspectors are early.

  • Stell Comentar
    Thursday, March 15, 2018

    Definitely imagine that that you stated. Your favourite reason seemed to be at the internet the simplest factor to understand of. I say to you, I certainly get annoyed at the same time as folks think about worries that they plainly don't realize about. You managed to hit the nail upon the top as smartly as defined out the whole thing without having side-effects , other folks can take a signal. Will probably be again to get more. Thank you

  • McNicoll Comentar
    Friday, March 16, 2018

    Hola, estoy por vez primera acá. Encontré esta tabla y la hallé realmente útil y me ayudó mucho. Espero dar algo a cambio y asistir a otros como tú a asistirme. ¡Volveré, puesto que he marcado esta página como preferida y lo he twitteado a mis seguidores!

  • Bussey Comentar
    Sunday, March 18, 2018

    Estoy muy agradecido con el propietario de este sitio que ha compartido este genial artículo aquí. ¡Volveré, ya que he marcado esta página como preferida y lo he twitteado a mis seguidores!

  • Waterman Comentar
    Sunday, March 18, 2018

    Buena información. Afortunadamente, hallé su sitio por accidente (stumbleupon). ¡Lo he marcado para después! ¡Volveré, ya que he marcado esta página como favorita y lo he twitteado a mis seguidores!

  • Afford Comentar
    Thursday, March 22, 2018

    certainly like your web site but you need to test the spelling on quite a few of your posts. A number of them are rife with spelling problems and I to find it very bothersome to tell the truth nevertheless I will certainly come again again.

  • Kinder Comentar
    Friday, March 23, 2018

    Thanks for some other wonderful post. Where else may just anybody get that type of info in such an ideal means of writing? I've a presentation next week, and I am at the look for such information.

  • Allsop Comentar
    Sunday, March 25, 2018

    Post writing is also a excitement, if you be acquainted with then you can write otherwise it is difficult to write.

  • Donnelly Comentar
    Sunday, March 25, 2018

    Esta publicación no tiene costo. ¿Dónde puedo hallar más? ¡Volveré, en tanto que he marcado esta página como favorita y lo he twitteado a mis seguidores!

  • Paz Comentar
    Wednesday, March 28, 2018

    Hacer preguntas es verdaderamente bueno si no estás entendiendo nada completamente, pero este artículo proporciona una buena comprensión aun. ¡Volveré, en tanto que he marcado esta página como preferida y lo he twitteado a mis seguidores!

  • Scholz Comentar
    Wednesday, March 28, 2018

    H?! This ?s k?nd of ?ff topic but I need some advic from ?n established blog. Is it ?ery hard to set up your ?wn blog? ?'m not very techincal ?ut I can figure things ?ut pretty fast. I'm thinking a??ut settin u? my ownn but ?'m not ?ure where to begin. D? you hav? any ideas or suggestions? ?hanks

  • Alison Comentar
    Monday, April 9, 2018

    Right now it looks like Wordpress is the preferred blogging platform available right now. (from what I've read) Is that what you are using on your blog?

  • Howey Comentar
    Tuesday, April 10, 2018

    fantastic submit, very informative. I ponder why the other experts of this sector do not notice this. You should proceed your writing. I am confident, you have a great readers' base already!

  • Bartholomew Comentar
    Monday, April 16, 2018

    Remarkable! Its in fact remarkable post, I have got much clear idea about from this piece of writing.

  • Cronin Comentar
    Tuesday, May 1, 2018

    Só desejam ?izer que ?eu artigo é ?omo surpreendente . ? clareza em seu post é simplesmente grande ? eu poderia assumir é? especialista ?obre este assunto. Bem com sua permissão deixe me agarrar ?e? alimentar para manter atualizado ?om o próximo post. Obrigado 1 milhã? e por favor continue o agradável t?abalho.

  • Pender Comentar
    Wednesday, May 2, 2018

    Very great post. I just stumbled upon your blog and wanted to mention that I've truly loved browsing your blog posts. In any case I will be subscribing to your rss feed and I am hoping you write again soon!

  • Fay Comentar
    Friday, May 4, 2018

    It's an remarkable paragraph in favor of all the online people; they will obtain benefit from it I am sure.

  • Eve Comentar
    Saturday, May 5, 2018

    Great site you have got here.. It's difficult to find good quality writing like yours nowadays. I really appreciate people like you! Take care!!

  • Hudspeth Comentar
    Monday, May 7, 2018

    Hi colleagues, how is everything, and what you desire to say regarding this paragraph, in my view its actually remarkable in support of me.

Enviame un comentario