Apprendre la programmation HTML et CSS #12 Formulaires HTML

html-css-12
Comment faire formulaires HTML CSS ? Nous allons apprendre à faire un formulaire HTML et à utiliser des templates pour éviter le PHP

Salut, aujourd’hui, on va apprendre à créer des formulaires HTML. Dans cette 12e partie d’apprendre HTML et le CSS, nous allons aujourd’hui apprendre à créer des formulaires HTML simple.

Grâce à ceci, vous allez être capable de créer des formulaires de contact en HTML, de créer des formulaires d’inscription ou même des formulaires infolettre.

Le seul point qui va falloir retenir avant de commencer, c’est que pour créer des formulaires, le HTML propose déjà des champs permettant d’ajouter par exemple des boîtes de texte, des zones de couleur, des cases à cocher et des listes déroulantes. Mais nous avons besoin de code en arrière pour récupérer les données. Souvent, nous faisons avec PHP, mais nous, ce n’est pas le sujet de ce cours, alors nous allons simplement être capable de coder les formulaires de manière visuelle, mais sans être capable de récupérer les données. 

Cependant, apprendre les formulaires HTML est utiles pour justement pouvoir modifier, par exemple avec WordPress, mais ne vous découragez pas, à la fin de ce tutoriel, je vous montre un outil qui permet de créer des formulaires sans ajouter du code pour récupérer les données. Sinon, à la fin, je vous ai mis un lien d’une formation gratuit avec PHP pour récupérer les données des formulaires.

Version vidéo

Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Cours HTML/CSS Débutant #12 - Les formulaires (2022)Cours HTML/CSS Débutant #12 – Les formulaires (2022)

Créer un formulaire

    La première chose qu’il va falloir penser avant de créer notre formulaire, c’est de voir la balise qui permet de créer des formulaires. Comme avec les tableaux, il va falloir emballer tous nos formulaires d’une grande balise et que toutes celles dedans va avoir des sous balises qui va avoir le contenu.

Voici la grande balise pour créer des formulaires:

<form>
</form>

Nous avons des attributs à cette balise que nous pouvons ajouter. Nous avons l’attribut method, qui permet de dire que quelle facon nous récupérons les données, mais cela doit être fait avec du code comme je vous ai dit, que donc nous n’avons pas besoin de le faire tout de suite et nous avons l’attribut action qui est l’emplacement de notre code PHP et notre fichier PHP.

Et toutes les balises qui vont se retrouver entre ces balises va être dans un formulaire. 

Ajouter des boîtes de textes

Maintenant, nous allons voir la première balise de formulaire, ce sont les boîtes de texte. Il y a 2 types de boîtes de texte, c’est-à-dire les boîtes de texte sur une ligne, les boîtes de texte multiligne. 

Voici comment ajouter une boîte de texte sur une ligne HTML:

<input type=”text” />
champ-texte-1-ligne

Et voici comment ajouter des zones de texte multilignes en HTML:

<textarea> </textarea>
boite-texte-multiligne

Ajouter des zones de nombres

Par la suite, nous avons aussi pour notre formulaire des zones de nombres, nous allons pouvoir gérer des zones de nombres avec plusieurs options, par exemple choisir l’incrémentation et même donner un style visuel avec un pointeur.

Publicité

Voici comment ajouter une zone de nombres en HTML:

<input type=”number”>
zone-de-nombre

Nous pouvons lui ajouter des attributs pour modifier la zone de nombres. Voici les attributs:

min=”” -> Ceci ajoute la valeur minimale autorisée

max=”” -> Ceci ajoute la valeur maximale autorisée

step=”” -> Les bonds que nous pouvons faire (par exemple simplement des bonds de 10, donc simplement 10, 20, 30, 40….)

Sélection de couleurs

Lors d’un précédent tutoriel, je vous avais parlé de la sélection de couleurs, vous pouvez modifier et ajouter votre propre formulaire de sélection de couleurs HTML, donc avec l’Hexadécimal, le RGB, etc. Et ce, grâce à une petite ligne:

<input type=”color”>
couleur-html

Champs de date

Il se peut aussi que vous ayez à faire face à des dates, nous pouvons justement modifier le type de de format de date. Vous pouvez aussi modifier plusieurs autres options de vos champs de date.

<input type=”date”>
date-html

Vous pouvez spécifier ce que vous voulez comme valeur de temps au lieu de date:

date -> Date complète

time -> L’heure

Week -> Semaine

month -> Mois

datetime -> Date et l’heure (avec décalage horaire)

datetimee-local -> Date et heure (sans décalage horaire)

Cases à cocher

