Aprende cómo hacer un formulario con Validaciones
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:

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:
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:
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:
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:
Ahora nuestra forma tiene una mejor apariencia, se ve así:

Agregamos ahora el código CSS para formatear los campos:
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:
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