Inloggen of registreren formulierontwerp van kras (dag 2)

Nadat we ons formulierontwerp in Photoshop hebben voltooid, gaan we nu onze aandacht richten op de moeren en bouten van het proces. Laten we de PSD opsplitsen, een beetje opmaken, de hele boel stylen, wat jQuery-opbloei toevoegen en dan afsluiten met een aantal inline-formuliervalidatie.

Er is veel te doen, dus laten we beginnen!


Deel 4: De HTML-markering

Laten we doorgaan met onze formulieren door de HTML-markering op te stellen op basis van ons ontwerp.


Deel 5: De PSD opdelen

Het is nu tijd om onze aandacht weer op de PSD te richten. We gaan de visuele elementen die we nodig hebben, versnipperen en beginnen met het vormgeven in de CSS.


Deel 6: Het aanmeldingsformulier stylen

Nadat we onze basistabbladstructuur gestileerd hebben, laten we nu kijken naar het aanmeldingsformulier.


Deel 7: Het aanmeldingsformulier stylen

We gaan nu onze aanmeldingsformulier op een vergelijkbare manier behandelen. Laten we ook wat jQuery-magie aan de tablay-out toevoegen.


Deel 8: Inline-validatie

Na het bouwen van onze formulieren, concentreren we ons nu op de functionaliteit. We gaan een handige inline-validatie toepassen en de laatste hand leggen.


Verder lezen en nuttige verwijzingen

  • Smashing Magazine Web-vorm ontwerppatronen
  • Webdesigntuts + Een inleiding tot de kleurentheorie voor webontwerpers
  • Six Revisions A Look into Colour Theory in Web Design
  • dezinerfolio.com30 Gratis Vector Icons
  • Nettuts + Bouw een net HTML5 Powered Contact Form
  • Duik in HTML5 Een vorm van waanzin
  • Een lijst naast Forward Thinking Form Validation
  • Nettuts + 8 reguliere expressies die u moet weten
  • HTML5-invoerpatronen
  • CSS-trucs Force-element om zijn kinderen zelfvertrouwen te geven
  • Code Style Font stack builder
  • FamFamFam Zijde pictogrammen