Maison  >  Article  >  interface Web  >  Quels sont les attributs de la balise input en html ?

Quels sont les attributs de la balise input en html ?

醉折花枝作酒筹
醉折花枝作酒筹original
2021-06-04 10:11:148165parcourir

Les attributs de la balise d'entrée en HTML sont : type, obligatoire, motif, étape, espace réservé, lecture seule, désactivé, taille, formulaire, longueur maximale, autofocus, min, max, etc.

Quels sont les attributs de la balise input en html ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Parlons d'abord des attributs de la balise d'entrée html :

1.type : Cet attribut est le seul attribut qui doit être saisi dans la balise d'entrée. Bien sûr, il peut également être saisi. S'il est laissé vide, la valeur par défaut est type = "text". Les valeurs spécifiques dont il dispose seront discutées plus tard.

2.required : indiquez si un champ est obligatoire. Si un champ est marqué comme obligatoire = "obligatoire" (en mode strict), ou obligatoire (en mode détendu) (ps : les attributs suivants sont écrits de la même manière, ils ne sont donc pas écrits un par un), et le La valeur de ce champ est vide ou la valeur renseignée est une valeur invalide, le formulaire ne peut pas être soumis. Qu'est-ce qu'une valeur invalide ? Regardez l'attribut pattern.

Créez une base de données web front-end full-stack (répertoire général) pour apprendre plus rapidement et avoir une meilleure compréhension. Vous le méritez (mis à jour en permanence)

3.modèle : ceci. attribut Contient une expression régulière de style JavaScript. Le contenu d'entrée doit correspondre complètement à l'expression régulière, sinon le contenu d'entrée sera invalide. Vous ne connaissez pas les expressions régulières ? Vous pouvez jeter un œil aux expressions régulières JavaScript.

4.min max : Ces deux attributs sont utilisés pour la date, l'heure, l'heure et d'autres entrées, ainsi que le nombre et la plage. Comme son nom l’indique, leur rôle est de limiter les valeurs maximales et minimales.

5.step : Semblable à max min, sa fonction est de fournir un bouton sur lequel on peut cliquer de haut en bas. Par exemple, le nombre actuel est 1 et vous définissez step = "5". bouton haut et il deviendra 6. .

6. espace réservé : il n'y a pas grand chose à dire sur cet attribut. Tout le monde devrait le connaître. Il est généralement utilisé pour inviter l'utilisateur à saisir du texte, il sera écrasé par. le texte saisi.

7.readonly : Comme son nom l'indique, cette propriété rendra le contrôle de formulaire vide non modifiable. Le fait qu'il ne soit pas modifiable ici ne signifie pas qu'il est désactivé, mais que le texte ne peut pas être modifié. Par exemple, la radio et les cases à cocher sont intrinsèquement non modifiables, cet attribut n'a donc aucun sens pour eux.

8.disabled : Cet attribut désactive un élément de formulaire. Ceci est désactivé, désactivant complètement tous les éléments du formulaire à l'exception de be6d67dae90cc1ad6469079e163d0939.

9.maxlength : Cet attribut est utilisé pour limiter le nombre maximum de mots saisis par l'utilisateur.

10.size : Cela n'a plus d'effet pratique. Le contrôle de la taille est désormais presque entièrement contrôlé par CSS.

11.form : En HTML5, il n'est pas nécessaire d'imbriquer les contrôles de formulaire dans un formulaire. Le nouvel attribut de formulaire peut associer des éléments de formulaire à n'importe quel formulaire de la page. Il peut également être imbriqué dans un formulaire et soumis avec un autre formulaire. Le code est le suivant :

<form id="form1">
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>
</form>

De cette façon, le formulaire et la saisie sont connectés. Si l'entrée n'a pas d'attribut de formulaire, elle sera associée au formulaire le plus proche.

12.autocomplete : comme son nom l'indique, la saisie semi-automatique, l'utilisateur saisit une partie de la saisie et le reste est automatiquement complété. Le navigateur doit enregistrer le contenu saisi par l'utilisateur afin qu'il puisse être complété automatiquement la prochaine fois.

13.autofocus : Cet attribut signifie que ce contrôle de formulaire prend automatiquement le focus lorsque la page est chargée.

Ce qui précède sont les attributs de la balise d'entrée html.

Informations étendues

Parlons maintenant de l'utilisation de la balise d'entrée :

Regardons d'abord un exemple de saisie HTML tag :

<form action="demo_form.asp">
用户名: <input type="text" name="fname"><br>
输入框: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>

L'effet de ceci est tel que montré sur l'image :

L'effet est toujours OK, et c'est aussi le style de zone de saisie le plus simple. Ce dont nous allons parler aujourd'hui doit être simple, et simple signifie facile à comprendre.

Parlons du résumé d'utilisation de la balise d'entrée html :

Zone de texte :

Dans le formulaire, Les zones de texte sont utilisées pour permettre aux utilisateurs de saisir des lettres, des chiffres, etc., tels que le nom, l'adresse, etc. de l'utilisateur.

Le format du code est le suivant :

<input type=”text” name=”...” size=”...” maxlength=”...” value=”...”/>

2. Zone de mot de passe :

est un champ de texte spécial utilisé pour saisir les mots de passe.

Le format du code est le suivant :

<input type=”password” name=”...”  size=”...” maxlength=”...” value=”...”/>

3. Domaine caché :

est un élément invisible utilisé pour collecter ou envoyer des informations, pour le web accès à la page Pour l'utilisateur, le domaine caché est invisible. Lorsque le formulaire est soumis, le champ masqué enverra des informations au serveur avec le nom et la valeur que vous avez définis lors de sa configuration.

Le format du code est le suivant :

<input type=”hidden” name=”...” value=”...”/>

4. Bouton radio :

Utilisez le bouton radio lorsque vous souhaitez que l'utilisateur en choisisse un parmi un bouton nombre limité d’options. Par exemple, nous choisissons notre poids lors de l'inscription.

Le format du code est le suivant :

<input type=”radio” name=”...” value=”...”/>

5. Case à cocher :

Permet de sélectionner plusieurs options parmi les options. Chaque case à cocher est un élément indépendant et doit avoir un nom unique.

Le format du code est le suivant :

<input type=”checkbox” name=”...” value=”...”/>

6. Boîte de téléchargement de fichier :

Le format du code est le suivant :

<input type”file” name=”...”>

注意:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明:multipart 控件是否上传多文件

推荐学习:html视频教程

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn