Organisez de manière exhaustive les éléments liés aux formulaires !

Formulaires originaux HTML et contrôles de formulaire

éléments de formulaire

Les éléments ne généreront pas de parties visuelles. Vous pouvez épingler le contenu principal tel que l'identifiant, la classe, le style, etc., et également spécifier des attributs d'événement tels que onclick.

De plus, il comprend également une action (précise l'adresse à laquelle le formulaire saute lorsque le bouton est confirmé dans le tableau autonome), une méthode (précise le type de demande envoyé lors de la soumission du formulaire, la valeur peut être obtenue ou post), enctype ( Spécifiez le jeu de caractères utilisé pour encoder le contenu de l'expression), name (spécifiez le nom unique du formulaire), target (spécifiez quelle méthode est applicable pour ouvrir l'URL cible). [Recommandé : Tutoriel vidéo HTML]

élément d'entrée

:

<input id="password" name="password" style="password" />

Champs cachés :

<input id="hidden" name="hidden" style="hidden" />

Bouton radio

<input id="radio" name="radio" style="radio" />

case à cocher

<input id="checkbox" name="checkbox" style="checkbox" />

Champ d'image

<input id="image" name="image" style="image" />

Champ de téléchargement de fichier

<input id="file" name="file" style="file" />

Bouton d'envoi

<input id="submit" name="submit" style="submit" />

Bouton de réinitialisation

<input id="reset" name="reset" style="reset	" />

Aucune action bouton

<input id="button" name="buton" style="button" />

Quelques attributs de focus of

checked

 : Définissez si le bouton radio et la case à cocher sont initialement sélectionnés. disabled
 : utilisez cet élément lors du réglage du premier chargement. maxlength
 : Cet attribut est un nombre qui spécifie le nombre maximum autorisé à être saisi dans la zone de texte. lecture seule
 : La valeur dans la zone de texte spécifiée ne peut pas être modifiée par l'utilisateur (peut être modifiée à l'aide du script js). Cet attribut est un attribut qui prend en charge les valeurs booléennes, indiquant que la valeur de cet élément est en lecture seule. size
 : La valeur de cet attribut est un nombre qui précise la largeur de l'élément calcium. src
: Spécifiez l'URL de l'image affichée dans le champ image. width
: Spécifiez la largeur de l'image affichée dans le champ image. heigeht
 : Précisez la hauteur de l'image affichée dans le champ image. élément label

l'élément label peut spécifier des attributs de base tels que l'identifiant, la classe, le style, etc., et peut également spécifier des attributs d'événement tels que onclick. De plus, vous pouvez également spécifier un attribut for, qui spécifie à quel contrôle de formulaire l'étiquette est associée. L'utilisation est for="", et l'identifiant du contrôle associé est entre guillemets.

élément bouton

est utilisé pour définir un bouton. Vous pouvez spécifier une familiarité de base telle que l'identifiant, la classe, le style, etc., et vous pouvez également définir des attributs d'événement tels que onclick. De plus, vous pouvez également spécifier les éléments suivants.

disabled

 : Spécifie si ce bouton est désactivé. name
 : Spécifiez un nom unique pour le bouton. Le nom de l'attribut doit être cohérent avec l'identifiant. type
 : Spécifiez le type de bouton auquel ce bouton appartient. La valeur de l'attribut ne peut être qu'un bouton, réinitialiser ou soumettre. value
 : Spécifiez la valeur initiale du bouton. Peut être modifié via le script js. éléments select et option

sont utilisés pour créer des zones de liste ou des menus déroulants. L'élément calcium doit être combiné avec l'élément /> élément Représente une liste ou un élément de menu.

L'élément peut spécifier des attributs de base tels que l'identifiant, la classe, le style, etc. Cet élément peut spécifier l'attribut d'événement onchange - lorsque l'option sélectionnée dans la zone de liste ou l'élément de liste déroulante change, l'élément L'événement onchange est déclenché.

De plus, l'élément peut également spécifier les attributs suivants.