Par la suite, nous avons aussi une case à cocher, les cases à cocher vous permettent de cocher des éléments d’une liste que vous allez pouvoir définir.

Vous avez 2 types de cases à cocher, vous avez des cases à cocher classiques et celles qu’on appelle les radios boutons. Les cases à cocher, ça vous permet de cocher plusieurs éléments, tandis que les radios boutons, c’est un bouton d’option qui permet de simplement choisir une option. 

Voici comment ajouter des cases à chocher:

<input type=”checkbox”>
checkbox

Et avant de vous présenter des radios bouton, je vais vous présenter un nouvel attribut, c’est l’attribut name. Et vous permet d’identifier et être ajouté à n’importe quel input qui est dans votre formulaire. 

Lorsque vous ajoutez des radios boutons, il va falloir ajouter l’attribut name à tous les radios boutons pour dire qu’ils font tous partie de la même liste.

Et par la suite, je vous présente aussi l’attribut value qui lui permet d’ajouter une valeur justement lorsque nous le cochons.

Voici comment ajouter des radios buttons:

<form>
    <input type=”radio” name=”choix” value=”banane”>
    <input type=”radio” name=”choix” value=”orange”>
    <input type=”radio” name=”choix value=”fraises”>
</form>
radiobutton-html

Étiquettes

Bon, maintenant, vous allez peut-être déjà un vu un problème, exemple lorsque vous ajoutez des cases à cocher ou des radios boutons. Vous n’avez pas de texte qui se lie à côté.  C’est à présent que je vais vous parler des étiquettes, elles vous permettent de lier à un formulaire pour justement lui ajouter un effet visuel et du texte. Exemple, qu’on veux cocher les bananes ou qu’on va cocher les oranges.

Et avant de vous présenter les étiquettes, je vais vous présenter un autre attribut qui s’appelle l’attribut ID, qui permet à lui d’identifier un champ formulaire. 

Et un autre attribut, l’attribut for, lui permet de relier un champ à un autre champ qui à un attribut ID.

Donc, voici ce qu’il faudrait faire si je voudrais ajouter une étiquette sur mes radios boutons de tout à l’heure.

<form>
    <input type=”radio” name=”choix” value=”banane” id=”choixbanane”> <
<label for=”choixbanane”>Choisir les bananes</label>
    <input type=”radio” name=”choix” value=”orange” id=”choixorange”>
<label for=”choixorange”>Choisir les oranges</label>
    <input type=”radio” name=”choix” value=”fraises” id=”choixfraises”>
<label for=”choixfraises”>Choisir les fraises</label>
</form>

De ce fait, nous avons la balise label qui vous permet d’ajouter des étiquettes et vous pouvez relier de ID avec un for. Et voici le résultat:

etiquettes

Listes déroulantes

Maintenant, nous avons les zones de liste déroulante entre, elles vous permettent de faire des listes de choix, et ce n’est pas plus compliqué qu’ajouter les autres éléments des formulaires, mais ça va marcher comme avec un formulaire, alors il va falloir ajouter un élément parent qui de liste déroulante et des éléments enfants qui vont être les choix de la liste de la liste. 

Voici comment ajouter une zone de liste déroulante:

<select name=”fruitpref” id=”fruits”>
        <option value=”Fraise”>Fraises</option>
        <option value=”Bananes”>Bananes</option>
        <option value=”oranges”>Oranges</option>
</select>
liste-deroulante-html

Bouton d’envoi

Et pour finir, les champs principaux de nos formulaires, nous avons le bouton d’envoi qui est un bouton d’envoi qui va permettre d’exécuter le code, comme dans l’emplacement du fichier PHP que nous avons parlé au début avec l’attribut action. Vous pouvez l’ajouter pour l’instant, mais lorsque vous avez cliqué dessus, cela ne fera sûrement rien, car il n’y a pas de code PHP que nous avons ajouté pour l’instant. 

Voici comment ajouter un bouton envoi:

<input type=”submit”>
submit-button-html

Les champs spécifiques

Maintenant, nous avons les champs spécifiques. Les champs spécifiques sont des simplement des champs qui se basent sur les autres champs, mais qui permet d’ajouter du contenu spécifique. 

Exemple, la zone de texte, mais avec du résultat enrichi, nous allons avoir les champs de recherche, les mails, les mots de passe, etc. Mais ce seront les trucs, des champs spécifiques pour des utilisations bien spécifiques. 

Champs de recherche

Comme premier champ spécifique, nous avons les champs de recherches qui permettent à ajouter des barres de recherche.

Publicité

Voici comment ajouter un champ de recherche:

