Formulaires web — Travailler avec les données saisies

Avant de démarrer ce module, vous devriez avoir lu Introduction à HTML. Cela vous permettra de comprendre les guides introductifs sans peine et d'utiliser le guide sur les contrôles natifs de base des formulaires.

Pour maîtriser les formulaires, connaître le HTML ne sera pas suffisant. Il faudra aussi apprendre certaines techniques spécifiques pour mettre en forme les contrôles de formulaire et savoir manipuler les scripts pour gérer la validation et la création de contrôles spécifiques. Toutefois, avant d'attaquer les autres sections listées ci-après, nous vous conseillons de commencer par apprendre quelques notions de CSS et de JavaScript au préalable.

Le paragraphe précédent permet de comprendre pourquoi nous avons créé un module à part entière pour les formulaires (plutôt que de distiller le contenu sur les formulaires dans les sections sur HTML, CSS, et JavaScript). En effet, les éléments relatifs aux formulaires sont plus complexes que les autres éléments HTML et nécessite de travailler de concert avec des techniques basées sur CSS et ou JavaScript pour en tirer le meilleur parti.

Votre premier formulaire

Le premier article de cette série vous guidera pour créer votre premier formulaire web. Il aborde les étapes de conception, l'implémentation à l'aide des éléments HTML pertinents, l'ajout d'une mise en forme simple avec CSS et la façon dont les données sont envoyées au serveur.

Comment structurer un formulaire web

Maintenant que les bases ont été abordées, voyons avec un peu plus de détails les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

Les contrôles natifs de base des formulaires

Pour le début de section, nous verrons les différentes fonctionnalités offertes nativement avec les différents types de l'élément HTML <input> et les options disponibles pour collecter différents types de données.

Les types de champs HTML5

Nous continuons l'approfondissement sur l'élément <input>, en voyant notamment les types rajoutés avec HTML5 et les améliorations qu'ils apportent. Dans cet article, nous verrons également l'élément <output>.

Les autres contrôles de formulaire

Ensuite, nous aborderons les contrôles de formulaire qui ne sont pas des éléments <input>, ainsi que les outils associés, comme : <select>, <textarea>, <meter>, et <progress>.

Mise en forme des formulaires web

Cet article est une introduction à la mise en forme des formulaires à l'aide de CSS, couvrant l'ensemble des bases nécessaires à une mise en forme simple.

Mise en forme avancée des formulaires

Ici, nous verrons certaines techniques plus avancées qui s'avèrent nécessaires lorsqu'on travaille avec certains éléments de formulaire plus difficiles à mettre en forme.

Les pseudo-classes relatives à l'interface utilisateur

Cet article introduit les pseudo-classes relatives à l'interface utilisateur et qui permettent de cibler des contrôles de formulaire HTML en fonction de leur état courant.

Validation des données du formulaire côté client

Envoyer les données est une chose, mais il ne faut pas oublier de vérifier que les données saisies dans les formulaires utilisent un format correct afin qu'elles puissent être traitées correctement et que cela ne casse pas nos applications. Nous voulons aussi aider les utilisatrices et utilisateurs à remplir correctement nos formulaires et leur éviter toute frustration lorsqu'ils utilisent nos applications. La validation des données du formulaire nous aide à parvenir à ces objectifs et cet article explique ce qu'il faut savoir à ce sujet.

Envoyer les données du formulaire

Dans cet article, nous détaillons ce qui se passe lorsqu'on envoie un formulaire : où vont les données, comment les traiter à leur arrivée, etc. Nous verrons également les problématiques de sécurité associées à l'envoi de données de formulaire.

Les articles suivants ne sont pas nécessaires à l'apprentissage initial, mais deviennent intéressants et utiles lorsque vous avez maîtrisé les techniques précédentes et que vous souhaitez approfondir.

Comment construire des contrôles de formulaire spécifiques

Dans certains cas, les contrôles natifs des formulaires pourront ne pas répondre à votre besoin (que ce soit à cause de la mise en forme ou des fonctionnalités). Pour ces cas, vous aurez peut-être à construire votre propre contrôle à l'aide de HTML. Dans cet article, nous verrons comment faire et les considérations à avoir, tout en mettant en œuvre un cas pratique.

Envoyer des formulaires avec JavaScript

Dans cet article, nous verrons comment utiliser un formulaire pour créer une requête HTTP et l'envoyer avec du code JavaScript (plutôt que d'utiliser l'envoi standard natif). Nous verrons pourquoi cela peut être pertinent et les implications associées (voir aussi Utiliser les objets FormData).

Tableau de compatibilité des propriétés CSS pour les contrôles de formulaire

Ce dernier article fournit une référence pratique qui permet de connaître la compatibilité entre les propriétés CSS et les différents éléments de formulaire.

• Référence des éléments HTML relatifs aux formulaires
• Référence des différents types d'élément <input>
• Référence des attributs HTML