You are here
Noticias 

Aprende cómo hacer un formulario con Validaciones

BlogUneWeb

En este tutorial crearemos un formulario con validaciones en varios de los campos y estilo usando HTML5 y CSS3. Si bien el formulario no será funcional, ya estará listo para aplicarle código serverside y manipular sus datos. Lo primero que haremos es crear el HTML básico de nuestra página. Crearemos la forma y le agregaremos varios fieldsets. Este es el código:

<!doctype html>
<html>
    <head>
        <title>Formulario HTML5 y CSS3</title>
    </head>
    <body>
        <form id="orderForm" action="" method="get">
            <h3>Formulario de Compra</h3>
            <fieldset>
                <legend>Orden</legend>
                <ul>
                </ul>
            </fieldset>
            <fieldset>
                <legend>Datos de Contacto</legend>
                <ul>
                </ul>
            </fieldset>
            <fieldset>
                <legend>Datos de pago</legend>
                <ul>
                </ul>
            </fieldset>
            <input type="submit" name="ordenar" value="Ordena ahora" />
        </form>
    </body>
</html>
A continuación agregamos el código para crear los campos que deseamos en nuestra forma (ver ejemplo). El resultado ahora es el siguiente:
Para crear esta forma si usamos varias funcionalidades nuevas en HTML5. En primer lugar nuestro input para el campo cantidad es de tipo number, eso significa que sólo aceptará números en su contenido. Este tipo de campo aún no funciona en todos los navegadores, por los momentos Safari, IE y Chrome si lo soportan, pero Firefox no. El código para crear el campo es este:
<input type="number" name="cantidad" id="cantidad" placeholder="Cantidad" required="required" min="1" max="10" maxlength="2" autofocus="autofocus" />
Aquí además del tipo usamos varios atributos nuevos en HTML5, placeholder indica el texto que los navegadores muestran en el campo cuando el usuario no ha escrito nada, requiredindica al navegador si el campo es requerido o no, min y max indican al navegador el valor mínimo y máximo que aceptará el campo.
Los tipos de input email y url también son nuevos. Indican al navegador que el valor del campo debe ser una dirección de email y un url válidos sintacticamente.
 El otro atributo nuevo en HTML5 es uno que usamos al crear el input del número de tarjeta:
<input type="text" name="tarjeta" id="tarjeta" placeholder="No. Tarjeta" required="required" maxlength="30" pattern="[d ]{12,}" />
El atributo pattern indica al navegador el formato que debe tener el valor del campo, en este caso los 12 dígitos que componen un número de tarjeta de crédito.
 En el caso del último campo, la fecha de vencimiento, podríamos usar otro tipo de input nuevo:month, que muestra un calendario en el que se puede seleccionar un mes/año, sin embargo este tipo de input aún no es soportado por la mayoría de navegadores, por lo que nos quedamos con un input tipo text con un pattern definido.
 Nuestra página ahora implementa varias validaciones que antes debíamos hacer vía javascript:
Lo siguiente que hacemos es comenzar a agregar el CSS, primero damos formato a la forma en sí, con este código:
body {
  margin: 30px;
  font: 14px Tahoma, sans-serif
}

form {
  width: 35em;
  margin: 0 auto;
  padding: 50px 60px;
  overflow: auto;
  color: #3e4a49;
  background-color: #FBE080;
  border-radius: 10px;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#FBE080), color-stop(1, #C0C0C0) );
  background: -moz-linear-gradient( center bottom, #FBE080 0%, #C0C0C0 100% );  
}
De nuevo, recurrimos a atributos propios del navegador para dar el efecto de gradiente al fondo de la forma.
 El resultado, hasta ahora, es el siguiente:
Aquí incluimos atributos propios de CSS3 que ya hemos usado antes, como el border-radius y el box-shadow.
 Lo siguiente que haremos es dar formato al resto de la forma, especialmente a los campos dentro de ella. Lo hacemos con este código:
form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

form ul li {
  margin: .9em 0 0 0;
  padding: 0;
}

form * {
  line-height: 1em;
}

form h3 {
  margin: 0 0 1.5em 0;
  padding: 0;
  text-align: center;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px;
  border: 2px solid #593131;
  background: #FAFF9E;
  border-radius: 10px;
  
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#C0C0C0), color-stop(1, #FBE080) );
  background: -moz-linear-gradient( center bottom, #C0C0C0 0%, #FBE080 100% );  
}

legend {
  color: #000;
  background: #FFE98C;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  margin: 0;
  width: 9em;
  border: 2px solid #593131;
  border-radius: 50% 35%;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
Ahora nuestra forma tiene una mejor apariencia, se ve así:
Agregamos ahora el código CSS para formatear los campos:
input, select, textarea {
  display: block;
  margin: 0;
  padding: .4em;
  width: 50%;
}
input, textarea, .date {
  border: 2px solid #eae1c0;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,.5) 1px 1px 1px 1px inset;
  background: #fff;
}
input {
  font-size: .9em;
}
select {
  padding: 0;
  margin-bottom: 2.5em;
  position: relative;
  top: .7em;
}
textarea {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: .9em;
  height: 5em;
}
form *:focus {
  border: 2px solid #593131;
  outline: none;
  box-shadow: none;
}
input:valid, textarea:valid {
  background: #efe;
}
Ya tenemos nuestra forma casi lista, todo lo utilizado aquí es CSS con el que ya hemos trabajado antes. El resultado es este:
El último paso para crear nuestra forma es dar formato al botón de ordenar. Lo hacemos con este código CSS:
input[type="submit"] {
  margin: 50px auto 0 auto;
  width: 12em;
  padding: 10px;
  border: 2px solid #593131;
  border-radius: 10px;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #593131;
  font-size: 1.2em;
  font-weight: bold;
}

input[type="submit"]:hover, input[type="submit"]:active {
  cursor: pointer;
  background: #fff;
  color: #593131;
}

input[type="submit"]:active {
  background: #eee;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}
Aquí simplemente damos un poco de estilo al botón y damos formato a lo que sucede cuando el usuario pone el cursor sobre él. El resultado final es este:
Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts