HTML5-formularbezogene Elemente und Attribute

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.

b2368275032c438dd74002c1e36dce38

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.

d5fd7aea971a85678ba271703566ebfd:

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

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

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

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

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

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

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

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

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

bfdf57554631c62e63917d588904f58a:

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

de935b9c153fbe5d6ad7df96bd65d7b8:

kann normalen Text, Textformatierungs-Tags, Bilder und andere Inhalte enthalten und verfügt über umfangreichere Funktionen als die Eingabeschaltfläche. Das Element

de935b9c153fbe5d6ad7df96bd65d7b8 kann Kernattribute wie ID, Stil, Klasse usw. sowie Ereignisreaktionsattribute wie Onclick angeben. Darüber hinaus können Sie auch die folgenden Attribute angeben:

disabled: ob die Schaltfläche deaktiviert werden soll.

Name: Geben Sie einen eindeutigen Namen für die Schaltfläche an.

Typ: Geben Sie an, zu welcher Art von Schaltfläche die Schaltfläche gehört. Der Attributwert kann nur Schaltfläche, Zurücksetzen oder Senden sein.

Wert: Geben Sie den Anfangswert der Schaltfläche an.

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

kann Kernattribute wie ID, Stil, Klasse usw. angeben. Dieses Element kann nur das Ereignisattribut onchange angeben. Darüber hinaus können Sie auch die folgenden Attribute angeben:

disabled: Legen Sie fest, dass das Listenfeld und das Dropdown-Menü deaktiviert werden sollen.

mehrfach: Mehrere Auswahlmöglichkeiten festlegen.

Größe: Gibt an, dass das Listenfeld mehrere Listenelemente gleichzeitig anzeigen kann. Das Element

815c08aea17433a6272b681dc1d34168 kann nur die folgenden zwei Elemente enthalten:

d8f14978b2105a39d07c390b6142b1e4: wird zum Definieren von Listenelementen und Menüelementen verwendet.

ab954e0f6bf894bea018459b7fa67ae0: Wird zum Definieren von Listenelementen und Menüelementgruppen verwendet. Dieses Element kann nur Unterelemente enthalten.

43d7dfa79a91949688a1bed28448d8e3:

Das

43d7dfa79a91949688a1bed28448d8e3-Element kann Kernattribute wie ID, Stil und Klasse sowie die Ereignisattribute onclick, onselect und onchange angeben. Darüber hinaus kann dieses Element auch die folgenden Attribute angeben:

cols: gibt die Breite des Textfelds an.

Zeilen: Gibt die Höhe des Textfelds an.

deaktiviert: Deaktivieren Sie dieses Textfeld.

schreibgeschützt: Der angegebene Text ist schreibgeschützt.

Verwandte Empfehlungen:

Einführung in Wissenspunkte im Zusammenhang mit HTML-Formularen

Beispiele für HTML5-Formularattribut-Tutorials

Das obige ist der detaillierte Inhalt vonHTML5-formularbezogene Elemente und Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!