Heim >Web-Frontend >H5-Tutorial >Was sind die Attribute von HTML5-Formularen?

Was sind die Attribute von HTML5-Formularen?

寻∝梦
寻∝梦Original
2018-08-13 19:23:412139Durchsuche

Wenn Sie eine ausführliche Erklärung der Elemente des Formulars sehen möchten, sehen Sie sich bitte hier die ausführliche Erklärung der HTML5-Formularelemente an

Wir haben oben über die Elemente des Formulars gesprochen, jetzt wollen wir Schauen Sie sich einige der neuen Attribute an

Wenn Sie diesen Link noch nicht gesehen haben: Ausführliche Erklärung der HTML5-Formularelemente

Die neuen Formularattribute von HTML5 betreffen hauptsächlich zwei Aspekte: die neuen Attribute von das ff9c23ada1bcecdd1a0fb5d5a0f18437d5fd7aea971a85678ba271703566ebfd-Element.

HTML5-Formularattribute

Neue Formularattribute:

  • Autovervollständigung

  • novavalidate

Neues Eingabeattribut:

  • Autovervollständigung

  • Autofokus

  • form

  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

  • height und Breite

  • Liste

  • Min, Max und Schritt

  • Mehrfach

  • Muster(regexp)

  • Platzhalter

  • erforderlich

Autovervollständigungsattribut

Das Autovervollständigungsattribut gibt an, dass das Formular oder Eingabefeld über eine Autovervollständigungsfunktion verfügen soll.

Hinweis: Die automatische Vervollständigung gilt für ff9c23ada1bcecdd1a0fb5d5a0f18437-Tags sowie für die folgenden Arten von d5fd7aea971a85678ba271703566ebfd-Tags: Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Bereich und Farbe.

Wenn der Benutzer mit der Eingabe in das Autovervollständigungsfeld beginnt, sollte der Browser die Optionen zum Ausfüllen in diesem Feld anzeigen:

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

Hinweis: In einigen Browsern müssen Sie möglicherweise die Autovervollständigung aktivieren, um die Funktion abzuschließen Aktivieren Sie diese Eigenschaft.

Autofokus-Attribut

Das Autofokus-Attribut gibt an, dass ein Feld automatisch den Fokus erhält, wenn die Seite geladen wird.

Hinweis: Das Autofokus-Attribut gilt für alle 11d42fe3f0aa1bebfae42abcf1df3bc1-Tags: Submit und Image.

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

Hinweis: Diese Eigenschaften sind nützlich zum Erstellen verschiedener Senden-Schaltflächen.

Höhe- und Breitenattribute

Höhe- und Breitenattribute geben die Bildhöhe und -breite an, die für Eingabe-Tags vom Typ Bild verwendet werden.

Hinweis: Die Attribute height und width gelten nur für d5fd7aea971a85678ba271703566ebfd-Tags.

<input type="image" src="img_submit.gif" width="99" height="99" />

Listenattribut

Listenattribut gibt die Datenliste des Eingabefelds an. datalist ist eine Liste von Optionen für das Eingabefeld.

Hinweis: Das Listenattribut gilt für die folgenden Arten von 7a7276301a860ea402f6bdc1f67f4471-Tags: Text, Suche, URL, Telefon, E-Mail, Datumsauswahl, Nummer, Bereich und Farbe.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Min-, Max- und Schrittattribute

Die Min-, Max- und Schrittattribute werden verwendet, um Grenzwerte (Einschränkungen) für Eingabetypen anzugeben, die Zahlen oder Datumsangaben enthalten. Das Attribut

max gibt den maximal zulässigen Wert für das Eingabefeld an. Das Attribut

min gibt den minimal zulässigen Wert für das Eingabefeld an.

Das Schrittattribut gibt die zulässigen Zahlenintervalle für das Eingabefeld an (wenn step="3" sind die zulässigen Zahlen -3,0,3,6 usw.).

Hinweis: Die Attribute „Min“, „Max“ und „Schritt“ gelten für die folgenden Arten von 7a7276301a860ea402f6bdc1f67f4471-Tags: Datumsauswahl, Zahl und Bereich.

Das folgende Beispiel zeigt ein numerisches Feld, das Werte zwischen 0 und 10 in 3er-Schritten akzeptiert (d. h. zulässige Werte sind 0, 3, 6 und 9):

Points: <input type="number" name="points" min="0" max="10" step="3" />

Mehrfachattribut

Mehrfachattribut gibt an, dass im Eingabefeld mehrere Werte ausgewählt werden können.

Hinweis: Das Mehrfachattribut gilt für die folgenden Arten von 7a7276301a860ea402f6bdc1f67f4471-Tags: E-Mail und Datei.

Select images: <input type="file" name="img" multiple="multiple" />

novalidate-Attribut

Das novalidate-Attribut gibt an, dass Formular- oder Eingabefelder beim Absenden eines Formulars nicht validiert werden sollen.

Hinweis: Das novalidate-Attribut gilt für ff9c23ada1bcecdd1a0fb5d5a0f18437 und die folgenden Arten von d5fd7aea971a85678ba271703566ebfd-Tags: Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Bereich und Farbe.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

Musterattribut

Das Musterattribut gibt das Muster (Muster) an, das zur Überprüfung des Eingabefelds verwendet wird.

Muster ist ein regulärer Ausdruck. In unserem JavaScript-Tutorial erfahren Sie mehr über reguläre Ausdrücke.

Hinweis: Das Musterattribut gilt für die folgenden Arten von 7a7276301a860ea402f6bdc1f67f4471-Tags: Text, Suche, URL, Telefon, E-Mail und Passwort.

Das folgende Beispiel zeigt ein Textfeld, das nur drei Buchstaben enthalten kann (ohne Zahlen und Sonderzeichen):

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

Platzhalterattribut

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

注:placeholder 属性适用于以下类型的 d5fd7aea971a85678ba271703566ebfd 标签:text, search, url, telephone, email 以及 password。

提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

<input type="search" name="user_search"  placeholder="Search php" />

required 属性

required 属性规定必须在提交之前填写输入域(不能为空)。

注:required 属性适用于以下类型的 d5fd7aea971a85678ba271703566ebfd 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

【相关推荐】

html的基础元素,让你零基础学习HTML

HTML和HTML5的发展历史


Das obige ist der detaillierte Inhalt vonWas sind die Attribute von HTML5-Formularen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn