Anmelden oder Registrieren Formularentwurf von Grund auf (Tag 2)

Nachdem wir unseren Formularentwurf in Photoshop abgeschlossen haben, richten wir uns nun auf die Grundlagen des Prozesses. Lassen Sie uns die PSD aufschneiden, ein paar Markups aussuchen, die gesamte Partie gestalten, jQuery-Schnörkel hinzufügen und mit einer Inline-Formular-Validierung abschließen.

Es gibt viel zu tun, also fangen wir an!


Abschnitt 4: Das HTML-Markup

Lassen Sie uns unsere Formulare fortsetzen, indem Sie das HTML-Markup basierend auf unserem Design festlegen.


Abschnitt 5: Aufteilen der PSD

Es ist jetzt an der Zeit, unsere Aufmerksamkeit wieder auf die PSD zu lenken. Wir werden die visuellen Elemente aufschneiden, die wir brauchen, und dann mit dem CSS-Styling beginnen.


Abschnitt 6: Anmeldeformular gestalten

Nachdem wir unsere grundlegende Tab-Struktur gestaltet haben, sehen wir uns das Anmeldeformular an.


Abschnitt 7: Gestalten des Anmeldeformulars

Wir werden jetzt unser Anmeldeformular auf ähnliche Weise behandeln. Fügen wir dem Tab-Layout auch etwas jQuery-Magie hinzu.


Abschnitt 8: Inline-Validierung

Nachdem wir die Erstellung unserer Formulare abgeschlossen haben, konzentrieren wir uns jetzt auf die Funktionalität. Wir werden einige schnelle Inline-Validierungen anwenden und die letzten Feinheiten aufpolieren.


Weiterführende Literatur und nützliche Hinweise

  • Smashing Magazine Web-Formularentwurfsmuster
  • Webdesigntuts + Einführung in die Farbtheorie für Webdesigner
  • Sechs Revisionen Ein Blick auf die Farbtheorie im Webdesign
  • dezinerfolio.com30 kostenlose Vektor-Icons
  • Nettuts + Erstellen Sie ein gepflegtes HTML5-Kontaktformular
  • Tauchen Sie ein in HTML5 Eine Form des Wahnsinns
  • Eine Liste der Vorwärtsdenken-Formularvalidierung
  • Nettuts + 8 reguläre Ausdrücke, die Sie kennen sollten
  • HTML5-Eingabemuster
  • CSS-Tricks zwingen das Element, sich selbst zu löschen
  • Builder für Code Style Font Stack
  • FamFamFam Silk Icons