recherche

Maison >interface Web >Tutoriel H5 >Organiser les attributs communs et les nouveaux attributs des formulaires dans les compétences du didacticiel HTML5_html5

Organiser les attributs communs et les nouveaux attributs des formulaires dans les compétences du didacticiel HTML5_html5

WBOY
WBOYoriginal
2016-05-16 15:46:001690parcourir

Nouveaux attributs de formulaire HTML5
Les balises

et de HTML5 ont ajouté plusieurs nouveaux attributs.
Nouvel attribut :
complétion automatique
novalidate
Nouveaux attributs :
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
hauteur et largeur
liste
min et max
multiple
modèle (expression rationnelle)
espace réservé
obligatoire
étape


/ attribut de saisie semi-automatique
L'attribut de saisie semi-automatique spécifie que le formulaire ou le champ de saisie doit avoir une fonction de saisie semi-automatique.
Lorsque l'utilisateur commence à taper dans le champ de saisie semi-automatique, le navigateur doit afficher les options pour remplir le champ.
Astuce : L'attribut de saisie semi-automatique peut être activé dans l'élément form mais désactivé dans l'élément input.
Remarque : la saisie semi-automatique fonctionne avec les balises , ainsi qu'avec les types de balises suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, plage et couleur.
Exemple
Activer la saisie semi-automatique dans le formulaire HTML (désactiver la saisie semi-automatique pour un champ de saisie) :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <formulaire action="demo-form.php " complétion automatique="on">
  2. Prénom :<saisie type= "texte" nom="fname"><br>
  3. Nom : <entrée type= "texte" nom="lnom"><br>
  4. E-mail : <entrée type="e-mail" nom="e-mail" complétion automatique="off"><br>
  5. <entrée type="soumettre" >
  6. formulaire>


attribut novalidate
Un attribut booléen de l'attribut novalidate L'attribut
novalidate spécifie que le formulaire ou les champs de saisie ne doivent pas être validés lors de la soumission du formulaire. .
Exemple
Pas besoin de vérifier les données du formulaire soumis

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <formulaire action="demo-form.php "novalidate>
  2. E-mail : <entrée type="email" nom="user_email">
  3. <entrée type="soumettre" >
  4. formulaire>


attribut autofocus
L'attribut autofocus est un attribut booléen L'attribut
autofocus spécifie que le champ prend automatiquement le focus lorsque la page est chargée.
Exemple
Laissez le champ de saisie "Prénom" se focaliser automatiquement lors du chargement de la page :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. Prénom :<saisie type= "texte" nom="fname" autofocus>


Attribut de formulaire
L'attribut de formulaire spécifie un ou plusieurs formulaires auxquels appartient le champ de saisie.
Conseil : Si vous devez référencer plusieurs formulaires, utilisez une liste séparée par des espaces.
Instance
Le champ de saisie situé à l'extérieur du formulaire fait référence au formulaire HTML (le formulaire de saisie fait toujours partie du formulaire) :

🎜 >L'attribut formaction est utilisé pour décrire l'adresse URL de soumission du formulaire.
L'attribut formaction remplacera l'attribut action dans l'élément .Remarque : L'attribut formaction est utilisé pour type="submit " et type=" image".
Exemple
Le formulaire HTMLform suivant contient deux boutons de soumission avec des adresses différentes :


Code XML/HTML
Copier le contenu dans le presse-papiers
  1. <formulaire action="demo-form.php ">  
  2.   Prénom : <entrée type= "texte" nom="fname"><br>  
  3.   Nom : <entrée type= "texte" nom="lnom"><br>  
  4.   <input type="soumettre"  valeur="Envoyer"><br>  
  5.   <input type="soumettre"  formaction="demo-admin.php"  
  6.   value="Soumettre en tant qu'administrateur">  
  7. formulaire>  


formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要 : 该第二个提 type="submit" et type="image" Il s'agit de "multipart/form-data"发送表单数据 :


Code XML/HTML
复制内容到剪贴板
  1. <formulaire action="demo-post_enctype.php " méthode="post">  
  2.   Prénom : <entrée type= "texte" nom="fname"><br>  
  3.   <input type="soumettre"  valeur="Envoyer">  
  4.   <input type="soumettre"  formenctype="multipart/form-data"  
  5.   value="Soumettre en tant que Multipart/form-data">  
  6. formulaire>  


formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 元素的的method 属性。
注意: 该属性可以与 type="submit" et type="image" 配合使用。
实例
重新定义表单提交方式实例 :

Code XML/HTML复制内容到剪贴板
  1. <formulaire action="demo-form.php " méthode="obtenir">  
  2.   Prénom : <entrée type= "texte" nom="fname"><br>  
  3.   Nom : <entrée type= "texte" nom="lnom"><br>  
  4.   <input type="soumettre"  valeur="Envoyer">  
  5.   <input type="soumettre"  formmethod="post" formaction="demo-post.php"  
  6.   valeur="Envoyer en utilisant POST">  
  7. formulaire>  


