La value d' attribut
La value attribut indique la valeur initiale pour un champ d'entrée:
Exemple
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Essayez vous - même » La readonly Attribute
Le readonly attribut spécifie que le champ d'entrée est en lecture seule (cannot be changed) :
Exemple
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Essayez vous - même » La readonly attribut n'a pas besoin d' une valeur. Il est le même que l'écriture readonly = « lecture seule ».
Les disabled Attribute
L' disabled attribut indique que le champ d'entrée est désactivé.
Un élément est désactivé non utilisable et non cliquable.
Les éléments désactivés ne seront pas soumis.
Exemple
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Essayez vous - même » Les disabled attribut n'a pas besoin d' une valeur. Il est le même que l'écriture désactivé = « désactivé ».
La size Attribute
La size attribut indique la taille (in characters) pour le champ de saisie:
Exemple
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Essayez vous - même » Le maxlength Attribute
Le maxlength attribut spécifie la longueur maximale autorisée pour le champ de saisie:
Exemple
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Essayez vous - même » Avec un maxlength attribut, le contrôle d'entrée n'acceptera pas plus que le nombre de caractères autorisés.
L'attribut ne fournit aucune rétroaction. Si vous souhaitez alerter l'utilisateur, vous devez écrire le code JavaScript.
restrictions d'entrée ne sont pas à toute épreuve. JavaScript offre de nombreuses façons d'ajouter des entrées illégales.
Pour limiter en toute sécurité l' entrée, les restrictions doivent être vérifiées par le récepteur (the server) ainsi.
Les attributs HTML5
HTML5 ajouté les following attributs <input> :
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
et les following attributs <form> :
- autocomplete
- novalidate
La autocomplete - autocomplete d' attributs
Le autocomplete attribut indique si un champ de formulaire ou entrée doit avoir autocomplete ou désactiver.
Lorsque autocomplete est activé, le navigateur automatiquement des valeurs complètes basées sur les valeurs que l'utilisateur a entré auparavant.
Tip: Il est possible d'avoir autocomplete "on" pour la forme, et "off" pour les champs d'entrée spécifiques, ou vice versa.
L' autocomplete attribut fonctionne avec <form> et les éléments suivants <input> types: text, search, url, tel, email, password, datepickers, range, and color de text, search, url, tel, email, password, datepickers, range, and color la text, search, url, tel, email, password, datepickers, range, and color .
Exemple
Un formulaire HTML avec autocomplete - (and off for one input field) autocomplete sur (and off for one input field) d' (and off for one input field) :
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form> Essayez vous - même » Astuce: Dans certains navigateurs , vous devrez peut - être activer la autocomplete - autocomplete fonction pour que cela fonctionne.
Le novalidate Attribute
Le novalidate attribut est une balise <form> attribut.
Lorsqu'il est présent, novalidate précise que ne doivent pas être validées les données de formulaire , lorsqu'elles sont présentées.
Exemple
Indique que le formulaire ne doit pas être validée lors de la soumission:
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form> Essayez vous - même » La autofocus au autofocus d' attributs
L' autofocus attribut est un attribut booléen.
Lorsqu'il est présent, il précise qu'un <input> élément doit se concentrer automatiquement lorsque la page se charge.
Exemple
Laissez le "First name" d' "First name" champ de saisie automatiquement se concentrer lorsque le chargement de la page:
First name:<input type="text" name="fname" autofocus> Essayez vous - même » La form d' attribut
La form attribut spécifie une ou plusieurs formes d' un <input> élément appartient.
Tip: Pour faire référence à plus d'une forme, utilisez une liste séparée par des espaces de form ids .
Exemple
Un input field situé à l' extérieur du formulaire HTML (but still a part of the form) :
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1"> Essayez vous - même » Le formaction Attribute
Le formaction attribut spécifie l'URL d'un fichier qui traitera le contrôle d'entrée lorsque le formulaire est soumis.
Le formaction attribut remplace l' ' action attribut de la balise <form> élément.
Le formaction attribut est utilisé avec le type = "submit" et type = "image".
Exemple
Un formulaire HTML avec deux boutons de soumission, avec différentes actions:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form> Essayez vous - même » Le formenctype Attribute
Le formenctype attribut spécifie la forme-données doivent être codées lors de la soumission au serveur (only for forms with method="post" ) les (only for forms with method="post" ) .
Le formenctype attribut remplace le enctype attribut de la balise <form> élément.
Le formenctype attribut est utilisé avec le type="submit" et type="image" .
Exemple
Envoyer form-data de (the first submit button) "multipart/form-data" (the second submit button) form-data qui est codé par défaut (the first submit button) d' (the first submit button) , et codée comme "multipart/form-data" (the second submit button) d' (the second submit button) :
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form> Essayez vous - même » Le formmethod Attribute
Le formmethod attribut définit la méthode HTTP d'envoi form-data à l'URL d'action.
Le formmethod attribut remplace la method attribut de la balise <form> élément.
Le formmethod attribut peut être utilisé avec type="submit" et type="image" .
Exemple
Le second bouton d'envoi remplace la méthode HTTP de la forme:
<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form> Essayez vous - même » Le formnovalidate Attribute
L' novalidate attribut est un attribut booléen.
Lorsqu'il est présent, il spécifie que la <input> élément ne doit pas être validé lorsqu'il est soumis.
Le formnovalidate attribut remplace le novalidate attribut de la balise <form> élément.
Le formnovalidate attribut peut être utilisé avec type="submit" .
Exemple
Un formulaire avec deux boutons de soumission (with and without validation) :
<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form> Essayez vous - même » Le formtarget Attribute
Le formtarget attribut spécifie un nom ou un mot - clé qui indique où pour afficher la réponse reçue après la soumission du formulaire.
Le formtarget attribut remplace la target attribut de la balise <form> élément.
Le formtarget attribut peut être utilisé avec le type = "submit" et type = "image".
Exemple
Un formulaire avec deux boutons de soumission, avec des fenêtres cibles différentes:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form> Essayez vous - même » Les height et width Attributs
Les height des attributs et la largeur définissent la hauteur et la largeur d'un <input> élément.
Les height et width caractéristiques ne sont utilisées qu'avec <input type="image"> .
Toujours spécifier la taille des images. Si le navigateur ne connaît pas la taille, la page scintille alors que les images se chargent.
Exemple
Définir une image en tant que le bouton d'envoi, avec des attributs de hauteur et de largeur:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> Essayez vous - même » La list d' attributs
La list attribut se rapporte à un <datalist> élément qui contient des options prédéfinies pour un <input> élément.
Exemple
Un <input> élément avec des valeurs prédéfinies dans une <datalist> :
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist> Essayez vous - même » Les min et max Attributs
Le min et max attributs spécifie la valeur minimale et maximale pour un <input> élément.
Le min et max attributs de travail avec les types suivants: number, range, date, datetime, datetime-local, month, time and week le number, range, date, datetime, datetime-local, month, time and week le number, range, date, datetime, datetime-local, month, time and week la number, range, date, datetime, datetime-local, month, time and week .
Exemple
<Input> éléments à valeurs min et max:
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 vous - même » Le multiple Attribute
Le multiple attribut est un attribut booléen.
Lorsqu'il est présent, il indique que l'utilisateur est autorisé à entrer dans plus d'une valeur dans la <input> élément.
Le multiple attribut fonctionne avec les types suivants: email - file email et file .
Exemple
Un champ de téléchargement de fichiers qui accepte plusieurs valeurs:
Select images: <input type="file" name="img" multiple> Essayez vous - même » Le pattern d' attribut
Le pattern attribut spécifie une expression régulière que la <input> la valeur de l' élément est vérifié par rapport.
Le pattern attribut fonctionne avec les types suivants: text, search, url, tel, email, and password de text, search, url, tel, email, and password .
Astuce: Utilisez le global titre attribut pour décrire le modèle pour aider l'utilisateur.
Tip: En savoir plus sur les expressions régulières dans notre tutoriel JavaScript.
Exemple
Un champ d'entrée qui ne peut contenir que trois lettres (no numbers or special characters) de (no numbers or special characters) :
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> Essayez vous - même » L' placeholder Attribute
L' placeholder attribut spécifie un indice qui décrit la valeur attendue d'un champ d'entrée (a sample value or a short description of the format) .
L'indicateur est affiché dans la zone d'entrée avant que l'utilisateur entre une valeur.
L' placeholder attribut fonctionne avec les types suivants: text, search, url, tel, email, and password de text, search, url, tel, email, and password .
Exemple
Un champ de saisie avec un texte d'espace réservé:
<input type="text" name="fname" placeholder="First name"> Essayez vous - même » Le required d' attributs
Le required attribut est un attribut booléen.
Lorsqu'il est présent, il précise qu'un champ d'entrée doit être rempli avant de soumettre le formulaire.
Le required attribut fonctionne avec les types suivants: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file de text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file à text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .
Exemple
Un champ d'entrée requise:
Username: <input type="text" name="usrname" required> Essayez vous - même » L' step d' attribut
L' step attribut spécifie les intervalles de numéros légaux pour un <input> élément.
Exemple: si l'étape = "3", les numéros légaux pourraient être -3, 0, 3, 6, etc.
Tip: L' step attribut peut être utilisé conjointement avec le max et min attribue pour créer une gamme de valeurs juridiques.
L' step attribut fonctionne avec les types suivants: number, range, date, datetime, datetime-local, month, time and week le number, range, date, datetime, datetime-local, month, time and week le number, range, date, datetime, datetime-local, month, time and week la number, range, date, datetime, datetime-local, month, time and week .
Exemple
Un champ de saisie avec un nombre légal des intervalles spécifiques:
<input type="number" name="points" step="3"> Essayez vous - même »