Organisieren Sie formularbezogene Elemente umfassend!

HTML-Originalformulare und Formularsteuerelemente

Formularelemente

Sie können Kerninhalte wie ID, Klasse, Stil usw. anheften und auch Ereignisattribute wie Onclick angeben.

Darüber hinaus enthält es auch eine Aktion (gibt die Adresse an, zu der das Formular springt, wenn die Schaltfläche in der eigenständigen Tabelle bestätigt wird), eine Methode (gibt an, welche Art von Anfrage beim Absenden des Formulars gesendet wird, und der Wert kann abgerufen werden oder Beitrag), enctype (Geben Sie den Zeichensatz an, der zum Kodieren des Ausdrucksinhalts verwendet wird), Name (Geben Sie den eindeutigen Namen des Formulars an), Ziel (Geben Sie an, welche Methode zum Öffnen der Ziel-URL anwendbar ist). [Empfohlen: HTML-Video-Tutorial]

Eingabeelement

Das Folgende wird von mehreren Eingabeelementen erzeugt:

Passwort-Eingabefeld :

<input id="password" name="password" style="password" />

Versteckte Felder:

<input id="hidden" name="hidden" style="hidden" />

Optionsfeld

<input id="radio" name="radio" style="radio" />

Kontrollkästchen

<input id="checkbox" name="checkbox" style="checkbox" />

Bildfeld

<input id="image" name="image" style="image" />

Datei-Upload-Feld

<input id="file" name="file" style="file" />

Senden-Schaltfläche

<input id="submit" name="submit" style="submit" />

Zurücksetzen-Schaltfläche

<input id="reset" name="reset" style="reset	" />

Keine Aktionsschaltfläche

<input id="button" name="buton" style="button" />

Einige Fokusattribute of

checked: Legen Sie fest, ob das Optionsfeld und das Kontrollkästchen anfänglich ausgewählt sind.
deaktiviert: Verwenden Sie dieses Element beim Einstellen der ersten Last.
maxlength: Dieses Attribut ist eine Zahl, die die maximale Anzahl angibt, die in das Textfeld eingegeben werden darf.
schreibgeschützt: Der Wert im angegebenen Textfeld darf vom Benutzer nicht geändert werden (kann mit dem JS-Skript geändert werden). Dieses Attribut unterstützt boolesche-Werte und gibt an, dass der Wert dieses Elements schreibgeschützt ist.
Größe: Der Wert dieses Attributs ist eine Zahl, die die Breite des Kalziumelements angibt.
src: Geben Sie die URL des im Bildfeld angezeigten Bildes an.
width: Geben Sie die Breite des im Bildfeld angezeigten Bildes an.
heigeht: Geben Sie die Höhe des im Bildfeld angezeigten Bildes an.

Label-Element

Label-Element kann Kernattribute wie ID, Klasse, Stil usw. sowie Ereignisattribute wie Onclick angeben. Darüber hinaus können Sie auch ein for-Attribut angeben, das angibt, mit welchem ​​Formularsteuerelement die Beschriftung verknüpft ist. Die Verwendung ist for="", und die ID des relevanten Steuerelements steht in Anführungszeichen.

button-Element

-Element wird zum Definieren einer Schaltfläche verwendet. Sie können Kernvertrautheit wie ID, Klasse, Stil usw. angeben und Sie können auch Ereignisattribute wie onclick definieren. Darüber hinaus können Sie auch die folgenden Elemente angeben.

disabled: Gibt an, ob diese Schaltfläche deaktiviert ist.
Name: Geben Sie einen eindeutigen Namen für die Schaltfläche an. Der Attributname sollte mit der ID übereinstimmen.
Typ: Geben Sie den Typ der Schaltfläche an, zu der diese Schaltfläche gehört. Der Attributwert kann nur „Schaltfläche“, „Zurücksetzen“ oder „Senden“ sein.
Wert: Geben Sie den Anfangswert der Schaltfläche an. Kann per js-Skript geändert werden.

select- und option-Elemente

