Utiliser un CMSUn site internet est comme une vitrine que ce soit pour une entreprise, un commerce local ou les compétences d'une personne. Vous pouvez être un designer remarquable, mais sans un site digne de ce nom, vous passerez totalement inaperçu. Mais il ne suffit pas d'avoir un site, mais il faut également communiquer avec les visiteurs. Si vous avez des milliers de visiteurs, mais qu'ils ne peuvent pas vous contacter alors le site est inutile. Le formulaire HTML permet d'avoir cette communication. Il ressemble aux formulaires en papier que nous voyons tous les jours, à savoir, une page avec des champs vides qu'on doit remplir. Le HTML et le CSS permettent de créer des formulaires d'une esthétique irréprochable.
Un formulaire peut être composé de plusieurs dizaines d'éléments selon la complexité que vous recherchez. Mais tous les éléments doivent être à l'intérieur de la balise FORM. Il existe plusieurs attributs d'un formulaire, mais le plus important est METHOD qui peut être POST ou GET. Cela permet de déterminer si le formulaire doit envoyer ou recevoir des données. Dans 90 % des cas, on utilisera la méthode POST parce qu'on veut recevoir des données de la part du visiteur. Ensuite, on a l'attribut ACTION qui détermine le type de traitement des données. À une époque, on utilisait le langage CGI, mais ce dernier implique une connaissance du langage Perl. De nos jours, les données peuvent être traitées avec le PHP qui est plus facile. Voici une structure basique d'un formulaire HTML :
Cet exemple est un formulaire pour inciter le visiteur à s'inscrire à la newsletter du site. Premièrement, nous avons la balise FORM qui commence le formulaire, ensuite, on définit une méthode POST qui utilise un script CGI pour traiter les données. On vous fournit un champ de texte pour que le visiteur fournisse son adresse mail et enfin, on termine par le bouton d'envoi. Même si le CGI devient progressivement obsolète, de nombreux webmestres continuent de l'utiliser. Les champs d'un formulaire HTML peuvent être propres à certaines valeurs. Par exemple, le type mail implique que le visiteur devra fournir une adresse avec le symbole d'arobase (@). Le type password va juste afficher des points ou des astérisques pour une meilleure sécurité. Chaque champ de formulaire peut avoir une largeur prédéfinie avec l'attribut maxlenght. Ainsi, le code ci-dessous :
Dans cet exemple, nous demandons le mot de passe à l'utilisateur et nous définissons la largeur maximale à 20 caractères.
Tous les exemples que nous avons vus concernent le HTML 4, mais le HTML 5 a apporté une avancée majeure pour créer des formulaires. Dans le HTML 4, il est nécessaire d'englober les éléments du formulaire dans la balise FORM pour que cela fonctionne. Mais ce n'est plus nécessaire avec le HTML 5, car on peut positionner les éléments n'importe où et il suffit de les connecter par l'ID du formulaire. Cela offre de nombreuses possibilités pour améliorer l'interactivité du site tout en réduisant l'espace nécessaire pour le formulaire.
Même si le formulaire est un composant indispensable d'une création de site internet, il est nécessaire de le personnaliser avec un style CSS. Tous les éléments du formulaire peuvent être personnalisés. De ce fait, on peut créer un formulaire qui s'intégrera parfaitement dans le site sans perturber le design. En conclusion, le formulaire est un moyen facile de communiquer avec le lecteur, mais il ne faut pas en abuser. Dans certains cas, un simple formulaire de contact est suffisant pour la plupart des sites. Il existe également des services qui peuvent générer le code pour des formulaires. C'est notamment le cas si vous utilisez des CMS, mais c'est toujours une bonne pratique de comprendre le code afin de les modifier si c'est nécessaire.
Les bases du formulaire HTML
Un formulaire peut être composé de plusieurs dizaines d'éléments selon la complexité que vous recherchez. Mais tous les éléments doivent être à l'intérieur de la balise FORM. Il existe plusieurs attributs d'un formulaire, mais le plus important est METHOD qui peut être POST ou GET. Cela permet de déterminer si le formulaire doit envoyer ou recevoir des données. Dans 90 % des cas, on utilisera la méthode POST parce qu'on veut recevoir des données de la part du visiteur. Ensuite, on a l'attribut ACTION qui détermine le type de traitement des données. À une époque, on utilisait le langage CGI, mais ce dernier implique une connaissance du langage Perl. De nos jours, les données peuvent être traitées avec le PHP qui est plus facile. Voici une structure basique d'un formulaire HTML :
Cet exemple est un formulaire pour inciter le visiteur à s'inscrire à la newsletter du site. Premièrement, nous avons la balise FORM qui commence le formulaire, ensuite, on définit une méthode POST qui utilise un script CGI pour traiter les données. On vous fournit un champ de texte pour que le visiteur fournisse son adresse mail et enfin, on termine par le bouton d'envoi. Même si le CGI devient progressivement obsolète, de nombreux webmestres continuent de l'utiliser. Les champs d'un formulaire HTML peuvent être propres à certaines valeurs. Par exemple, le type mail implique que le visiteur devra fournir une adresse avec le symbole d'arobase (@). Le type password va juste afficher des points ou des astérisques pour une meilleure sécurité. Chaque champ de formulaire peut avoir une largeur prédéfinie avec l'attribut maxlenght. Ainsi, le code ci-dessous :
Dans cet exemple, nous demandons le mot de passe à l'utilisateur et nous définissons la largeur maximale à 20 caractères.
L'évolution du formulaire avec le HTML 5
Tous les exemples que nous avons vus concernent le HTML 4, mais le HTML 5 a apporté une avancée majeure pour créer des formulaires. Dans le HTML 4, il est nécessaire d'englober les éléments du formulaire dans la balise FORM pour que cela fonctionne. Mais ce n'est plus nécessaire avec le HTML 5, car on peut positionner les éléments n'importe où et il suffit de les connecter par l'ID du formulaire. Cela offre de nombreuses possibilités pour améliorer l'interactivité du site tout en réduisant l'espace nécessaire pour le formulaire.
Même si le formulaire est un composant indispensable d'une création de site internet, il est nécessaire de le personnaliser avec un style CSS. Tous les éléments du formulaire peuvent être personnalisés. De ce fait, on peut créer un formulaire qui s'intégrera parfaitement dans le site sans perturber le design. En conclusion, le formulaire est un moyen facile de communiquer avec le lecteur, mais il ne faut pas en abuser. Dans certains cas, un simple formulaire de contact est suffisant pour la plupart des sites. Il existe également des services qui peuvent générer le code pour des formulaires. C'est notamment le cas si vous utilisez des CMS, mais c'est toujours une bonne pratique de comprendre le code afin de les modifier si c'est nécessaire.