HTML5 Attributs de formulaire et champs d'entrées

HTML5 Nouveaux attributs de formulaire

HTML5 a plusieurs nouveaux attributs pour les éléments <form> et <input>.

Nouveaux attributs pour <form> :

• autocomplete
• novalidate

Nouveaux attributs pour <input> :

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

attribut autocomplete pour <form>  et  <input>

L'attribut autocomplete spécifie si un formulaire ou un champ d'entrée devrait avoir la saisie semi-automatique on ou off.

Lorsque  la saisie semi-automatique est activée, le navigateur présente automatiquement toutes les valeurs  que l'utilisateur a entré avant.

Astuce : Il est possible d'avoir la saisie semi-automatique  sur « off »  pour l'élément form et pour des champs d'entrée spécifiques, ou vice versa.

Remarque : L'attribut  saisie semi-automatique fonctionne avec l’élément <form> et les élément <input> des types suivants : text, search, url, tel, email, password, date, range, et color.

Prise en charge des explorateur :

Exemple Un formulaire HTML avec la saisie semi-automatique sur (et large pour un champ de l'entrée) :

Exemple :      Copier le code

  <form action="demo.php" autocomplete="on">
    Nom:<input type="text" name="nom"><br>
    Prénom: <input type="text" name="prenom"><br>
    E-mail: <input type="email" name="email"
  autocomplete="off"><br>
    <input type="submit"></form>
   
  <p> Remplir et soumettre le formulaire, puis rechargez la
  page pour voir comment fonctionne la saisie semi-automatique.
  </p>
  <p> Notez que saisie semi-automatique est sur "on" pour l'élément 
  form, mais «off» pour le champs de l'e-mail. </p>
 

Astuce : Dans certains navigateurs (comme firefoxe), vous devrez peut-être activer la fonction de saisie semi-automatique de l’explorateur pour que cela fonctionne.

L’attribut novalidate  pour <form>

L'attribut novalidate est un attribut booléen.

Lorsqu'elle est présente, elle spécifie que les données du formulaire (entrée) ne doivent pas être validées lorsqu’elles sont soumises.

Exemple Indiquer que le formulaire ne doit pas être validé sur soumettre :

Exemple :      Copier le code

  <form action="demo.php" novalidate="novalidate">
  Adresse mail: <input type="email" name="email">
  <input type="submit">
  </form>
 

L’attribut autofocus  pour <input>

L'autofocus est un attribut booléen.

L’attribut autofocus  spécifie qu'un élément <input> doit obtenir automatiquement le focus lorsque la page est chargée.

Exemple Le champ « nom » obtient le focus automatiquement lorsque la page est chargée :

Exemple :      Copier le code

  <form action="demo.php" autocomplete="on">
    Nom:<input type="text" name="nom"
  autofocus="autofocus"><br>
    Prénom: <input type="text" name="prenom"><br>
    E-mail: <input type="email" name="email"
  autocomplete="off"><br>
    <input type="submit"></form>
   
 

First name:<input type="text" name="fname" autofocus="autofocus">

L’attribut form pour <input>

L'attribut form spécifie un ou plusieurs formulaires auxquelles appartient un élément <input>.

Astuce : Pour faire référence à plus d'un formulaire, utilisez une liste des ID de form séparée par des espaces.

Exemple - Un champ de saisie situé en dehors du formulaire HTML mais fait partie du formulaire :

Exemple :      Copier le code

  <form action="demo.php" id="form1">
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit" value="Submit"></form>
   
  <p> Le champ "Nom " ci-dessous est à l'extérieur de
  l'élément de formulaire form, mais c’est une partie d’elle grâce
  à l’attribut form.</p>
   
  Nom: <input type="text" name="nom" form="form1">
 

L'attribut formaction pour <input>

L'attribut formaction spécifie l'Url d'un fichier qui traitera le contrôle d'entrée lorsque le formulaire est envoyé.

L'attribut formaction remplace l'attribut action de l'élément <form>.

Remarque : L’attribut formaction est utilisé avec type="submit" et type="image".

Exemple Un formulaire HTML avec deux boutons, avec des actions différentes de valider :

Exemple :      Copier le code

  <form action="demo.php">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnam"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.php" value="Submit
  as admin"></form>
 

L’attribut formenctype pour <input>

L'attribut formenctype spécifie comment les données du formulaire doivent être encodées lors de la soumission d'une demande au serveur (Utilisé uniquement pour les formulaires avec méthode = « post »)

L'attribut formenctype remplace l'attribut enctype de l'élément <form>.

Remarque :L'attribut formenctype est utilisé avec type="submit" et type="image".

Exemple Envoyez form data par défaut codé (le premier bouton Envoyer) et codées en tant que "multipart/form-data" (le deuxième bouton Envoyer) :

Exemple :      Copier le code

  <form action="demo_enctype.php" method="post">
  Nom : <input type="text" name="nom"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Envoyer comme  Multipart/form-data"></form>
 

L’attribut formmethod pour <input>

L'attribut formmethod définit la méthode HTTP pour l'envoi des données de formulaire vers l'URL d'action.

L'attribut formmethod remplace l’attribut method de l'élément <form>.

Remarque : L'attribut formmethod peut être utilisé avec type="submit" et type="image".

Exemple Le deuxième bouton submit substitue la méthode HTTP de la forme :

Exemple :      Copier le code

  <form action="demo.php" method="get">
  Nom : <input type="text" name="nom"><br>
  Prénom : <input type="text" name="pnom"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.php" value="Envoyer en utilisant POST"></form>
 

L’attribut formnovalidate pour <input>

L'attribut novalidate est un attribut booléen.

Lorsqu'il est présents, il spécifie que l'élément <input> ne doit être validé lorsqu’il est soumis.

L'attribut formnovalidate remplace l'attribut novalidate de l'élément <form>.

Remarque : L'attribut formnovalidate peut être utilisé avec type="submit" .

Exemple Un formulaire avec deux boutons valider ou sans validation :

Exemple :      Copier le code

  <form action="demo.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate="formnovalidate"
  value="Envoyer sans validation">
  </form>
 

L’attribut formtarget pour  <input>

L'attribut formtarget spécifie un nom ou un mot clé qui indique où afficher la réponse qui est reçue après avoir rempli le formulaire.

L'attribut formtarget substitue à l'attribut target de l'élément <form>.

Remarque : L'attribut formtarget peut être utilisé avec type = « submit » et tapez = « image ».

Exemple Un formulaire avec deux boutons, avec des fenêtres cibles valider différentes:

Exemple :      Copier le code

  <form action="demo.php">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit" value="Envyer normal"><input
  type="submit" formtarget="_blank" value="Envoyer dans une
  nouvelle fenêtre"></form>
 

les attributs height et width pour <input>

Les attributs height et width spécifient la hauteur et la largeur d'un élément <input>.

Remarque : Les attributs height et width sont utilisés uniquement avec < input type = « image » >.

Astuce : Toujours spécifier les attributs de largeur et la hauteur pour les images. Si la hauteur et la largeur sont définies, l'espace requis pour l'image est réservée lorsque la page est chargée. Cependant, sans ces attributs, le navigateur ne connaît pas la taille de l'image et ne peut pas réserver l'espace approprié pour elle. L'effet sera que la mise en page va changer pendant le chargement de l’image.

Exemple Définir une image comme le bouton soumettre, avec les attributs height et width :

Exemple :      Copier le code

  <form action="demo.php">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="image" src="images/img_submit.gif" alt="Submit"
  width="48" height="48">
  </form>
 

L’attribut list pour <input>

L'attribut list fait référence à un élément <datalist> qui contient les options prédéfinies pour un élément <input>.

Exemple Un élément <input> avec des valeurs prédéfinies dans une <datalist> :

Exemple :      Copier le code

  <form action="demo.php">
  <input list="browsers"><datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  </form>
 

Les attributs min et max pour <input>

Les attributs min et max spécifient les valeurs minimale et maximale d'un élément <input>.

Remarque : Les attributs min et max fonctionne avec les types d'entrées suivants : number, range, date, datetime, datetime-local, month, time and week.

Exemple éléments  <input> avec les valeurs min et max :

Exemple :      Copier le code

  <form action="demo.php">
  Entrez une date antérieure à 01/01/1980:
  <input type="date" name="bday" max="1979-12-31">
  
  Entrez une date postérieure à 01/01/2000:
  <input type="date" name="bday" min="2000-01-02">
  Quantité entre 1 et 5:
  <input type="number" name="quantity" min="1" max="5">
  </form>
 

L’attribut multiple pour <input>

L'attribut multiple est un attribut booléen.

Lorsqu'il est présent, il spécifie que l'utilisateur est autorisé à entrer plusieurs valeurs dans l'élément <input>.

Remarque : L'attribut multiple fonctionne avec les types d'entrées suivants : email, and file ( Courrier électronique et fichiers).

Exemple Un champ de téléchargement de fichier qui accepte plusieurs valeurs :

Exemple :      Copier le code

	<form action="demo.php">
	  sélectionner une image: <input type="file" name="img"
	multiple="multiple"><input type="submit"></form>
	 
	<p> Essayez de sélectionner plus d'un fichier . </ p>
 

L’attribut pattern pour <input>

L'attribut pattern spécifie une expression régulière qui est vérifiée par rapport à la valeur de l'élément <input>.

Remarque : L'attribut pattern fonctionne avec les types d'entrées suivants : text, search, url, tel, email, et password.

Astuce : Utilisez l'attribut title  pour  aider l'utilisateur.

Astuce : Pour plus d'informations sur les expressions régulières voir notre tutorial.

Exemple Un champ d'entrée qui peut contenir seulement trois lettres (pas de nombres ou de caractères spéciaux) :

Exemple :      Copier le code

  <form action="demo.php">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  Country code: <input type="text" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
  Code du pays à trois lettres: <input type="text"
  name="pays_code" pattern="[A-Za-z]{3}" title=" code pays à trois
  lettres ">
  "><input type="submit"></form>
   
 

L’attribut placeholder pour <input>

L'attribut placeholder spécifie un soupçon court qui décrit la valeur attendue d'un champ de saisie (par exemple une valeur échantillon ou une brève description du format attendu).

L'indicateur s'affiche dans le champ de saisie lorsqu'il est vide et disparaît en général lorsque le champ obtienne le focus.

Remarque : L'attribut placeholder fonctionne avec les types d'entrées suivants : text, search, url, tel, email, et password.

Exemple Un champ de saisie avec un texte d'espace réservé :

Exemple :      Copier le code

  <form action="demo.php">
    Nom : <input type="text" name="nom" placeholder="Votre
  nom"><br>
    Prénom : <input type="text" name="pnom" placeholder="Votre
  prénom"><br>
    <input type="submit" >
  </form>
 

L’attribut required pour <input>

L'attribut required est un attribut booléen.

Lorsqu'il est présent, il spécifie qu'un champ de saisie doit être rempli avant d'envoyer le formulaire.

Remarque : L'attribut required fonctionne avec les types d'entrées suivants : text, search, url, tel, email, password, date pickers, number, checkbox, radio, et file.

Exemple Un champ d'entrée obligatoire :

Exemple :      Copier le code

  <form action="demo.php">
  Nom d’utilisateur : <input type="text" name="username"
  required="required">
    <input type="submit" >
 

L’attribut step pour <input>

L'attribut step spécifie les intervalles de numéros autorisés pour un élément <input>.

Exemple : si step = "3 ", les numéros autorisés pourraient être -3, 0, 3, 6, etc.

Astuce : L'attribut step peut être utilisé conjointement avec les attributs max et min pour créer une plage de valeurs autorisées.

Remarque : L'attribut step fonctionne avec les types d'entrées suivants : number, range, date, datetime, datetime-local, month, time and week.

Exemple Un champ de saisie avec une fréquence numéro juridique déterminée :

Exemple :      Copier le code

  <form action="demo_form.asp">
    <input type="number" name="points" step="3"><input
  type="submit">
  </form>
 

Balise HTML5 <input>