Les formulaires.

Introduction.

Les éléments HTML pour construire un formulaire sont: <form>, <label>, <input>, <textarea> et <button>. L'élémént <form> doit avoir au moins deux attributs: 'action' qui définit l'URL où sont envoyées les données et 'method' qui définit la méthode pour envoyer les données ('get' ou 'post'). L'élément <label> à pour attribut 'for' qui permet de lier un libélé à un élément du formulaire qui aura le même libélé pour 'id'. L'élément <input> possède l'attribut 'type' qui définit son comportement. Avec la valeur 'text' <input> accepte n'importe quel texte sur une ligne. Si nous utilisons la valeur 'email', il n'acceptera que des adresses électroniques. Grace à cette valeur, il vérifira que le champ texte contient bien une adresse valide. Attention ! Seule la balise <input> n'est par fermante !

<form action="/URL-vers-traitement" method="post">

        <label for="name">Nom :</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">e-mail :</label>
        <input type="email" id="mail" name="user_mail">

        <label for="msg">Message :</label>
        <textarea id="msg" name="user_message"></textarea>

</form>
									

Il est possible de spécifier une valeur par défaut dans le champ <input> avec l'attribut 'value':

<input type="text" value="texte par défaut">
									

Et pour <textarea> :

<textarea>Texte par défaut.</textarea>
									

Ensuite, pour envoyer le formulaire, nous utilison l'élément <button> qui peut prendre trois valeurs: 'submit', 'reset' et 'button'. Ce dernier ne fait rien Mais peut être utile lors de l'utilisation de javascript. L'attribut 'submit' envoie les données vers l'URL définie par l'attribut 'action' de l'élément <form>. 'reset' lui réinitialise toutes les valeurs par défaut. Code complet d'un formulaire:

<form action="/URL-vers-traitement" method="post">

        <label for="name">Nom :</label>
        <input type="text" id="name" name="user_name" value="Votre nom">

        <label for="mail">e-mail :</label>
        <input type="email" id="mail" name="user_mail" value="Votre mail">

        <label for="msg">Message :</label>
        <textarea id="msg" name="user_message">Ici votre message</textarea>

    	  <button type="submit">Envoyer le message</button>
    
</form>
									

Voir l'exemple du code.[ GO! ]

Il est possible d'utiliser <input> pour faire un boutton, il suffit d'employer le type approprié: 'submit'. Mais il ne permet que l'utilisation du texte pour le libélé alors que <button> permet d'utiliser n'importe quel contenu HTML.

en résumé:

<form action="URL" method="post | get"></form>

<label for="name = id d'input"></label>

<input type="text | email" id=" = for" name="unNom" value="champs prérempli">

<textarea id="= for" name="unNom"></textarea>

<button type="submit | reset | button" >

									

Articles connexes:

Test formulaire 01 (sans mise en forme).[ GO! ]

Test formulaire 02 (mise en forme).[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/12/2020