<input type=”search”>

EMAIL

Par la suite, nous avons aussi un champ spécifique qui permet d’ajouter facilement des adresses mail. Si ce n’est pas le cas, il va dire une erreur automatique, même pas besoin de le configurer. C’est déjà dans votre navigateur. 

Voici comment ajouter un champ e-mail:

<input type=”email”>

Mot de passe

Comme dans la suite des champs spécifiques, nous avons le champ mot de passe qui, comme son nom l’indique, permet d’ajouter des mots de passe et donc ajouter des caractères spéciaux lorsque nous écrivons.

Voici comment ajouter un champ de mot de passe:

<input type=”password”>

URL

Ensuite, nous avons les champs URL qui vous permet d’ajouter des URL, les liens  pour aller sur les sites web. Attention, ces champs ont un problème: elles doivent avoir le http ou le https pour que ce soit considéré comme un lien.

Voici comment ajouter un champ URL:

<input type=”url” >

Numéro de téléphone

Et nous avons aussi le champ  numéro de téléphone qui vous permet d’ajouter des numéros de téléphone valide et en plus sur mobile de simplement afficher un clavier de numéro. 

Voici comment ajouter un champ de numéro de téléphone:

<input type=”tel”>

Sélecteur de nombres

Comme je l’avais dit plus haut, nous avons parlé des nombres, mais il y a une façon d’ajouter des sélecteurs de nombres qui va être plus simple, alors voici le sélecteur de nombres:

<input type=”range”>

PS: vous pouvez ajouter tous les mêmes attributs que les nombre à ce champ.

Créer des formulaires facilement grâce à un outil et sans PHP

Maintenant que nous avons vu comment ajouter les champs de formulaire, vous êtes sûrement hypés à créer votre formulaire, par exemple un formulaire de contact où d’authentification etc. Cependant, vous avez un problème que vous ne connaissez pas le PHP. 

C’est un problème que moi aussi. Auparavant, j’avais eu un gros souci. Je voulais vraiment créer des formulaires qui fonctionnent, mais je ne savais pas le PHP. Néanmoins, j’ai trouvé une méthode qui va vous permettre justement de créer des formulaires sans le PHP. Avec un outil qui s’appelle JotForms.

Ce super outil, gratuit, qui vous permet d’ajouter des formulaires. Il y a des formulaires prédéfinis. Vous pouvez aussi modifier les formulaires. 

Vous allez pouvoir modifier les actions et de celui-ci, par exemple dire OK lorsque envoyer ce champ est rempli, envoyez-le-moi à ce courriel ou à une liste, et vous pouvez connecter à des services. Par exemple, si vous voulez faire un type de formulaire d’infolettres, vous allez pouvoir le connecter à Mailchimp, etc.

Et à la fin, il va vous donner un code HTML que vous allez pouvoir copier sur votre site web. 

Alors voici une vidéo qui vont vous permettre d’utiliser Jotforms

Premiers pas avec Jotform (tables) : la puissance des formulaires sans coderPremiers pas avec Jotform (tables) : la puissance des formulaires sans coder

Le PHP avec les formulaires

Finalement, si vous êtes rendu là, vous allez pouvoir rajouter par vous-même du PHP à votre site. Je vous recommande les tutoriels d’OpenClassrooms pour ce sujet. Ils offrent une super formation complète et gratuite. 

Voici le lien de la formation d’OpenClassrooms pour des formulaires et PHP

FAQ

Comment encadrer un formulaire HTML ?

Pour encadrer un formulaire HTML, ajoutez ceci à votre code CSS:

form{

border: 1px solid black;

}

comment envoyer un formulaire html par mail ?

Tu peux utiliser l’outils de création facile de formulaires JotForms pour envoyer les formulaires HTML par mail.

Ce tutoriel se trouve dans la catégorie: Programmation

Partager ceci

Facebook
Twitter
LinkedIn
Reddit
Pinterest
WhatsApp
Telegram

À voir également

html-css-13
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #13 Site Web CSS Responsive
octobre 6, 2022
html-css-11
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #11 Figures, videos et audios
octobre 6, 2022
html-css-10
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #10 Tableaux HTML
octobre 6, 2022
html-css-9
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #9 Mise en page FlexBox (2/2)
octobre 6, 2022

À voir également sur le forum

Besoin d'aide ?

Malgré que tu as lu ce tutoriel, tu te poses toujours des questions à ce sujet? Le problème ne s’est pas réglé ? Vous êtes bloqué à un endroit ?

Viens poser ta question et sois répondu par la communauté Informerick rapidement!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *