Aller au contenu

Formulaire dans une page HTML☘

On délimite les éléments d'un formulaire avec la balise HTML <form>:

1
2
3
4
5
<form method="post" action="fichier.php">

ICI LES ELEMENTS DU FORMULAIRE

</form>

Remarque

Nous n'utiliserons pas pour le moment les attributs method et action. Nous reviendrons sur leur rôle lorsque nous parlerons de PHP.

Exemple

Complétez le formulaire ci-dessous puis appuyez sur la touche [Entrée].

Code HTML correspondant
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<form>
    <label for="bonjour">Entrez votre prénom puis cliquez sur le
        bouton :</label>
    <input type="text" id="bonjour" maxlength="16" size="18" style="border: 1px solid gray"/>
    <input id="mon_bouton" type="button" value="Valider" />
</form>
<div id="reponse"> 
    <!--Ici la réponse Javascript lors d'une modification de la valeur dans
    le champ input.-->
</div>
Code JavaScript correspondant
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// déclaration d'une variable ciblant un élément html
let entree = document.querySelector("#bonjour");
let bouton = document.querySelector('#mon_bouton');

// variable lié à l'élément div
let reponse = document.querySelector("#reponse");
reponse.innerHTML = '';

// On "écoute" l'événement change sur l'élément input
// L'action sera déclenchée lors d'une modification de la valeur dans le champ input 
bouton.addEventListener("click",
    () => {
        // on récupère la valeur du texte entré par l'utilisateur :
        let prenom = entree.value ; 
        reponse.innerHTML = 'Bonjour ' + prenom ;
    }
, false);

Plusieurs types de formulaire☘

Faisons rapidement le point sur la syntaxe des ces éléments et les différents types de champ permettant d'entrer des données (elles peuvent être numériques, textes, adresses email...).

Pour aller plusloin

Vous pouvez consulter le site de référence MDN

Zone de texte☘

Lisez cette page.

Zone de saisie d'un nombre☘

Lisez cette page.

Zone de texte étendue☘

Lisez cette page.

Cases à cocher☘

Lisez cette page.

Liste déroulante☘

Lisez cette page.

Les boutons d'option☘

Lisez cette page.