HTML5-formularbezogene Elemente und Attribute-HTML-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die relevanten Elemente und Attribute von HTML5-Formularen vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Sie können Kernattribute wie ID, Stil, Klasse usw. sowie Onclick-Ereignisattribute angeben. Darüber hinaus können Sie auch die folgenden Attribute angeben.

Aktion: Geben Sie die URL oder URI für die Formularübermittlung an.

Methode: Geben Sie die Anforderungsmethode an, normalerweise Get oder Post.

enctype: Gibt den Zeichensatz an, der zum Kodieren des Formularinhalts verwendet wird.

Name: Geben Sie den eindeutigen Namen des Formulars an, der im Allgemeinen mit dem Attributwert der ID übereinstimmt.

Ziel: Geben Sie an, welche Methode zum Öffnen der Ziel-URL verwendet werden soll.

enctype-Attribut wird verwendet, um die Kodierungsmethode von Formulardaten anzugeben. Dieses Attribut hat drei Attributwerte:

application/x-www-form-urlencoded: Dies ist die Standardkodierungsmethode Verarbeitet nur den Wert des Wertattributs im Formularsteuerelement. Ein Formular, das diese Kodierungsmethode verwendet, verarbeitet den Wert des Formularsteuerelements in die URL-Kodierung.

multipart/form-data: Diese Kodierungsmethode verarbeitet die Formulardaten binär. Diese Kodierungsmethode kapselt den Inhalt der im Dateifeld angegebenen Datei in die Anforderungsparameter.

text/plain: Diese Codierungsmethode wird verwendet, wenn der Aktionsattributwert des Formulars die Form „mailto:URL“ hat. Sie eignet sich zum direkten Senden von E-Mails über das Formular.

Die Regeln für die Konvertierung von Formularsteuerelementen in Anforderungsparameter lauten wie folgt:

Jedes Formularsteuerelement mit einem Namensattribut entspricht einem Anforderungsparameter. Formularsteuerelemente ohne Namensattribut generieren keine Anforderungsparameter.

Wenn mehrere Formularsteuerelemente das gleiche Namensattribut haben, generieren mehrere Formularsteuerelemente nur einen Anforderungsparameter, dieser Parameter hat jedoch mehrere Werte.

Das Namensattribut des Formularsteuerelements gibt den Namen des Anforderungsparameters an, und das Wertattribut gibt den Anforderungsparameterwert an.

Wenn ein Formularsteuerelement das Attribut „disabled“ oder „disabled="disabled" setzt, generiert das Formularsteuerelement keine Anforderungsparameter mehr.

Einzeiliges Textfeld: Geben Sie das Typattribut des -Elements an.

Passwort-Textfeld: Geben Sie das Typattribut des -Elements an.

Ausgeblendetes Feld: Geben Sie das Typattribut des -Elements als ausgeblendet an.

Optionsschaltfläche: Geben Sie an, dass das Typattribut des -Elements radio ist.

Kontrollkästchen: Geben Sie das Typattribut des -Elements an.

Bilddomäne: Geben Sie das Typattribut des -Elements als Bild an.

Datei-Upload-Domäne: Geben Sie das Typattribut des -Elements als Datei an.

Schaltflächen „Senden“, „Zurücksetzen“ und „Keine Aktion“: Geben Sie das Typattribut des Elements als „Senden“, „Zurücksetzen“ oder „Schaltfläche“ an. Das

-Element kann Kernattribute wie ID, Stil und Klasse, Ereignisattribute wie onclick und Fokusereignisattribute wie onfocus und onblur angeben. Darüber hinaus können Sie auch die folgenden Attribute angeben:

aktiviert: Legen Sie das Optionsfeld fest und legen Sie fest, ob das Kontrollkästchen standardmäßig aktiviert ist.

disabled: Zeigt an, dass das Element deaktiviert ist. Dieses Attribut kann nicht angegeben werden, wenn type="hidden" ist.

maxlength: Gibt die maximale Anzahl von Zeichen an, die in das Eingabefeld eingegeben werden dürfen.

schreibgeschützt: Der Inhalt des angegebenen Textfelds darf nicht geändert werden.

Größe: Gibt die Breite des Elements an. Dieses Attribut kann nicht angegeben werden, wenn type="hidden" ist.

src: Gibt die URL des im Bildfeld angezeigten Bildes an. Dieses Attribut kann nur angegeben werden, wenn 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>

Nach dem Login kopieren

Es gibt zwei Möglichkeiten, Beschriftungen mit Formularsteuerelementen zu verknüpfen:

Verwenden Sie implizit das for-Attribut: for Das Attribut ist der ID-Attributwert des zugehörigen Formularsteuerelements. (Empfohlen)

Zuordnung anzeigen: Platzieren Sie gewöhnlichen Text und Formularsteuerelemente zusammen im -Element.

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

Nach dem Login kopieren