HTML5 Attributs de formulaire et champs d'entrées

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

HTML5 Nouveaux attributs de formulaire

HTML5 cours tutorial

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 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 :

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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 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.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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 Astuce : Pour faire référence à plus d'un formulaire, utilisez une liste des ID de form séparée par des espaces.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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".

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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".

Opera Safari Chrome Firefox Internet Explorer

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) :

Sélectionner 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".

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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" .

Opera Safari Chrome Firefox Internet Explorer

Exemple Un formulaire avec deux boutons valider ou sans validation :

Sélectionner 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 ».

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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 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.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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>.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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).

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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 Astuce : Utilisez l'attribut title  pour  aider l'utilisateur.

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

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner 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.

Opera Safari Chrome Firefox Internet Explorer

Exemple Un champ d'entrée obligatoire :

Sélectionner 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 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.

Opera Safari Chrome Firefox Internet Explorer

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

Sélectionner le code

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

Balise HTML5 <input>

Balise

Déscription

<form>

Définit un formulaire HTML pour l'entrée utilisateur

<input>

Définit un contrôle d'entrée

Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant