L’élément form d’un formulaire HTML

<form action="page_de_recup" method="post">
    …
</form>

1. Action

• Syntaxe

<form action="URL">

• Valeur
• URL
• Définition
• Définit le chemin où sont envoyées les données du formulaire lorsque celui-ci est soumis.
• L’attribut action va servir à préciser l’adresse relative de la page dans laquelle les données du formulaire doivent être traitées. Ce sera généralement un fichier PHP.
• Exemple:
• L’exemple suivant montre qu’on validation, envoi le formulaire de donnée vers un fichier dont le nom est: « /action_page.php »:

<form action="/action_page.php" method="get">
  Prénom: <input type="text" name="fname"><br>
  Nom: <input type="text" name="lname"><br>
  <input type="submit" value="Valider">
</form>

2. Method

• Syntaxe

<form method="get|post">

• Valeur
• Définition
• L’attribut method spécifie comment envoyer les données de formulaire (les données de formulaire sont envoyées à la page spécifiée dans l’attribut d’action).
• Les données de formulaire peuvent être envoyées sous forme de variables URL (avec method = « get ») ou de post-transaction HTTP (avec method = « post »).
• Exemple:
• L’exemple suivant montre qu’on validation, envoi le formulaire de donnée vers un fichier dont le nom est: « /action_page.php »:

<form action="/action_page.php" method="get">
  Prénom: <input type="text" name="fname"><br>
  Nom: <input type="text" name="lname"><br>
  <input type="submit" value="Valider">
</form>

3. id

• Définition
• Il permet d’identifier le formulaire pour pouvoir accéder à ses composants à partir d’un script JavaScript avec par exemple la méthode getElementById(id).
• Utilisez l’attribut id pour manipuler du texte avec JavaScript

4. name

• Définition
• Le nom du formulaire avec un rôle similaire à l’attribut id , la méthode JavaScript étant alors getElementById(name).
• NAME sert à donner un nom à chaque champ:
• Il n’apparaît pas à l’affichage
• Il est est utile pour le traitement des données par le programme qui recevra les données.
• Il n’est pas nécessaire de spécifier un nom de champ pour les types “submit” et “reset”.
• NAME sert à regrouper des boutons “radio”
• (Sauf exception) n’utilisez pas le même name pour plusieurs “checkbox”

5. enctype

• Syntaxe

<form enctype="">

• Définition
• L’attribut enctype permet de spécifier un type de codage pour le formulaire.
• enctype permet de spécifier un type de codage pour votre formulaire. Il y a trois valeurs possibles.
• application/x-www-form-urlencoded est la valeur par défaut si l’attribut enctype n’est pas spécifié. C’est l’option correcte pour la majorité des formulaires HTML simples.
• multipart/form-data est nécessaire si vos utilisateurs doivent télécharger un fichier via le formulaire.
• text/plainest une option valide, bien qu’il envoie les données sans aucun encodage. Il n’est pas recommandé, car son comportement est difficile à prévoir.

6. mailto

• Mailto est un moyen par défaut d’envoyer un courrier lorsque le consommateur souhaite communiquer ou faire part de ses commentaires, puis cliquer sur le lien mailto ouvrira une fenêtre d’envoi de courrier par défaut.
• L’élément d’ancrage <a> peut être utilisé pour créer des liens e-mail ou des liens mailto .



• Le lien mailto, lorsque vous cliquez dessus, ouvre le programme ou le logiciel de messagerie par défaut de l’utilisateur. Une nouvelle page email est créée avec le champ « À » contenant l’adresse du nom spécifié sur le lien par défaut.
• Un lien « email » donne la possibilité aux internautes de vous contacter par e-mail en cliquant sur un simple lien qui va déclencher un logiciel de messagerie.
• L’URL mailto: permet de générer un nouveau mail sans que l’utilisateur n’ait à saisir l’adresse du destinataire.
• mailto: est un schéma d’URI permettant de créer un lien hypertexte vers une adresse électronique.

Exemple:

<form action="mailto:someone@example.com" method="post" enctype="text/plain">
    Name:<br>
    <input type="text" name="name"><br>
    E-mail:<br>
    <input type="text" name="mail"><br>
    Comment:<br>
    <input type="text" name="comment" size="50"><br><br>
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
</form>

• Paramètres : cet attribut accepte sept paramètres comme décrit ci-dessous :
• mailto : ce paramètre contient l’adresse e-mail du destinataire mail.
• cc : Ce paramètre contient un autre courrier qui recevra la copie carbone du courrier, il est facultatif.
• bcc : Ce paramètre contient un autre courrier qui recevra la copie carbone invisible du courrier, il est facultatif.
• subject : Ce paramètre contient le sujet du mail, il est facultatif.
• body : Ce paramètre contient le contenu du mail, il est facultatif.
• ? : Ce paramètre est le premier délimiteur de paramètre, il est facultatif.
• @ : Il contient l’autre délimiteur de paramètre, il est facultatif.

7. accept

• L’attribut accept prend comme valeur une liste séparée par des virgules d’un ou plusieurs types de fichiers, ou d’une spécification de type de fichier unique, décrivant les types de fichiers à autoriser.
• La propriété accept est un attribut pour les éléments <input> de type file.

Elle était prise en charge par l’élément <form>, mais a été supprimée au profit de file dans HTML5.

• Exemple:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choisissez le fichier à téléverser</label>
    <input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png">
  </div>
  <div>
    <button>Soumettre</button>
  </div>
</form>

8. accept-charset

• L’attribut accept-charset définit le codage des caractères pour la soumission du formulaire.
• Cela s’applique uniquement au <form> qui a cet attribut, et non à l’ensemble de la page.
• S’il n’est pas spécifié, la valeur par défaut est la même que l’encodage des caractères de la page, qui est généralement UTF-8.
• Les jeux de caractères sont utilisés pour coder les données de formulaire soumises au serveur.
• L’attribut accept-charset sur une balise form définit le codage des caractères pour la soumission du formulaire. S’il n’est pas spécifié, la valeur par défaut est la même que l’encodage des caractères de la page, qui est généralement UTF-8.
• Syntaxe

<form accept-charset = " jeu de caractères ">

• Exemple

<form action="apcpedagogie.com/tutorial/formulaire.html" accept-charset="utf-8">
  <input type="text" name="firstname" placeholder="First name">
  <input type="text" name="lastname" placeholder="Last name">
  <button type="submit">Submit</button>
</form>

<input autocomplete="on|off">

<form action="/action_page.php" autocomplete="on">
  <label for="fname">Nom:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Prénom:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

<form onReset="">

• Permet de gérer l’événement qui survient quand l’utilisateur efface en bloc toutes les saisies réalisées en cliquant sur le bouton de type reset
• onReset est un gestionnaire d’événements qui exécute un script lorsque le bouton Réinitialiser est cliqué.
• Cela pourrait être utilisé pour afficher un message de confirmation contextuel avant la soumission des données du formulaire.

L’attribut d’évènement onreset exécute un script lorsque vous cliquez sur le bouton RESET du formulaire (plus supporté par le HTML5).