Der value Attribut
Der value Attribut gibt den Anfangswert für ein Eingabefeld:
Beispiel
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Versuch es selber " Das readonly - readonly - Attribut
Das readonly - (cannot be changed) readonly - Attribut gibt an, dass das Eingabefeld nur gelesen wird (cannot be changed) :
Beispiel
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Versuch es selber " Das readonly - readonly - Attribut keinen Wert benötigen. Es ist das gleiche wie das Schreiben nur lesbar = „Nur-Lesen“.
Der disabled Attribut
Das disabled Attribut gibt an, dass das Eingabefeld nicht aktiviert.
Ein deaktivierter Element ist nicht mehr benutzen und un-klickbaren.
Disabled Elemente werden nicht abgegeben werden.
Beispiel
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Versuch es selber " Das disabled Attribut keinen Wert benötigen. Es ist die gleiche wie disabled = „disabled“ zu schreiben.
Die size Attribut
Die size Attribut gibt die Größe (in characters) für das Eingabefeld:
Beispiel
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Versuch es selber " Das maxlength Attribut
Das maxlength Attribut gibt die maximal zulässige Länge für das Eingabefeld:
Beispiel
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> Versuch es selber " Mit einem maxlength Attribute wird die Eingangssteuer akzeptiert nicht mehr als die erlaubte Anzahl von Zeichen.
Das Attribut stellt keine Rückmeldung. Wenn Sie den Benutzer alarmieren wollen, müssen Sie JavaScript-Code schreiben.
Eingangsbeschränkungen sind nicht narrensicher. JavaScript bietet viele Möglichkeiten, illegale Eingabe hinzuzufügen.
Um sicher zu beschränken Eingang, Einschränkungen müssen vom Empfänger überprüft werden (the server) als auch.
HTML5 Attribute
HTML5 hinzugefügt , um die following Attribute für <input> :
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
und die following Attribute für <form> :
- autocomplete
- novalidate
Die zur autocomplete Attribut
Das autocomplete Attribut gibt an, ob ein Formular oder ein Eingabefeld haben sollte autocomplete ein- oder ausgeschaltet.
Wenn die autocomplete aktiviert ist, basiert der Browser automatisch komplette Werte auf Werte , die der Benutzer zuvor eingegeben hat.
Tip: Es ist möglich, hat die autocomplete "on" für das Formular und "off" für bestimmte Eingabefelder, oder umgekehrt.
Das autocomplete - Attribut arbeitet mit <form> und dem folgenden <input> Typen: text, search, url, tel, email, password, datepickers, range, and color - text, search, url, tel, email, password, datepickers, range, and color .
Beispiel
Ein HTML - Formular mit autocomplete auf (and off for one input field) :
<form action="action_page.php" 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> Versuch es selber " Tipp: In einigen Browsern müssen Sie möglicherweise die Aktivierung der autocomplete Funktion für diese zu arbeiten.
Das novalidate Attribut
Das novalidate Attribut ist ein <form> Attribut.
Wenn vorhanden, novalidate gibt an, dass Formulardaten nicht , wenn eingereicht validiert werden.
Beispiel
Zeigt an, dass das Formular nicht validiert ist zu auf einreichen:
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form> Versuch es selber " Das autofocus - Attribut
Das autofocus - Attribut ist ein boolean - Attribut.
Wenn sie vorhanden sind , gibt es , dass ein <input> Element automatisch sollte sich darauf konzentrieren erhalten , wenn die Seite geladen wird .
Beispiel
Lassen Sie die "First name" Eingabefeld den Fokus automatisch erhalten , wenn die Seite geladen wird :
First name:<input type="text" name="fname" autofocus> Versuch es selber " Das form Attribut
Das form Attribut gibt eine oder mehr Formen ein <input> Element gehört.
Tip: Um mehr als eine Form zu beziehen, eine durch Leerzeichen getrennte Liste von verwenden form ids - form ids .
Beispiel
Ein input field außerhalb des HTML - Formulars befindet (but still a part of the form) :
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1"> Versuch es selber " Das formaction Attribut
Die formaction Attribut gibt die URL einer Datei, die die Eingangssteuer verarbeiten wird , wenn das Formular übermittelt wird.
Das formaction - Attribut überschreibt das action - Attribut des <form> Elements.
Das formaction - Attribut wird mit type = „submit“ und type = „image“ verwendet.
Beispiel
Ein HTML-Formular mit zwei Tasten einreichen, mit verschiedenen Aktionen:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form> Versuch es selber " Das formenctype Attribut
Das formenctype Attribut gibt an, wie sich die Form-Daten sollten verschlüsselt werden , wenn sie an den Server (only for forms with method="post" ) .
Das formenctype Attribut überschreibt das enctype Attribut des <form> Elements.
Das formenctype Attribut wird mit verwendet type="submit" und type="image" .
Beispiel
Sende form-data , die standardmäßig kodiert wird (the first submit button) - "multipart/form-data" (the second submit button) (the first submit button) und codiert als "multipart/form-data" (the second submit button) - (the second submit button) :
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form> Versuch es selber " Die formmethod Attribut
Das formmethod Attribut definiert die HTTP - Methode zum Senden von form-data an die Action - URL.
Das formmethod Attribut überschreibt die method Attribut des <form> Element.
Das formmethod Attribut kann verwendet werden mit type="submit" und type="image" .
Beispiel
Die zweite Submit-Button überschreibt die HTTP-Methode des Formulars:
<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form> Versuch es selber " Das formnovalidate Attribut
Das novalidate Attribut ist ein boolean - Attribut.
Wenn sie vorhanden sind , gibt es , dass das <input> Element sollte , wenn eingereicht nicht validiert werden.
Das formnovalidate Attribut überschreibt das novalidate Attribut des <form> Elements.
Das formnovalidate Attribut kann verwendet werden mit type="submit" .
Beispiel
Ein Formular mit zwei Tasten einreichen (with and without validation) :
<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form> Versuch es selber " Die formtarget Attribut
Das formtarget Attribut gibt den Namen oder ein Schlüsselwort, das anzeigt , wo die Antwort anzuzeigen , die nach dem Absenden des Formulars empfangen wird.
Das formtarget Attribut überschreibt das target des <form> Elements.
Das formtarget Attribut kann mit type = "submit" und type = "image" verwendet werden.
Beispiel
Ein Formular mit zwei Tasten einreichen, mit unterschiedlichen Zielfenstern:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form> Versuch es selber " Die height und width Attributes
Die height und Breite Attribute angeben , die Höhe und Breite eines <input> Element.
Die height und width Attribute sind nur mit verwendet <input type="image"> .
Immer geben Sie die Größe der Bilder. Wenn der Browser die Größe nicht kennt, wird die Seite flimmern, während Bilder laden.
Beispiel
Definieren eines Bildes als die Senden-Schaltfläche, mit der Höhe und Breite Attribute:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> Versuch es selber " Die list Attribut
Die list Attribut bezieht sich auf ein <datalist> Element , das Optionen vordefinierte für einen enthält <input> Element.
Beispiel
Ein <input> Element mit vordefinierten Werten in einem <datalist> :
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist> Versuch es selber " Die min und max Attribute
Die min und max - Attribute den Minimal- und Maximalwert für ein angeben <input> Element.
Die min und max Attribute Arbeit mit den folgenden Eingabearten: number, range, date, datetime, datetime-local, month, time and week .
Beispiel
<Input> -Elemente mit min und max Werte:
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"> Versuch es selber " Das multiple Attribute
Das multiple Attribut ist ein boolean - Attribut.
Wenn sie vorhanden sind , gibt an, dass es dem Benutzer erlaubt wird , mehr als einen Wert in der Eingabe <input> Element.
Das multiple Attribut arbeitet mit den folgenden Eingabetypen: email - file email und file .
Beispiel
Ein Datei-Upload-Feld, das mehrere Werte akzeptiert:
Select images: <input type="file" name="img" multiple> Versuch es selber " Das pattern Attribut
Das pattern - Attribut gibt einen regulären Ausdruck, der <input> Element Wert gegen geprüft.
Das pattern Attribut arbeitet mit den folgenden Eingabearten: text, search, url, tel, email, and password - text, search, url, tel, email, and password .
Tipp: Verwenden Sie das globale Titel Attribut , das Muster zu beschreiben , um den Benutzer zu helfen.
Tip: Erfahren Sie mehr über reguläre Ausdrücke in unserem JavaScript - Tutorial.
Beispiel
Ein Eingabefeld , das nur drei Buchstaben enthält (no numbers or special characters) :
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> Versuch es selber " Der placeholder Attribut
Die placeholder - Attribut gibt einen Hinweis , dass der Erwartungswert von einem Eingabefeld beschreibt (a sample value or a short description of the format) .
Der Hinweis wird in dem Eingabefeld angezeigt wird, bevor der Benutzer einen Wert eingibt.
Die placeholder - Attribut arbeitet mit den folgenden Eingabearten: text, search, url, tel, email, and password - text, search, url, tel, email, and password .
Beispiel
Ein Eingabefeld mit einem Platzhalter-Text:
<input type="text" name="fname" placeholder="First name"> Versuch es selber " Das required Attribut
Das required Attribut ist ein boolean - Attribut.
Wenn sie vorhanden sind, gibt an, dass ein Eingabefeld vor dem Absenden das Formular ausgefüllt werden müssen.
Das required Attribut arbeitet mit den folgenden Eingabearten: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file - text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .
Beispiel
Ein erforderliches Eingabefeld:
Username: <input type="text" name="usrname" required> Versuch es selber " Der step Attribut
Der step Attribut gibt die gesetzlichen Nummernintervalle für ein <input> Element.
Beispiel: Wenn Schritt = "3", rechtliche Zahlen -3 sein könnten, 0, 3, 6, usw.
Tip: Der step Attribut verwendet werden kann , zusammen mit dem max und min Attributen eine Reihe von gesetzlichen Werten zu schaffen.
Der step Attribut arbeitet mit den folgenden Eingabetypen: number, range, date, datetime, datetime-local, month, time and week .
Beispiel
Ein Eingabefeld mit einer bestimmten Rechtsnummernintervall:
<input type="number" name="points" step="3"> Versuch es selber "