-Elemente werden zum Erstellen von Listenfeldern oder Dropdown-Menüs verwendet. Das Element „calcium“ muss mit dem Element kombiniert werden. />-Element Stellt ein Listen- oder Menüelement dar.
Das Element kann Kernattribute wie ID, Klasse, Stil usw. angeben. Dieses Element kann das Ereignisattribut onchange angeben – wenn sich die ausgewählte Option im Listenfeld oder Dropdown-Listenelement ändert Das onchange-Ereignis wird ausgelöst.

Darüber hinaus kann das Element auch die folgenden Attribute angeben.

deaktiviert: Deaktivieren Sie das Listenfeld und das Dropdown-Menü. Der Wert dieses Attributs kann nur deaktiviert oder der Attributwert weggelassen werden.
mehrfach: Legen Sie fest, ob das Listenfeld und das Dropdown-Menü eine Mehrfachauswahl zulassen. Sobald das Element so eingestellt ist, dass es eine Mehrfachauswahl zulässt, wird automatisch ein Listenfeld generiert.
Größe: Geben Sie an, wie viele Listenelemente das Listenfeld und das Dropdown-Menü gleichzeitig implementieren können. Sobald das Element so eingestellt ist, dass es eine Mehrfachauswahl zulässt, wird automatisch ein Listenfeld generiert.

Das Element kann nur die folgenden zwei Unterelemente enthalten.

: Wird zum Definieren von Listenelementen oder Menüelementen verwendet. Dieses Element kann als Text für diese Option nur Textinhalte enthalten.
: Wird zum Definieren von Listenelementen oder Menüzeilengruppen verwendet. Dieses Element kann nur untergeordnete Elemente vom Typ enthalten.

Elemente können Kernelemente wie ID, Klasse, Stil usw. angeben und können auch Ereignisattribute wie Onclick angeben.

Darüber hinaus können Sie auch die folgenden Elemente definieren.

disabled: Gibt an, dass diese Option deaktiviert werden soll. Der Wert dieses Attributs kann nur deaktiviert werden.
selected: Gibt an, ob der Anfangszustand der Flowbox ausgewählt ist. Der Wert dieses Attributs kann nur ausgewählt werden.
Wert: Geben Sie den Anforderungsparameterwert an, der dieser Option entspricht.

Das Element kann Kernattribute wie ID, Klasse, Stil usw. angeben. Es kann auch Ereignisantwortattribute wie Onclick angeben. Darüber hinaus gibt es die folgenden Attribute.

label: Geben Sie die Beschriftung dieser Optionsgruppe an. Dieses Attribut ist erforderlich.
deaktiviert: Alle Optionen in dieser Optionsgruppe deaktivieren. Der Attributwert kann nur deaktiviert oder weggelassen werden.

HTML5-erweiterter Textbereich

-Element wird zum Generieren mehrzeiliger Textbereiche verwendet. Sie können Kernelemente wie ID, Klasse, Stil usw. angeben und Sie können auch Ereignisattribute wie Onclick angeben. Aufgrund der Besonderheit des Textbereichs kann er Benutzereingaben empfangen und der Benutzer kann den Text im Textbereich auswählen. Daher können Sie auch zwei Attribute angeben, onselect und onchange, die für den Zeitpunkt gelten, zu dem der Textbereich ausgewählt wird wenn der Text geändert wird. Darüber hinaus kann dieses Element auch die folgenden Elemente angeben.

cols: Geben Sie die Breite des Textfelds an, erforderlich.
rows: Gibt die Höhe des Texts an, die erforderlich ist.
disabled: Gibt an, dass dieses Textfeld deaktiviert ist. Der Attributwert kann nur deaktiviert werden.
schreibgeschützt: Das angegebene Textfeld ist schreibgeschützt. Der Wert dieses Attributs kann nur schreibgeschützt sein.
maxlength: Legen Sie die maximale Anzahl von Zeichen fest, die in dieses mehrzeilige Textfeld eingegeben werden können.
wrap: Geben Sie an, ob Zeilenumbrüche zu mehrzeiligen Textfeldern hinzugefügt werden sollen. Dieses Attribut unterstützt zwei Attributwerte: weich und hart. Wenn der Attributwert auf hard gesetzt ist, muss das cols-Attribut angegeben werden. Wenn die eingegebenen Zeichen die durch cols angegebene Breite überschreiten und dazu führen, dass der Text umbrochen wird, fügt das mehrzeilige Textfeld beim Zeilenumbruch automatisch ein Zeilenumbruchzeichen hinzu Formular wird übermittelt.

