Le meilleur didacticiel HTML5 Propriétés du formulaire en 2024, dans ce didacticiel, vous pouvez apprendre Propriétés HTML5 nouvelle forme,<Form> / <input> attribut autocomplete,Exemples,<Form> propriété novalidate,Exemples,<Entrée> attribut autofocus,Exemples,<Entrée> propriété de formulaire,Exemples,<Entrée> propriété Formaction,Exemples,<Entrée> propriété formenctype,Exemples,<Entrée> Propriété formmethod,Exemples,<Entrée> Propriété formnovalidate,Exemples,<Entrée> Propriété formtarget,Exemples,<Entrée> hauteur et largeur des attributs,Exemples,<input> Liste des propriétés,Exemples,<Entrée> min et max attributs,Exemples,<input> propriétés multiples,Exemples,<Entrée> propriété de motif,Exemples,<Entrée> attribut placeholder,Exemples,<Entrée> Attribut requis,Exemples,<input> attributs d'étape,Exemples,HTML5 <input>,

HTML5 Propriétés du formulaire

Propriétés HTML5 nouvelle forme

<Formulaire> HTML5 et balise <input> ajoute plusieurs nouvelles propriétés.

<form> nouveaux attributs:

• autocomplete
• novalidate

<entrée> Nouvelles propriétés:

• autocomplete
• autofocus
• forme
• Formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• hauteur et largeur
• liste
• min et max
• multiple
• motif (regexp)
• espace réservé
• requis
• étape

<Form> / <input> attribut autocomplete

attribut autocomplete spécifie le champ de formulaire ou d'entrée doit avoir autocomplete.

Lorsque les utilisateurs commencent à taper dans le champ de saisie semi-automatique, le navigateur doit afficher les options pour remplir dans ce domaine.

Astuce: autocomplete attribut possible élément de formulaire est activé, et l'élément d'entrée est désactivé.

Remarque: autocomplete appliquer balise <form>, et les types de balise <input> suivants: texte, recherche, URL, téléphone , email, mot de passe, datepickers, plage et la couleur.

Exemples