disabled

 : défini pour désactiver la zone de liste et le menu déroulant. La valeur de cet attribut peut uniquement être désactivée ou la valeur de l'attribut est omise. multiple
 : définissez si la zone de liste et le menu déroulant autorisent les sélections multiples. Une fois défini pour autoriser plusieurs sélections, l'élément générera automatiquement une zone de liste. taille
 : Spécifiez le nombre d'éléments de liste que la zone de liste et le menu déroulant peuvent implémenter en même temps. Une fois défini pour autoriser plusieurs sélections, l'élément générera automatiquement une zone de liste. L'élément ne peut contenir que les deux sous-éléments suivants.

 : utilisé pour définir des éléments de liste ou des éléments de menu. Cet élément ne peut contenir que du texte comme texte pour cette option.
 : utilisé pour définir des éléments de liste ou des groupes de lignes de menu. Cet élément ne peut contenir que des éléments enfants Les éléments peuvent spécifier des éléments principaux tels que l'identifiant, la classe, le style, etc., et peuvent également spécifier des attributs d'événement tels que onclick.

De plus, vous pouvez également définir les éléments suivants.

disabled

 : Spécifie de désactiver cette option. La valeur de cet attribut peut uniquement être désactivée. selected
 : Spécifie si l'état initial de la boîte de flux est sélectionné. La valeur de cet attribut peut uniquement être sélectionnée. value
 : Précisez la valeur du paramètre de requête correspondant à cette option. L'élément peut spécifier des attributs de base tels que l'identifiant, la classe, le style, etc. Il peut également spécifier des attributs de réponse à un événement tels que onclick. De plus, il existe les attributs suivants.

label : Spécifiez le libellé de ce groupe d'options. Cet attribut est obligatoire.
disabled : défini pour désactiver toutes les options de ce groupe d'options. La valeur de l'attribut peut uniquement être désactivée ou omise.

L'élément textarea amélioré HTML5

est utilisé pour générer des zones de texte multilignes. Vous pouvez spécifier des éléments principaux tels que l'identifiant, la classe, le style, etc., et vous pouvez également spécifier des attributs d'événement tels que onclick. En raison de la particularité de la zone de texte, elle peut recevoir des entrées de l'utilisateur et l'utilisateur peut sélectionner le texte dans la zone de texte. Vous pouvez donc également spécifier deux attributs, onselect et onchange, qui s'appliquent au moment où la zone de texte est sélectionnée et lorsque le texte est modifié. En plus de cela, cet élément peut également spécifier les éléments suivants.

cols : Précisez la largeur du champ de texte, obligatoire.
rows : Spécifie la hauteur du texte, qui est obligatoire.
disabled : Spécifie que ce champ de texte est désactivé. La valeur de l'attribut peut uniquement être désactivée.
readonly : Le champ de texte spécifié est en lecture seule. La valeur de cet attribut ne peut être qu'en lecture seule.
maxlength : Définissez le nombre maximum de caractères pouvant être saisis dans ce champ de texte multiligne.
wrap : Spécifiez s'il faut ajouter des sauts de ligne aux champs de texte multilignes. Cet attribut prend en charge deux valeurs d'attribut : soft et hard. Si la valeur de l'attribut est définie sur hard, l'attribut cols doit être spécifié. Si les caractères saisis dépassent la largeur spécifiée par cols et provoquent un retour à la ligne, le champ de texte multiligne ajoutera automatiquement un caractère de nouvelle ligne à la nouvelle ligne lorsque le texte est défini sur hard. le formulaire est soumis. Les éléments

fieldset et legend

peuvent être utilisés pour regrouper des éléments de formulaire au sein d'un formulaire. , cet élément peut spécifier des éléments de base tels que l'identifiant, la classe, le style, etc., et peut également spécifier les trois attributs suivants.

name : Spécifiez le nom de l'élément
form : La valeur de cet attribut doit être un identifiant avec un élément valide, qui est utilisé pour spécifier que l'élément
disabled : Cet attribut est utilisé pour désactiver l'élément de formulaire. Cette propriété est une propriété qui prend en charge les valeurs booléennes.

Nouveaux attributs de formulaire HTML

Attributs de formulaire de formulaire

html5 a ajouté des attributs de formulaire à tous les contrôles de formulaire, il est donc plus flexible lors de la définition des contrôles de formulaire sur la page, et vous pouvez empêcher et organiser les contrôles de formulaire à volonté. une plus grande flexibilité.

Attribut Formaction

