HTML5 Formulareigenschaften

HTML5 Neues Formular Eigenschaften

HTML5 ist <form> und <input> -Tag fügt mehrere neue Eigenschaften.

<Form> neue Attribute:

• Auto-Vervollständigen
• novalidate

<Input> Neue Eigenschaften:

• Auto-Vervollständigen
• Autofokus
• Form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• Höhe und Breite
• Liste
• min und max
• mehrere
• Muster (Wildcards)
• Platzhalter
• erforderlich
• Schritt

<Form> / <input> Auto-Vervollständigen-Attribut

Auto-Vervollständigen-Attribut gibt die Form oder das Eingabefeld zur automatischen Vervollständigung haben sollte.

Wenn Benutzer die Eingabe in das Auto-Vervollständigen-Feld starten, sollte der Browser-Optionen in diesem Bereich zu füllen anzuzeigen.

Tipp: Auto - Vervollständigen- Attribut möglich Formelement eingeschaltet ist, und in dem Eingangselement ist ausgeschaltet.

Hinweis: Auto - Vervollständigen gelten <form> Tag und die folgenden Arten von <input> -Tag: Text, Suche, URL, Telefon , E - Mail, Passwort, Kalenderwerkzeug, Reichweite und Farbe.

Beispiele

HTML-Formular im offenen Auto-Vervollständigen (eine Abschaltung Eingabefeld zur automatischen Vervollständigung):

<Form action = "Demo-form.php" Auto - Vervollständigen = "on"> Vorname : <input type = "text" name = "fname"> <br> Name: <input type = "text" name = "lname"> <br> E-Mail: <input type = "email" name = "E - Mail" Auto - Vervollständigen = "off"> <br> <Input type = "submit"> </ Form>

Versuchen »

Tipp: Einige Browser, müssen Sie die Autovervollständigen - Funktion, um die Eigenschaft zu holen zu aktivieren.

<Form> novalidate Eigenschaft

Eine boolesche Eigenschaft novalidate Eigenschaft.

novalidate Attribut gibt an, wann das Formular abschicken sollte nicht Formulareingabe oder Domäne zu validieren.

Beispiele

Ohne Überprüfung Formulardaten Vorlage

<Form action = "Demo-form.php" novalidate> E-Mail: <input type = "email" name = "user_email"> <Input type = "submit"> </ Form>

Versuchen »

<Input> Autofokus-Attribut

Autofokus-Attribut ist ein boolean-Attribut.

Autofokus-Attribut gibt, wenn die Seite geladen wird, die Domäne automatisch den Fokus erhalten.

Beispiele

Lassen Sie "Vorname" Eingabefeld den Autofokus auf Seite laden ein:

First name:<input type="text" name="fname" autofocus>

Versuchen »

<Input> Formulareigenschaft

Attribut gibt ein Formular Eingabefeld eine oder mehrere Formen gehört.

Tipp: Um mehr als eine Form zitieren, eine durch Leerzeichen getrennte Liste verwenden.

Beispiele

Das Hotel liegt in Form Form außerhalb des Eingabefeldes bezieht sich auf HTML-Formular (die Form ist immer noch eine Form Eingang bildet einen Teil davon):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

Versuchen »

<Input> formaction Eigentum

Die formaction Eigenschaft wird die URL der Formularübermittlung zu beschreiben.

Die Attribute formaction Überschreibung <form> -Element in der action-Attribut.

Hinweis: Das Attribut formactiontype = "submit" und type = "image".

Beispiele

Htmlform einreichen bitte das folgende Formular zwei verschiedene Adressen Schaltfläche enthält:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

Versuchen »

<Input> formenctype Eigenschaft

formenctype Attribut beschreibt das Formular an den Server-Datencodierung vorgelegt wird (für Form Formularmethode nur = "post" Form)

formenctype Eigenschaftsüberschreibungen enctype Formularelemente zuzuschreiben.

Main: Dieses Attribut type = "submit" und type = "image" in Verbindung.

Beispiele

Die erste einreichen, um die Formulardaten zu senden standardmäßig codiert ist, legt die zweite Taste, um "multipart / form-data" Format kodiert, um die Formulardaten zu senden:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

Versuchen »

<Input> formmethod Eigenschaft

formmethod Attribut definiert die Art und Weise Formulareinreichung.

formmethod Eigenschaft für den <form> Element-Methode Attribut.

Hinweis: Dieses Attribut kann mit Typ verwendet werden = "submit" und type = "image" zusammen.

Beispiele

Definieren Sie die Formulareinreichung beispielhaft:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

Versuchen »

<Input> formnovalidate Eigenschaft

novalidate Eigenschaft ist eine boolesche Eigenschaft.

novalidate Attribut beschreibt die <input> Elemente müssen nicht validiert werden, wenn das Formular abgeschickt wird.

formnovalidate Attribute außer Kraft setzen novalidate Attribut <form> -Element.

Hinweis: formnovalidate Attribut type = "submit für die Verwendung mit

Beispiele

Zwei Tasten senden Sie das Formular (gilt nicht für mit Überprüfung):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

