Logga in eller Registrera Form design från början (dag 2)

Efter att ha slutfört vår formkonstruktion i Photoshop, ska vi nu uppmärksamma processens muttrar och bultar. Låt oss skära upp PSD, sortera ut någon markering, stila hela partiet, lägga till några jQuery blomstrar, avsluta sedan med någon inline form validering.

Det finns mycket att göra, så låt oss börja!


Avsnitt 4: HTML-markeringen

Låt oss fortsätta våra formulär genom att lägga ut HTML-markeringen baserat på vår design.


Avsnitt 5: Skärning av PSD

Nu är det dags att göra vår uppmärksamhet till PSD igen. Vi ska skära upp de visuella elementen vi behöver, börja sedan en styling i CSS.


Avsnitt 6: Styling inloggningsformuläret

Vi har stylat vår grundläggande flikstruktur, låt oss nu titta på inloggningsformuläret.


Avsnitt 7: Stil in registreringsformuläret

Vi ska nu behandla vår anmälningsblankett på ett liknande sätt. Låt oss också lägga till några jQuery-magiker i fliklayouten.


Avsnitt 8: Inline validering

Låt oss nu koncentrera oss på funktionaliteten efter att ha slutfört byggandet av våra formulär. Vi kommer att tillämpa några smutsiga inline validering, och polera upp de sista detaljerna.


Ytterligare läsning och användbara referenser

  • Smashing Magazine Webbdesignmönster
  • Webdesigntuts + En introduktion till färgteori för webbdesigners
  • Sex revisioner En titt på färgteori i webbdesign
  • dezinerfolio.com30 Gratis Vector ikoner
  • Netuts + Bygg en snygg HTML5-driven kontaktformulär
  • Dyk till HTML5 En form av galskap
  • En lista Apart Forward Thinking Form Validation
  • Nettuts + 8 Vanliga uttryck du borde veta
  • HTML5-ingångsmönster
  • CSS Tricks Force Element Att självklara sina barn
  • Kod stil Font stack byggare
  • FamFamFam Silk Icons