formnovalidate 属性
novalidate 属性是一个 booléen 属性.
novalidate属性描述了
formnovalidate 属性会覆盖
注意: formnovalidate 属性与type="submit一起使用
实例
两个提交按钮的表单(使用与不适用验证 ):

Code XML/HTML复制内容到剪贴板
  1. <formulaire action="demo-form.php ">  
  2.   E-mail : <saisie type="e-mail" nom="identifiant"><br>  
  3.   <input type="soumettre"  valeur="Envoyer"><br>  
  4.   <input type="soumettre"  formnovalidate value="Soumettre sans validation">  
  5. formulaire>  

formtarget
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
Le formtarget
注意 : formtarget 属性与type="submit" et type="image"配合使用.
实例
两个提交按钮的表单, 在不同窗口中显示 :

Code XML/HTML复制内容到剪贴板
  1. <formulaire action="demo-form.php ">  
  2.   Prénom : <entrée type= "texte" nom="fname"><br>  
  3.   Nom : <entrée type= "texte" nom="lnom"><br>  
  4.   <input type="soumettre"  valeur="Envoyer comme normal">  
  5.   <input type="soumettre"  formtarget="_blank"  
  6.   valeur="Envoyer dans une nouvelle fenêtre">  
  7. formulaire>  


hauteur 和 largeur 属性
hauteur 和 largeur 属性规定用于 image 类型的
注意 : hauteur et largeur de l'image 类型的 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。
实例
定义了一个图像提交按钮, 使用了 hauteur et largeur 属性 :

Code XML/HTML复制内容到剪贴板
  1. <entrée type="image"  src="img_submit.gif" alt="Envoyer" largeur="48" hauteur="48">  

list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
OperaSafariChromeFirefoxInternet Explorer
实例
在 中预定义 值 :

Code XML/HTML复制内容到剪贴板
  1. <entrée liste="navigateurs" >  
  2.   
  3. <datalist id="navigateurs" >  
  4.   <option valeur="Internet Explorer ">  
  5.   <option valeur="Firefox" >  
  6.   <option valeur="Chrome" >  
  7.   <option valeur="Opéra" >  
  8.   <option valeur="Safari" >  
  9. liste de données>  

min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max和 étape 属性适用于以下类型的 < entrée> 标签：sélecteurs de dates、numéro de plage。
实例

Code XML/HTML复制内容到剪贴板
  1. <input> Paramètres de valeur minimale et maximale de l'élément :
  2. Entrez une date antérieure au 01/01/1980 :
  3. <entrée type="date" nom="anniversaire" max="1979-12-31">
  5. Entrez une date après le 01/01/2000 :
  6. <entrée type="date" nom="anniversaire" min="02/01/2000">
  8. Quantité (entre 1 et 5) :
  9. <entrée type="numéro" nom="quantité" min="1" max="5">


attribut multiple
L'attribut multiple est un attribut booléen L'attribut
multiple spécifie que plusieurs valeurs peuvent être sélectionnées dans l'attribut élément.
Remarque : L'attribut multiple s'applique aux types de balises suivants : email et file. : e-mail et fichier.
Exemple
Télécharger plusieurs fichiers :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. Sélectionner des images : <saisie type= "fichier" nom="img" multiple>


Attribut de motif
L'attribut pattern décrit une expression régulière utilisée pour valider la valeur de l'élément
Remarque : l'attribut pattern s'applique aux types de balises 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 XML/HTMLCopier le contenu dans le presse-papiers
  1. Code pays : <saisie type= "texte" nom="code_pays" motif="[A-Za-z]{3}" titre=" Code pays à trois lettres">


Attribut d'espace réservé
L'attribut d'espace réservé fournit une indication 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 suivants : texte, recherche, URL, téléphone, e-mail et mot de passe.
Exemple
texte d'invite du champ de saisie t :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <entrée type="texte" nom="fname" espace réservé="Prénom"> 


attribut obligatoire
l'attribut obligatoire est un attribut booléen
l'attribut obligatoire spécifie que le champ de saisie doit être rempli avant la soumission (ne peut pas être vide).
Remarque : L'attribut obligatoire s'applique aux types de balises suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier.
Instance
Champ de saisie qui ne peut pas être vide :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. Nom d'utilisateur : <entrée type="texte" nom="usrname" obligatoire>


Attribut d'étape
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.
Astuce : L'attribut step peut être utilisé avec les attributs max et min pour créer une valeur de plage.
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
précise que l'étape d'entrée est 3 :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <entrée type="numéro" nom="points" étape="3"> 


Élément
HTML5 introduit également un nouvel élément 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 et