fieldset- und legend-Elemente

-Elemente können zum Gruppieren von Formularelementen innerhalb eines Formulars verwendet werden. Dieses Element kann Kernelemente wie ID, Klasse, Stil usw. sowie die folgenden drei Attribute angeben.

Name: Geben Sie den Namen des -Elements an.
form: Der Attributwert dieses Attributs muss eine ID mit einem gültigen -Element sein, das verwendet wird, um anzugeben, dass das -Element zum Formular gehört.
disabled: Dieses Attribut wird verwendet, um das Formularelement zu deaktivieren. Diese Eigenschaft ist eine Eigenschaft, die boolesche Werte unterstützt.

HTMLs neue Formularattribute

Formularattribute

HTML5 hat Formularattribute zu allen Formularsteuerelementen hinzugefügt, sodass es beim Definieren von Formularsteuerelementen auf der Seite flexibler ist und Sie Formularsteuerelemente nach Belieben verhindern und anordnen können größere Flexibilität.

Formaction-Attribut

HTML5 löst das Problem, dass dasselbe Formular sowohl Registrierungs- als auch Anmeldeschaltflächen enthält. Dieses Attribut kann das Formular dynamisch an verschiedene URLs senden.

formxxxx-Attribut

formxxxx-Attribut ähnelt dem formaction-Attribut. Für sumit, reset und image können Sie formenctype, formmethod, formtarget und andere Attribute angeben, darunter:

formenctype: Dieses Attribut ermöglicht es der Schaltfläche wird dynamisch zu einem Enctype-Attribut.
formmethod: Dieses Attribut ermöglicht es der Schaltfläche, sich dynamisch in ein Methodenattribut zu ändern.
formtarget: Dieses Attribut ermöglicht es der Schaltfläche, dynamisch zum Zielattribut zu wechseln.

Autofokus-Attribut

Dies ist ein sehr häufig verwendetes Attribut. Seine Funktion besteht darin, beim Öffnen einer Webseite automatisch auf die entsprechende Position zu fokussieren. Die Verwendung besteht darin, es dem entsprechenden Code hinzuzufügen, z. B.: <input type="password" name="name" autofocus />Die Funktion des Autofokus in diesem Code besteht darin, automatisch zu fokussieren die Seite beim Öffnen der Webseite. <input type="password" name="name" autofocus />该代码中autofocus的作用就是在打开网页时自动聚焦到该密码框。

placeholder属性

这个属性也非常的常用，作用就是在用户为输入数据的文本框中给出对应的提示，如：<input type="text" name="username" palceholder="请输入用户名" />；

Platzhalterattribut

Dieses Attribut wird auch sehr häufig verwendet. Seine Funktion besteht darin, entsprechende Eingabeaufforderungen in das Textfeld einzugeben, z. B.: <input type="text" name="username" palceholder= "Bitte geben Sie Ihren Benutzernamen ein" />;Die Funktion des Platzhalters in diesem Code besteht darin, „Bitte geben Sie Ihren Benutzernamen ein“ anzuzeigen, wenn der Benutzer keine Daten in das Textfeld eingegeben hat, um die Seite benutzerfreundlicher zu gestalten .

Listenattribut

Dieses Attribut ist auch sehr praktisch. Vor der HTML5-Spezifikation gab es in den HTML-Formularattributen keine ComboBox-ähnliche Komponente. Das Listenattribut von HTML5 gleicht diesen Mangel aus. Der Wert des Listenattributs sollte die ID einer -Komponente sein, was bedeutet, dass die Liste in Verbindung mit der