HTML5 gère le problème selon lequel le même formulaire contient à la fois des boutons d'enregistrement et de connexion. Formaction peut être spécifié pour sumit, reset et image. Cet attribut peut soumettre dynamiquement le formulaire à différentes URL.

attribut formxxxx

formxxxx est similaire à l'attribut formaction. Pour sumit, reset et image, vous pouvez spécifier formenctype, formmethod, formtarget et d'autres attributs, parmi lesquels :

formenctype : cet attribut permet au bouton de devient dynamiquement un attribut enctype.
formmethod : Cet attribut permet au bouton de se transformer dynamiquement en attribut de méthode.
formtarget : Cet attribut permet au bouton de passer dynamiquement à l'attribut cible.

Attribut de mise au point automatique

C'est un attribut très couramment utilisé. Sa fonction est de se concentrer automatiquement sur la position correspondante lors de l'ouverture d'une page Web. L'utilisation est de l'ajouter au code correspondant, tel que : <input type="password" name="name" autofocus />La fonction de l'autofocus dans ce code est de se concentrer automatiquement sur la page lors de l’ouverture de la page Web. <input type="password" name="name" autofocus />该代码中autofocus的作用就是在打开网页时自动聚焦到该密码框。

placeholder属性

这个属性也非常的常用，作用就是在用户为输入数据的文本框中给出对应的提示，如：<input type="text" name="username" palceholder="请输入用户名" />；

attribut placeholder

Cet attribut est également très couramment utilisé. Sa fonction est de donner des invites correspondantes dans la zone de texte où l'utilisateur saisit des données, telles que : <input type="text" name="username" palceholder= "Veuillez saisir votre nom d'utilisateur" />;La fonction de l'espace réservé dans ce code est d'afficher, veuillez saisir votre nom d'utilisateur lorsque l'utilisateur n'a pas saisi de données dans la zone de texte, ce qui rend la page plus conviviale .

Attribut liste

Cet attribut est également très pratique Avant la spécification html5, il n'y avait aucun composant similaire à ComboBox dans les attributs du formulaire html. L'attribut list de html5 compense simplement cette lacune. La valeur de l'attribut list doit être l'ID d'un composant .../>

L'élément est équivalent à un élément invisible, utilisé pour générer un menu déroulant masqué. peut contenir les mêmes éléments enfants que l'élément Cet élément est utilisé conjointement avec l'élément spécifié avec l'attribut list. Lorsque la zone de texte de l'attribut de liste est double-cliquée, le menu déroulant généré par

Attribut de saisie semi-automatique

Cette option est utilisée pour contrôler s'il faut afficher automatiquement l'historique de remplissage précédent lorsque vous cliquez sur la zone de texte. Le navigateur démarre cette fonction par défaut. Cet attribut prend en charge deux valeurs d'attribut :
on : ouvrir la saisie semi-automatique. , zone de texte Un menu déroulant apparaîtra ci-dessous.

🎜off🎜 : désactivez la saisie semi-automatique, le menu déroulant ne s'affichera pas sous la zone de texte. 🎜

l'attribut de contrôle de l'étiquette

html5 fournit un attribut de contrôle pour l'élément , qui est utilisé pour accéder à l'élément de formulaire associé à l'élément

L'attribut labels dans le formulaire

Il existe une relation un-à-plusieurs entre l'élément de formulaire et l'élément l'attribut control. L'élément form obtient l'attribut labels pour l'élément L'attribut

selectionDirection dans la zone de texte

html5 ajoute un nouvel attribut selectionDirection en lecture seule pour les zones de texte sur une seule ligne et les champs de texte sur plusieurs lignes, qui est utilisé pour renvoyer la direction du texte dans la zone de texte.

• Lorsque l'utilisateur sélectionne du texte dans le sens avant, la valeur de retour est vers l'avant
• Lorsque l'utilisateur sélectionne du texte dans le sens inverse, la valeur de retour est vers l'arrière
• Lorsque l'utilisateur ne sélectionne pas de texte, la valeur de retour est la dernière sélection effectuée par l'utilisateur

Nouveau dans les éléments de formulaire HTML5

Éléments d'entrée riches en fonctions

HTML5 ajoute les types possibles suivants pour l'élément

