Aprenda a crear formularios profesionales con HTML5 y CSS 2108

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é.

Compartir

Comentarios (25)

  • Rubén Responder

    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.

    Sunday, March 23, 2014 6:37 AM
    • Derly Responder

      Hola, me gusto mucho el formulario, pero como estamos con todo el responsive me propuse a realizar los arreglos que estime pertinentes. Les comparto el ccs modificado. Saludos y buen aporte!. CSS: *: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: 0.9em; } /* === List Styles === */ .contact_form{ width: 60%; margin: 0 auto; text-align: center; /*padding: 12px; border-bottom: 1px solid #eee;*/ } /* === Form Header === */ .contact_form h2 { margin: 0; display: block; } .required_notification { color: #d45252; text-align: left; display: block; } /* === Form Elements === */ .contact_form label { width: 40%; margin-top: 3px; display: block; padding: 3px; text-align: left; } .contact_form input { height: 2em; width: 90%; padding: 5px 8px; display: block; } .contact_form textarea { padding: 8px; width: 90%; display: block; } .contact_form button { width: 10em; display: inline-block; text-align: center; margin-top:5%; } /* 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-top: 5px; } /* === 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 { margin-top: 4px; 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; } @media (max-width: 1000px){ .contact_form{ width: 80%; text-align: center; } .contact_form input { height: 2em; width: 80%; } .contact_form textarea { width: 80%; } }

      10/25/2016 2:56:49 PM
  • Ricardo Canteli Responder

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

    Thursday, May 1, 2014 10:23 PM
  • Juan Pelaes Responder

    Muy bueno su post

    Thursday, June 19, 2014 6:25 PM
  • Eduardo Responder

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

    Tuesday, July 1, 2014 1:41 PM
  • Eduardo Responder

    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...

    Tuesday, July 1, 2014 1:47 PM
    • Jenner Responder

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

      3/9/2016 1:42:31 PM
  • Estela Responder

    podrías proporcionarme en .asp tu archivo por favor

    Thursday, September 18, 2014 6:54 AM
  • xavi Responder

    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.

    Wednesday, October 8, 2014 1:15 AM
  • José I. Estrada Responder

    Utilizo el IDE de Microsoft Visual Studio.

    Wednesday, October 8, 2014 5:40 AM
  • Alethse Responder

    con que Script envía el formulario al correo?

    Thursday, October 23, 2014 11:31 AM
    • yahiri Responder

      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...

      3/31/2015 8:29:38 AM
  • Marisela Responder

    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.

    Monday, October 27, 2014 12:26 PM
    • yahiri Responder

      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!

      3/31/2015 8:34:39 AM
  • Rafael Responder

    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!

    Wednesday, November 5, 2014 4:50 AM
  • Margarito limon de vinagre Responder

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

    Wednesday, April 22, 2015 11:24 AM
    • Estrada WebGroup Responder

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

      4/22/2015 2:01:52 PM
  • Mario Responder

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

    Sunday, September 27, 2015 9:10 PM
  • Junior Responder

    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?.

    Thursday, November 5, 2015 6:26 AM
    • Estrada WebGroup Responder

      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

      11/5/2015 7:29:02 AM
  • Henry García O Responder

    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.

    Friday, December 11, 2015 11:44 AM
  • Elizabeth Responder

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

    Tuesday, March 8, 2016 5:27 PM
  • Adriana Responder

    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 ??

    Thursday, May 19, 2016 2:49 PM
  • aledo Responder

    sdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    Thursday, May 26, 2016 11:29 AM
  • Carlos Responder

    me gustaria saber si se puede complemetar con js o entender mejor la validación con css..

    Sunday, September 4, 2016 8:17 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com