Logg inn eller registrer deg Form design fra bunnen av (Dag 2)

Etter å ha fullført vårt skjemautforming i Photoshop, skal vi nå vise oppmerksomheten til mutter og bolter i prosessen. La oss skille opp PSD, sortere ut noen markering, stil mye, legge til noe jQuery blomstrer, og avslutt deretter med noen inline form validering.

Det er mye å gjøre, så la oss komme i gang!


Seksjon 4: HTML-merkingen

La oss fortsette våre skjemaer ved å legge ut HTML-oppslaget basert på vårt design.


Seksjon 5: Slicing opp PSD

Nå er det på tide å gjøre oppmerksomheten til PSD igjen. Vi skal skille opp de visuelle elementene vi trenger, og deretter begynne en styling i CSS.


Seksjon 6: Stil inn påmeldingsskjemaet

Etter å ha stylet vår grunnleggende fanestruktur, la oss se på tegnet i skjemaet.


Seksjon 7: Styling på registreringsskjemaet

Vi skal nå behandle registreringsskjemaet på samme måte. La oss også legge til noen jQuery-magi i tabulayoutet.


Seksjon 8: Inline validering

Etter å ha fullført bygningen av våre skjemaer, la oss nå konsentrere oss om funksjonaliteten. Vi kommer til å bruke noen nifty inline validering, og polere opp de siste detaljene.


Videre lesing og nyttige referanser

  • Smashing Magazine Web skjema design mønstre
  • Webdesigntuts + En introduksjon til fargeteorien for webdesignere
  • Seks revisjoner En titt på fargeteorien i webdesign
  • dezinerfolio.com30 Gratis Vector Ikoner
  • Nettutsats + Bygg et pent HTML5-drevet kontaktskjema
  • Dykk inn i HTML5 En form for galskap
  • En liste Apart Forward Thinking Form Validation
  • Nettuts + 8 Vanlige uttrykk du bør vite
  • HTML5 Input Patterns
  • CSS Tricks Force Element å selvklare sine barn
  • Kode Stil Font Stack Builder
  • FamFamFam Silk Icons