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

Was sind die Attribute von HTML5-Formularen?

寻∝梦
Freigeben: 2018-08-13 19:23:41
Original
2137 Leute haben es durchsucht

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

-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 -Tags sowie für die folgenden Arten von -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>
Nach dem Login kopieren

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

User name: <input type="text" name="user_name"  autofocus="autofocus" />
Nach dem Login kopieren

Formularattribut

Das Formularattribut gibt ein oder mehrere Formulare an, zu denen das Eingabefeld gehört.

Hinweis: Das Formularattribut gilt für alle

form-Attribut muss auf die ID des Formulars verweisen, zu dem es gehört:

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
Nach dem Login kopieren

Hinweis: Wenn Sie auf mehr als ein Formular verweisen müssen, verwenden Sie bitte eine durch Leerzeichen getrennte Liste.

Formularüberschreibungsattribute

Formularüberschreibungsattribute ermöglichen es Ihnen, bestimmte Attributeinstellungen des Formularelements zu überschreiben.

Die Attribute zum Umschreiben des Formulars sind:

formaction – schreibt das Aktionsattribut des Formulars neu

formenctype – schreibt das enctype-Attribut des Formulars neu

formmethod – rewrite Das Methodenattribut des Formulars

formnovalidate – schreibt das Novalidate-Attribut des Formulars neu

formtarget – schreibt das Zielattribut des Formulars neu

Hinweis: Das Formularrewrite-Attribut ist Gilt für die folgenden Arten von < ;Eingabe>-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>
Nach dem Login kopieren

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

<input type="image" src="img_submit.gif" width="99" height="99" />
Nach dem Login kopieren

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 -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>
Nach dem Login kopieren

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 -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" />
Nach dem Login kopieren

Mehrfachattribut

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

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

Select images: <input type="file" name="img" multiple="multiple" />
Nach dem Login kopieren

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 und die folgenden Arten von -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>
Nach dem Login kopieren

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 -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" />
Nach dem Login kopieren

Platzhalterattribut

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

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

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

<input type="search" name="user_search"  placeholder="Search php" />
Nach dem Login kopieren

required 属性

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

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

Name: <input type="text" name="usr_name" required="required" />
Nach dem Login kopieren

【相关推荐】

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage