Éléments et attributs liés au formulaire HTML5-tutoriel HTML-php.cn

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

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.

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

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

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

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

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

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

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

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

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>

Copier après la connexion

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

<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>

Copier après la connexion