Versuchen »

<Input> formtarget Eigenschaft

formtarget Attribut gibt einen Namen oder ein Schlüsselwort die Anzeigedaten empfangen, um anzuzeigen, nachdem das Formular abgeschickt wird.

Die formtarget Eigenschaftsüberschreibungen <form> Zielattribut des Elements.

Hinweis: formtarget Attribut type = "submit" und type = "image" zusammen.

Beispiele

Zwei Tasten einreichen, die in verschiedenen Fenstern angezeigt Form:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

Versuchen »

<Input> Höhe und Breite Attribute

Höhe und Breite Attribute für den Bildtyp von <input> -Tag Bild Höhe und Breite festgelegt.

Hinweis: Höhe und Breite Eigenschaften nur auf Bildtyp anwenden <input> -Tag.

Tipp: Das Bild wird in der Regel die Höhe angeben und Breite Attribute.Wenn das Bild, die Höhe und die Breite des Raums festgelegt für das Bild erforderlich ist, wenn die Seite geladen wird, wird beibehalten. Ohne diese Attribute, weiß der Browser nicht die Größe des Bildes und kann nicht den entsprechenden Raum beiseite stellen. Fotos während des Ladevorgangs ändert sich das Seitenlayout-Effekt (obwohl Bild geladen ist).

Beispiele

Definiert ein Bild Submit-Button, verwenden Sie die Höhe und Breite Attribute:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Versuchen »

<Input> Liste Eigenschaften

DataList- Liste Attribut gibt die Eingabefelder. DataList- ist eine Liste der Optionen für die Eingabefelder.

Beispiele

in <datalist> in <input> Wert vordefiniert:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Versuchen »

<Input> min und max Attribute

min, max, und Schritt Attribute werden als Input-Typen enthalten, Zahlen oder Daten begrenzt (Constraints) verwendet.

Hinweis: min, max, und Schritt Attribute gelten für die folgenden Arten von <input> tag: Datumsauswahl, Anzahl und Reichweite.

Beispiele

<Input> Elemente der minimalen und maximalen Einstellungen:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Versuchen »

<Input> mehrere Eigenschaften

mehrere Attribut ist ein boolean-Attribut.

mehrere Attribut gibt <input> Element, um mehrere Werte auszuwählen.

Hinweis: mehrere Eigenschaften beziehen sich auf die folgenden Arten von <input> -Tag: E - Mail und Datei:

Beispiele

Hochladen mehrerer Dateien:

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

Versuchen »

<Input> Muster Eigenschaft

Muster Attribut beschreibt einen regulären Ausdruck verwendet, um den Wert von <input> Elemente zu validieren.

Hinweis: Muster Attribut gilt für die folgenden Arten von <input> -Tag: Text, Suche, URL, Tel , E - Mail und Passwort.

Tipp: Es ist für die globale verwendet wird Titel - Attribut beschreibt den Modus.

Tipp: Sie können in unserem JavaScript Tutorial über den Inhalt eines regulären Ausdrucks zu lernen

Beispiele

Das folgende Beispiel zeigt ein Drei-Buchstaben nur Textfeld (keine Zahlen oder Sonderzeichen) enthalten:

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

Versuchen »

<Input> Platzhalter Attribut

Platzhalter Attribut liefert einen Hinweis (Hinweis), den erwarteten Wert des Eingabefeldes beschreiben.

Eine kurze Erinnerung wird auf das Eingabefeld, bevor der Benutzer Eingabewert angezeigt.

Hinweis: Platzhalter Attribut gilt für die folgenden Arten von <input> -Tag: Text, Suche, URL, Telefon , E - Mail und Passwort.

Beispiele

Eingabefeld Aufforderungstext t:

<input type="text" name="fname" placeholder="First name">

Versuchen »

<Input> erforderlich Attribut

erforderliches Attribut ist ein boolean-Attribut.

erforderliches Attribut gibt an, dass ein Eingabefeld (nicht leer) gefüllt werden muss vor dem Absenden.

Hinweis: erforderlichen Attribute für die folgenden Arten von <input> -Tag: Text, Suche, URL, Telefon , E - Mail, Passwort, Datumsauswahl, Anzahl, Checkbox, Radio und Datei.

Beispiele

Kann nicht mit leeren Eingabefelder:

Username: <input type="text" name="usrname" required>

Versuchen »

<Input> Schritt Attribute

Schritt Attribut für das Eingabefeld gibt die Rechtsnummernintervalle.

Wenn der Schritt = "3", könnte rechtliche Zahlen -3,0,3,6 sein, usw.

Tipp: Schritt Attribut kann einen regionalen Wert max erstellen und min - Attribute.

Hinweis: Schritt Attributtypen in Verbindung mit dem folgenden Typs verwendet: Anzahl, Bereich, Datum, Datumzeit , datetime-local, Monat, Zeit und Woche.

Beispiele

Vorgegebene Eingabeschritt Schritt 3:

<input type="number" name="points" step="3">

Versuchen »

HTML5 <input> -Tag