Éléments et attributs liés au formulaire HTML5

Cet article présente principalement les éléments et attributs pertinents des formulaires HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

ff9c23ada1bcecdd1a0fb5d5a0f18437 :

Vous pouvez spécifier des attributs de base tels que l'identifiant, le style, la classe, etc., et vous pouvez également spécifier les attributs d'événement onclick. De plus, vous pouvez également spécifier les attributs suivants.

action : Spécifiez l'URL ou l'URI pour la soumission du formulaire.

méthode : spécifiez la méthode de demande, généralement obtenir ou publier.

enctype : Spécifie le jeu de caractères utilisé pour encoder le contenu du formulaire.

name : Spécifiez le nom unique du formulaire, généralement cohérent avec la valeur de l'attribut id.

target : Spécifiez la méthode à utiliser pour ouvrir l'URL cible.

L'attribut enctype est utilisé pour spécifier la méthode d'encodage des données du formulaire. Cet attribut a trois valeurs d'attribut :

application/x-www-form-urlencoded : Il s'agit de la méthode d'encodage par défaut. traite uniquement la valeur de l'attribut value dans le contrôle de formulaire. Un formulaire utilisant cette méthode de codage traitera la valeur du contrôle de formulaire en codage URL.

multipart/form-data : Cette méthode d'encodage traitera les données du formulaire de manière binaire. Cette méthode d'encodage encapsulera le contenu du fichier spécifié dans le champ du fichier dans les paramètres de la requête.

text/plain : Cette méthode d'encodage est utilisée lorsque la valeur de l'attribut d'action du formulaire est sous la forme mailto:URL. Elle convient à l'envoi d'e-mails directement via le formulaire.

Les règles de conversion des contrôles de formulaire en paramètres de requête sont les suivantes :

Chaque contrôle de formulaire avec un attribut de nom correspond à un paramètre de requête sans attribut de nom ne générera pas de paramètres de requête.

Si plusieurs contrôles de formulaire ont le même attribut de nom, plusieurs contrôles de formulaire ne génèrent qu'un seul paramètre de requête, mais ce paramètre a plusieurs valeurs.

L'attribut name du contrôle de formulaire spécifie le nom du paramètre de requête et l'attribut value spécifie la valeur du paramètre de requête.

Si un contrôle de formulaire définit l'attribut désactivé ou désactivé="disabled", le contrôle de formulaire ne générera plus de paramètres de requête.

d5fd7aea971a85678ba271703566ebfd :

Zone de texte sur une seule ligne : spécifiez l'attribut de type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Zone de texte Mot de passe : spécifiez l'attribut type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Champ masqué : Spécifiez l'attribut type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Bouton radio : spécifiez que l'attribut type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Checkbox : Spécifiez l'attribut type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Domaine d'image : spécifiez l'attribut type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Domaine de téléchargement de fichier : spécifiez l'attribut type de l'élément 0f0306f9b187f2e363126bc29c8b1420

Boutons de soumission, de réinitialisation et de non-action : spécifiez l'attribut de type de l'élément 0f0306f9b187f2e363126bc29c8b1420 comme respectivement soumettre, réinitialiser ou bouton. L'élément

0f0306f9b187f2e363126bc29c8b1420 peut spécifier des attributs de base tels que l'identifiant, le style et la classe, des attributs d'événement tels que onclick et des attributs d'événement focus tels que onfocus et onblur. De plus, vous pouvez également spécifier les attributs suivants :

checked : Définissez le bouton radio, si la case est cochée par défaut.

disabled : Indique que l'élément est désactivé. Cet attribut ne peut pas être spécifié lorsque type="hidden".

maxlength : Spécifie le nombre maximum de caractères pouvant être saisis dans la zone de saisie.

lecture seule : le contenu de la zone de texte spécifiée ne peut pas être modifié.

size : Spécifie la largeur de l'élément. Cet attribut ne peut pas être spécifié lorsque type="hidden".

src : Spécifie l'URL de l'image affichée dans le champ image. Cet attribut ne peut être spécifié que lorsque type="image".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
    <title>getForm</title>