formulaire HTML dans autocomplete ouverte (un autocomplete champ de saisie d'arrêt):

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

Essayez »

Astuce: Certains navigateurs, vous pouvez avoir besoin d'activer la fonctionnalité de saisie semi - automatique, afin de ramasser la propriété.

<Form> propriété novalidate

Une propriété booléenne de la propriété novalidate.

attribut novalidate spécifie lors de la soumission du formulaire ne doit pas valider le formulaire d'entrée ou d'un domaine.

Exemples

Sans vérification soumission des données de formulaire

<Form action = "demo-form.php" novalidate> E-mail: <input type = "email" name = "user_email"> <entrée type = "submit"> </ Form>

Essayez »

<Entrée> attribut autofocus

attribut autofocus est un attribut booléen.

attribut autofocus spécifie quand la page se charge, le domaine reçoivent automatiquement le focus.

Exemples

Laissez "Prénom" champ de saisie entrer dans la mise au point automatique à la page charge:

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

Essayez »

<Entrée> propriété de formulaire

attribut spécifie un champ sous forme d'entrée appartient à une ou plusieurs formes.

Astuce: Pour citer plus d'une forme, utilisez une liste séparée par des espaces.

Exemples

Situé sous forme de formulaire en dehors du champ de saisie se réfère au formulaire HTML (la forme est encore une entrée de forme fait partie de):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

Essayez »

<Entrée> propriété Formaction

La propriété Formaction est utilisé pour décrire l'URL de la soumission du formulaire.

Le Formaction attribue override <form> dans l'attribut action.

Remarque: Le Formaction attribut type = "submit" et type = "image".

Exemples

HtmlForm soumettre le formulaire ci-dessous contient le bouton deux adresses différentes:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

Essayez »

<Entrée> propriété formenctype

formenctype attribut décrit le formulaire est soumis à l'encodage des données du serveur (uniquement pour la méthode de formulaire de form = "post" formulaire)

remplacements de propriétés formenctype ENCTYPE attribuer des éléments de formulaire.

Principal: Ce type d'attribut = "submit" et type = "image" est utilisé en conjonction.

Exemples

Le premier bouton Soumettre pour envoyer les données de formulaire est codé par défaut, le deuxième bouton soumettre à "multipart / form-data" format de codage pour envoyer les données de formulaire:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

Essayez »

<Entrée> Propriété formmethod

attribut formmethod définit la forme de façon soumission.

propriété formmethod couvrant la <form> méthode attribut de l'élément.

Note: Cet attribut peut être utilisé avec le type = "submit" et type = "image" est utilisé en conjonction.

Exemples

Redéfinir la soumission du formulaire à titre d'exemple:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

Essayez »

<Entrée> Propriété formnovalidate

propriété novalidate est une propriété booléenne.

attribut novalidate décrit les éléments <input> ne doivent pas être validés lorsque le formulaire est soumis.

attributs formnovalidate remplacent attribut novalidate <form> élément.

Remarque: formnovalidate attribut type = "submit pour une utilisation avec

Exemples

Deux boutons soumettre le formulaire (non applicable à la vérification):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

Essayez »

<Entrée> Propriété formtarget

attribut formtarget spécifie un nom ou un mot-clé pour indiquer les données d'affichage reçues après la soumission du formulaire.

Les remplacements de propriétés formtarget <form> attribut cible de l'élément.

Note: formtarget attribut type = "submit" et type = "image" est utilisé en conjonction.

Exemples

Deux boutons soumettre le formulaire affiché dans des fenêtres différentes:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

Essayez »

<Entrée> hauteur et largeur des attributs

attributs height et width spécifiées pour le type de <input> hauteur et la largeur balise image image.

Remarque: hauteur et largeur des propriétés appliquent uniquement le type d'image <input> tag.

Astuce: L'image sera généralement spécifier la hauteur et la largeur des attributs.Si l'image régler la hauteur et la largeur de l'espace requis pour l'image lorsque la page est chargée sera conservé. Sans ces attributs, le navigateur ne connaît pas la taille de l'image, et ne peut pas mettre de côté l'espace approprié. Photos pendant le processus de chargement seront des changements de mise en page (bien que l'image a été chargé).

Exemples

Définit une image bouton submit, utilisez les attributs height et width:

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

Essayez »

<input> Liste des propriétés

attribut de liste datalist spécifie les champs de saisie. datalist est une liste d'options pour les champs de saisie.

Exemples

Prédéfinie dans <datalist> dans <input> Valeur:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Essayez »

<Entrée> min et max attributs

min, max et attributs d'étape sont utilisés comme types d'entrée contenant des nombres ou dates Limited (contraintes).

Note: min, max, et les attributs de pas applicables aux types de balise <input> suivants: sélecteurs de date, le nombre et la portée.

Exemples

<Entrée> éléments du réglage minimum et maximum:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Essayez »

<input> propriétés multiples

attribut multiple est un attribut booléen.

multiples spécifie attribut <input> pour sélectionner plusieurs valeurs.

Remarque: plusieurs propriétés sont applicables aux types de balise <input> suivants: e - mail et fichier:

Exemples

Téléchargez plusieurs fichiers:

Select images: <input type="file" name="img" multiple>

Essayez »

<Entrée> propriété de motif

attribut pattern décrit une expression régulière utilisée pour valider la valeur de <input> éléments.

Remarque: attribut patternapplique aux types de balise <input> suivants: texte, recherche, URL, tel , email, et mot de passe.

Astuce: Il est utilisé pour le global titre attribut décrit le mode.

Astuce: Vous pouvez dans notre tutoriel JavaScript pour en apprendre davantage sur le contenu d'une expression régulière

Exemples

L'exemple suivant montre trois lettres ne contiennent que champ de texte (pas de chiffres ou caractères spéciaux):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Essayez »

<Entrée> attribut placeholder

attribut placeholder fournit un indice (indice), décrire la valeur attendue du champ d'entrée.

Un bref rappel sera affiché sur le champ de saisie avant que la valeur d'entrée de l'utilisateur.

Remarque: l' attribut d'espace réservéapplique aux types de balise <input> suivants: texte, recherche, URL, téléphone , e - mail et mot de passe.

Exemples

champ de saisie de texte invite t:

<input type="text" name="fname" placeholder="First name">

Essayez »

<Entrée> Attribut requis

attribut obligatoire est un attribut booléen.

attribut obligatoire spécifie qu'un champ de saisie doit être rempli (non vide) avant de le soumettre.

Remarque: les attributs requispour les types de balise <input> suivants: texte, recherche, URL, téléphone , email, mot de passe, sélecteurs de date, numéro, case à cocher, la radio et le fichier.

Exemples

Impossible champs de saisie vides:

Username: <input type="text" name="usrname" required>

Essayez »

<input> attributs d'étape

attribut step pour le champ d'entrée spécifie les intervalles de numéros juridiques.

Si l'étape = "3", les numéros juridiques pourraient être -3,0,3,6, etc.

Astuce: attribut étapepeut créer une valeur max régionale et min attributs.

Remarque: l' étape d' attribut types utilisés en conjonction avec le type suivant: nombre, plage, date, datetime , datetime-local, le mois, le temps et la semaine.

Exemples

Prédéterminé entrée étape étape 3:

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

Essayez »

HTML5 <input>