Iniciar sesión o registrarse diseño de formulario desde cero (día 2)

Una vez completado nuestro diseño de formulario en Photoshop, ahora vamos a centrar nuestra atención en los aspectos básicos del proceso. Cortemos el PSD, ordenemos un poco de marcado, diseñemos todo el lote, agreguemos un poco de jQuery flourishes, luego terminemos con alguna validación de formulario en línea.

Hay mucho que hacer, así que empecemos!


Sección 4: El marcado HTML

Continuemos con nuestros formularios mediante el marcado HTML basado en nuestro diseño..


Sección 5: Cortando el PSD

Ahora es el momento de volver a centrar nuestra atención en el PSD. Vamos a dividir los elementos visuales que necesitamos, luego comenzaremos algunos estilos en el CSS..


Sección 6: Diseño del formulario de inicio de sesión

Habiendo diseñado nuestra estructura básica de pestañas, ahora veamos el formulario de inicio de sesión.


Sección 7: Diseño del formulario de registro

Ahora vamos a tratar nuestro formulario de registro de una manera similar. También agreguemos algo de magia jQuery al diseño de la pestaña.


Sección 8: Validación en línea

Habiendo completado la compilación de nuestros formularios, ahora concentrémonos en la funcionalidad. Vamos a aplicar una ingeniosa validación en línea y pulir los toques finales..


Lecturas adicionales y referencias útiles

  • Revista aplastante patrones de diseño de formularios web
  • Webdesigntuts + Una introducción a la teoría del color para diseñadores web
  • Seis revisiones una mirada a la teoría del color en el diseño web
  • dezinerfolio.com30 Iconos vectoriales gratis
  • Nettuts + Crear un formulario de contacto potente HTML5
  • Sumérgete en HTML5 una forma de locura
  • Una validación de la forma de pensar hacia adelante aparte
  • Nettuts + 8 expresiones regulares que debes saber
  • Patrones de entrada HTML5
  • Los trucos de CSS obligan al elemento a aclarar a sus hijos
  • Generador de pila de fuentes de estilo de código
  • FamFamFam iconos de seda