color : Générez un sélecteur de couleur, la valeur de value est une valeur de couleur sous la forme #xxxxxx.
date : Générez un sélecteur de date.
time : Générez un sélecteur de temps.
datetime-local : Générez un sélecteur de date et d'heure local.
week : Générez une zone de texte permettant à l'utilisateur de sélectionner la semaine.
mois : un sélecteur de mois pour deviner la vie.
max : La valeur maximale de la date et de l'heure spécifiées.
step : Spécifiez la taille de l'étape de la date et de l'heure.
email : Générez une zone de saisie E-mail, et le navigateur vérifiera automatiquement si l'E-mail saisi est conforme au format.

multiple : Cet attribut prend en charge le type booléen. Si cette valeur d'attribut est spécifiée, cela signifie que plusieurs adresses e-mail peuvent être saisies, séparées par des virgules anglaises.

tel : Générez une zone de texte pour saisir un numéro de téléphone.
ur : Générez une zone de texte pour saisir une URL, et le navigateur vérifiera automatiquement si l'URL saisie est conforme au format.
numéro : Générez une zone de texte qui ne peut saisir que des chiffres.

min : La valeur minimale de la valeur spécifiée.
max : La valeur maximale de la valeur spécifiée.
step : Spécifiez la taille du pas du nombre.

range : Générez une barre de déplacement avec les attributs suivants :

min : La valeur minimale de la barre de déplacement.
max : La valeur maximale de la barre de déplacement.
step : Spécifiez la taille du pas de la barre de déplacement.

recherche : générez une zone de texte spécifiquement pour saisir des mots-clés de recherche.

élément de sortie

HTML5 ajoute un nouveau contrôle de formulaire , qui est utilisé pour afficher la sortie. En plus de spécifier des attributs de base tels que l'identifiant, la classe et le style, cet élément peut également spécifier les attributs suivants.

for : Cet attribut affichera la valeur de cet élément ou de ces éléments lors du freinage de l'élément.

élémentmeter

HTML5 ajoute également un nouvel élément , qui représente un compteur de comptage avec des valeurs maximales et minimales connues. En plus de définir des fonctionnalités de base telles que l'identifiant, la classe, le style, etc., cet élément peut également définir les attributs suivants.

value : Spécifiez la valeur actuelle du compteur de comptage. La valeur par défaut est 0.
min : Spécifie la valeur minimale de l'instrument de comptage, la valeur par défaut est 0.
max : Spécifie la valeur maximale de l'instrument de comptage. La valeur par défaut est 1.
low : Spécifie la valeur minimale de la plage spécifiée de l'instrument de comptage, qui doit être supérieure ou égale à la valeur de min.
high : Spécifiez la valeur maximale de la plage spécifiée de l'instrument de comptage, qui doit être inférieure ou égale à la valeur maximale.
optimum : Spécifiez la valeur optimale de la plage effective de l'instrument de comptage. L'élément

progress

est utilisé pour représenter une barre de progression. En plus de spécifier des attributs de base tels que l'identifiant, la classe et le style, cet élément peut également spécifier les attributs suivants.
max : Spécifiez la valeur lorsque la barre de progression est terminée.
value : Spécifiez la valeur de progression actuelle.

Nouvelle validation côté client de HTML5

Utiliser les attributs de validation pour effectuer la validation

HTML5 ajoute les attributs de validation suivants aux contrôles de formulaire.

obligatoire : Cet attribut précise que le champ du formulaire doit être renseigné.
pattern : Cet attribut spécifie que la valeur du contrôle de formulaire doit être conforme à l'expression régulière spécifiée.
min, max, step : Ces trois attributs ne sont valables que pour les éléments de type numérique et de type date. Cet élément doit être compris entre min~max et être conforme à la taille du pas.

Appelez la méthode checkValidity pour vérification

• Si l'objet de formulaire renvoie true en appelant la méthode checkValidity(), cela signifie que l'entrée de tous les éléments du formulaire dans le formulaire est valide

• Si l'objet de formulaire appelle le checkValidity(), il renvoie vrai, indique que tous les éléments de formulaire de l'expression réussissent la vérification d'entrée.

Désactivez la validation

• Ajoutez l'attribut novalidate à l'élément , qui est un attribut qui prend en charge les valeurs booléennes.

• Définissez l'attribut formnovalidate pour les éléments de soumission et de bouton Lorsque l'utilisateur soumet le formulaire via le bouton de soumission, le formulaire désactive la fonction de vérification.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!