</head>
<body>
    <form action="http://www.crazyit.org" method="get">
        单行文本框：<input id="username" name="username" type="text" readonly="readonly"/><br/>
        密码框：<input id="password" name="password" type="password"/><br/>
        隐藏域：<input id="hidden" name="hidden" type="hidden"/><br/>
        第一组单选框：<br/>
        <input id="color" name="color" type="radio" value="red"/>
        <input id="color2" name="color" type="radio" value="green"/>
        <input id="color3" name="color" type="radio" value="blue"/><br/>
        第二个单选框：<br/>
        <input id="gender" name="gender" type="radio" value="male"/>
        <input id="gender2" name="gender" type="radio" value="female"><br/>
        两个复选框：<br/>
        <input id="website" name="website" type="checkbox" value="leegang.org"/>
        <input id="website2" name="website" type="checkbox" value="crazyit.org"/><br/>
        文件上传域：<input id="file" name="file" type="file"/><br/>
        图像域：<input type="image" src="img/wjc.gif" alt="疯狂Java联盟"/><br/>
        下面是四个按钮：<br/>
        <input id="ok" name="ok" type="submit" value="提交"/>
        <input id="dis" name="dis" type="submit" value="提交" disabled="disabled"/>
        <input id="cancle" name="cancle" type="reset" value="重填"/>
        <input id="no" name="no" type="button" value="无动作"/>
    </form>
</body>
</html>

bfdf57554631c62e63917d588904f58a :

Il existe deux manières d'associer des étiquettes aux contrôles de formulaire :

Utiliser implicitement l'attribut for : L'attribut for est la valeur de l'attribut id du contrôle de formulaire associé. (Recommandé)

Afficher l'association : placez le texte ordinaire et les contrôles de formulaire ensemble à l'intérieur de l'élément bfdf57554631c62e63917d588904f58a

<form action="http://www.crazyit.org" method="get">
        <label for="username">单行文本框：</label>
        <input id="username" name="username" type="text"/><br/>
        <label>密码框：<input id="password" name="password" type="password"/></label><br/>
        <input id="ok" type="submit" value="登录疯狂Java联盟"/>
    </form>

de935b9c153fbe5d6ad7df96bd65d7b8 :

peut contenir du texte ordinaire, des balises de formatage de texte, des images et d'autres contenus à l'intérieur, et a des fonctions plus riches que l'entrée bouton. L'élément

de935b9c153fbe5d6ad7df96bd65d7b8 peut spécifier des attributs de base tels que l'identifiant, le style, la classe, etc., et peut également spécifier des attributs de réponse à un événement tels que onclick. De plus, vous pouvez également spécifier les attributs suivants :

disabled : s'il faut désactiver le bouton.

nom : Spécifiez un nom unique pour le bouton.

type : Spécifiez à quel type de bouton appartient le bouton. La valeur de l'attribut ne peut être que bouton, réinitialiser ou soumettre.

valeur : Précisez la valeur initiale du bouton.

<form action="http://www.crazyit.org" method="get">
        <button type="button"><b>提交</b></button><br/>
        <button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/></button><br/>
    </form>

815c08aea17433a6272b681dc1d34168 :

Vous pouvez spécifier des attributs de base tels que l'identifiant, le style, la classe, etc. Cet élément ne peut spécifier que le changement attribut d'événement. De plus, vous pouvez également spécifier les attributs suivants :

disabled : défini pour désactiver la zone de liste et le menu déroulant.

multiple : définissez plusieurs sélections.

taille : Spécifie que la zone de liste peut afficher plusieurs éléments de liste en même temps. L'élément

815c08aea17433a6272b681dc1d34168 ne peut contenir que les deux éléments suivants :

d8f14978b2105a39d07c390b6142b1e4 : utilisé pour définir les éléments de liste et les éléments de menu.

ab954e0f6bf894bea018459b7fa67ae0 : utilisé pour définir les éléments de liste et les groupes d'éléments de menu. Cet élément ne peut contenir que des sous-éléments d8f14978b2105a39d07c390b6142b1e4

43d7dfa79a91949688a1bed28448d8e3 :

L'élément

43d7dfa79a91949688a1bed28448d8e3 peut spécifier des attributs de base tels que l'identifiant, le style et la classe, ainsi que les attributs d'événement onclick, onselect et onchange. De plus, cet élément peut également spécifier les attributs suivants :

cols : précise la largeur du champ de texte.

rows : Spécifie la hauteur du champ de texte.

désactivé : désactivez ce champ de texte.

readonly : Le texte spécifié est en lecture seule.

Recommandations associées :

Introduction aux points de connaissances liés aux formulaires HTML

Exemples de didacticiels sur les attributs de formulaire HTML5

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!