Nouveaux attributs de formulaire HTML5

Remarque : les attributs de hauteur et de largeur ne s'appliquent qu'aux balises <input> Conseil : les images spécifient généralement à la fois les attributs de hauteur et de largeur. Si une image a une hauteur et une largeur définies, l'espace requis par l'image sera conservé lors du chargement de la page. Sans ces attributs, le navigateur ne connaît pas la taille de l'image et ne peut pas réserver l'espace approprié. L'image entraînera une modification de l'effet de mise en page pendant le processus de chargement (même si l'image a été chargée). Exemple

<input type="image" src="img_submit.gif " alt="Soumettre" width="48" height="48">

Attribut de liste <input>

OperaSafariChromeFirefoxInternet ExplorerInstance
Valeur <input> prédéfinie dans <datalist> :

<input list="browsers"> ; 🎜>

<datalist id="navigateurs">

<option value="Internet Explorer"> >

les attributs min, max et step sont utilisés pour spécifier des limites (contraintes) pour les types d'entrée contenant des nombres ou des dates.

Exemple

<input> Paramètres de valeur minimale et maximale de l'élément :

Entrez une date avant 1980 -01-01 :
<input type="date" name="bday" max="1979-12-31">

Entrez une date après le 01/01/2000 : <input type="date" name="bday " min="2000-01-02">

Quantité (entre 1 et 5) :

<input type="numéro" name="quantité" min="1" max="5">

< input> attribut multiple

multiple spécifie que plusieurs valeurs peuvent être sélectionnées dans l'élément <input> Remarque : L'attribut multiple s'applique aux types de balises <input> suivants : email et file. : e-mail et fichier.Exemple

Sélectionner des images : <input type="file" name="img" multiple>

Attribut de motif <input>
L'attribut pattern décrit une expression régulière utilisée pour valider la valeur de l'élément <input>
Remarque : l'attribut pattern s'applique aux types de balises <input> suivants : texte, recherche, url, tel, email et mot de passe.
Conseil : il est utilisé avec l'attribut global title pour décrire le modèle. .
Exemple
L'exemple suivant montre un champ de texte qui ne peut contenir que trois lettres (hors chiffres et caractères spéciaux) :

Code pays : <input type= "text" name="country_code" pattern="[A-Za-z]{3}" title="Code de pays à trois lettres"> 🎜> <input> attribut d'espace réservé

L'attribut d'espace réservé fournit un indice décrivant la valeur attendue du champ de saisie.
Une brève invite s'affiche dans le champ de saisie avant que l'utilisateur ne saisisse une valeur. Remarque : l'attribut placeholder s'applique aux types de balises <input> suivants : texte, recherche, URL, téléphone, e-mail et mot de passe. Exempletexte d'invite du champ de saisie t :



<input type="text" name="fname" placeholder="Prénom"> 🎜>

<input> attribut obligatoire

l'attribut obligatoire doit être dans Remplissez les champs de saisie avant de soumettre (ne peuvent pas être vides).
Remarque : L'attribut obligatoire s'applique aux types de balises <input> suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier. ExempleChamp de saisie qui ne peut pas être vide :


Nom d'utilisateur : <input type="text" name="usrname" obligatoire> 🎜>

<input> attribut step L'attribut step spécifie l'intervalle de nombre légal pour le champ de saisie. Si step="3", les nombres légaux sont -3, 0, 3, 6, etc.

Remarque : L'attribut step est le même que Les types suivants sont utilisés ensemble : number, range, date, datetime, datetime-local,month, time et week.
Instance spécifie que l'étape d'entrée est 3 :

<input type="number" name="points" step="3">

Élément <output> HTML5 introduit également un nouvel élément <output>, qui est utilisé pour représenter différents types de résultats de sortie, tels que la sortie écrite par un script.

Vous pouvez également utiliser l'attribut for pour spécifier la relation entre l'élément de sortie et d'autres éléments du document qui affectent le calcul (par exemple, en tant que source d'entrée ou paramètre). La valeur de l'attribut for est une liste d'ID d'autres éléments séparés par des espaces.

attribut placeholder
HTML5 introduit un nouvel attribut appelé placeholder. Cet attribut sur les éléments <input> et <textarea> fournit à l'utilisateur une indication sur ce qui peut être saisi dans le champ. Les caractères d'espace réservé ne peuvent pas contenir de retours chariot ou de sauts de ligne.
Ce qui suit est la syntaxe simple de l'attribut placeholder :

<input type="text" name="search" placeholder="recherche sur le Web"/> 🎜>

attribut obligatoire Désormais, nous n'avons plus besoin d'utiliser JavaScript pour gérer les validations côté client telles que les zones de texte vides qui ne peuvent jamais être soumises, car HTML5 introduit un nouvel attribut Les attributs requis peuvent être utilisés comme suit, ce qui garantira que la zone de saisie a une valeur :

<input type="text" name="search" requirejs/> 🎜>Cet attribut n'est pris en charge que par les dernières versions des navigateurs Mozilla, Safari et Chrome.

Instance 1 :

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="demo-form.php" id="form1">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="提交">
  </form>
   <p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>
    Last name: <input type="text" name="lname" form="form1">
   <p><b>注意:</b> IE不支持form属性</p>
</body>
</html>

Instance 2 :

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="" method="get">
        <input list="browsers" name="browser">
        <datalist id="browsers">
         <option value="Internet Explorer">
         <option value="Firefox">
         <option value="Chrome">
         <option value="Opera">
         <option value="Safari">
        </datalist>
        <input type="submit">
    </form>
    <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
</body>
</html>