Connectez-vous ou inscrivez-vous Création de formulaire à partir de zéro (Jour 2)

Après avoir terminé la conception de nos formulaires dans Photoshop, nous allons maintenant nous concentrer sur les rouages ​​du processus. Découpons le PSD, mettons de l'ordre dans le balisage, modélisons le tout, ajoutons quelques éléments jQuery, puis complétons par une validation en ligne.

Il y a beaucoup à faire, alors commençons!


Section 4: Le balisage HTML

Continuons nos formulaires en mettant en place le balisage HTML basé sur notre conception.


Section 5: Découper le PSD

Il est maintenant temps de tourner à nouveau notre attention vers le PSD. Nous allons découper les éléments visuels dont nous avons besoin, puis commencer à styliser dans le CSS.


Section 6: Style du formulaire de connexion

Après avoir stylé notre structure de base d'onglets, regardons maintenant le formulaire d'inscription.


Section 7: Styliser le formulaire d'inscription

Nous allons maintenant traiter notre formulaire d'inscription de la même manière. Ajoutons également un peu de magie jQuery à la disposition des onglets.


Section 8: Validation en ligne

Après avoir complété la construction de nos formulaires, concentrons-nous maintenant sur la fonctionnalité. Nous allons appliquer une validation en ligne astucieuse, et peaufiner les touches finales.


Lectures complémentaires et références utiles

  • Modèles de conception de formulaires Web Smashing Magazine
  • Webdesigntuts + Introduction à la théorie des couleurs pour les concepteurs Web
  • Six révisions Aperçu de la théorie des couleurs dans la conception Web
  • dezinerfolio.com30 Icônes vectorielles gratuites
  • Nettuts + Construire un formulaire de contact HTML5 Powered soigné
  • Plongez dans HTML5 une forme de folie
  • Validation du formulaire de réflexion avant-gardiste
  • Nettuts + 8 expressions régulières à connaître
  • Modèles d'entrée HTML5
  • Astuces CSS forcent un élément à nettoyer ses enfants
  • Code Style Constructeur de la pile de polices
  • Icônes FamFamFam Soie