Eingabetypen
Dieses Kapitel beschreibt die Eingangstypen des <input> Element.
Input Type: text
<input type="text"> definiert ein einzeiliges Eingabefeld für die Texteingabe:
Beispiel
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Vorname:
Familienname, Nachname:
Eingangstyp: Passwort
<input type="password"> definiert ein Passwort - Feld:
Beispiel
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Benutzername:
Benutzer-Passwort:
Die Zeichen in einem Passwortfeld maskiert sind (shown as asterisks or circles) .
Eingangstyp: submit
<input type="submit"> definiert eine Schaltfläche Formulareingabe in ein Formular-Handler für die Einreichung.
Der Formular-Handler ist in der Regel eine Server-Seite mit einem Skript Eingangsdaten für die Verarbeitung.
Die form Handler wird in der Form der action-Attribut angegeben:
Beispiel
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Vorname:
Familienname, Nachname:
Wenn Sie den Wert der Schaltfläche Attribut einreichen weglassen, wird die Schaltfläche, um einen Standardtext erhalten:
Beispiel
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> Versuch es selber " Eingangstyp: radio
<input type="radio"> definiert eine radio - Taste.
Radio - Tasten lassen ein Benutzer nur eine von einer begrenzten Anzahl von Möglichkeiten:
Beispiel
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Männlich
Weiblich
Andere
Eingangstyp: checkbox
<input type="checkbox"> definiert eine checkbox .
Checkboxes lassen ein Benutzer keine oder mehrere Optionen aus einer begrenzten Anzahl von Möglichkeiten.
Beispiel
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Ich habe ein Fahrrad
ich habe ein Auto
Eingangstyp: button
<input type="button"> definiert eine button :
Beispiel
<input type="button" onclick="alert('Hello World!')" value="Click Me!"> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
HTML5 Input
HTML5 hinzugefügt mehrere neue input
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input nicht von alten Web - Browsern unterstützt wird , wird als verhalten input Text.
Input number
Die <input type="number"> wird für Eingabefelder verwendet , die einen numerischen Wert enthalten sollte.
Sie können Einschränkungen für die Zahlen festlegen.
Je nach Browser-Unterstützung können die Einschränkungen auf das Eingabefeld anzuwenden.
Beispiel
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Versuch es selber " Input
Hier ist eine Liste von einigen gemeinsamen input (some are new in HTML5) :
| Attribut | Beschreibung |
|---|---|
| disabled | Gibt an, dass ein Eingabefeld deaktiviert wird |
| max | Gibt den maximalen Wert für ein Eingabefeld |
| >maxlength | Gibt die maximale Anzahl von Zeichen für ein Eingabefeld |
| min | Gibt den Minimalwert für ein Eingabefeld |
| pattern | Gibt einen regulären Ausdruck den Eingangswert zu überprüfen gegen |
| readonly | Gibt an, dass ein Eingabefeld nur gelesen (cannot be changed) |
| required | Gibt an, dass ein Eingabefeld ist erforderlich (must be filled out) |
| size | Gibt die Breite (in characters) ein Eingabefeldes |
| step | Gibt die gesetzlichen Nummernintervalle für ein Eingabefeld |
| value | Gibt den Standardwert für ein Eingabefeld |
Sie werden mehr darüber erfahren input Einschränkungen im nächsten Kapitel.
Beispiel
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Versuch es selber " Input Typ: date
Die <input type="date"> wird für Eingabefelder verwendet , die ein Datum enthalten.
Je nach Browser-Unterstützung kann ein Datumsauswahl in dem Eingabefeld angezeigt.
Sie können Einschränkungen für den Add - input :
Beispiel
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> Versuch es selber " Input Farbe
Die <input type="color"> wird für Eingabefelder verwendet , die eine Farbe enthalten sollte.
Je nach Browser-Unterstützung kann ein Farbwähler in dem Eingabefeld angezeigt.
Beispiel
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Versuch es selber " Input Typ: Bereich
Die <input type="range"> wird für Eingabefelder verwendet , die einen Wert innerhalb eines Bereichs enthalten sollten.
Je nach Browser-Unterstützung kann das Eingabefeld als Schieberegler angezeigt.
Sie können die Verwendung following Attribute Einschränkungen angeben: min, max, Schritt, Wert.
Input month
Die <input type="month"> ermöglicht es dem Benutzer einen Monat und Jahr auszuwählen.
Je nach Browser-Unterstützung kann ein Datumsauswahl in dem Eingabefeld angezeigt.
Beispiel
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Versuch es selber " Input week
Die <input type="week"> ermöglicht es dem Benutzer eine Woche und Jahr auszuwählen.
Je nach Browser-Unterstützung kann ein Datumsauswahl in dem Eingabefeld angezeigt.
Input time
Die <input type="time"> ermöglicht es dem Benutzer , eine Zeit zu wählen (no time zone) .
Je nach Browser-Unterstützung kann eine Zeitauswahl in dem Eingabefeld angezeigt.
Input datetime
Die <input type="datetime"> ermöglicht es dem Benutzer ein Datum und eine Uhrzeit auszuwählen (with time zone) .
Beispiel
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Versuch es selber "  | Der Eingabetyp Datetime wird aus dem HTML-Standard entfernt. Verwenden Sie datetime-local statt. |
|---|
Eingangstyp: datetime-local
Die <input type="datetime-local"> ermöglicht es dem Benutzer ein Datum und eine Uhrzeit auszuwählen (no time zone) .
Je nach Browser-Unterstützung kann ein Datumsauswahl in dem Eingabefeld angezeigt.
Beispiel
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Versuch es selber " Eingangstyp: E-Mail
Die <input type="email"> - <input type="email"> wird für Eingabefelder verwendet , die eine E - Mail - Adresse enthalten.
Je nach Browser-Unterstützung, die E-Mail Adresse validiert werden kann automatisch, wenn eingereicht.
Einige Smartphones erkennen die E - Mail - Typ, und fügt hinzu ".com" auf der Tastatur E - Mail - Eingang entsprechen.
Eingangstyp: Suche
Die <input type="search"> ist für Suchfelder verwendet (a search field behaves like a regular text field) .
Beispiel
<form>
Search Google:
<input type="search" name="googlesearch">
</form> Versuch es selber " Eingangstyp: tel
Die <input type="tel"> wird für Eingabefelder verwendet , die eine Telefonnummer enthalten.
Der tel Typ ist derzeit nur in Safari 8 unterstützt.
Eingangstyp: url
Die <input type="url"> wird für Eingabefelder verwendet , die eine URL - Adresse enthalten.
Je nach Browser-Unterstützung kann das URL-Feld automatisch validiert werden, wenn eingereicht.
Einige Smartphones erkennen die URL - Typ, und fügt hinzu ".com" auf der Tastatur URL Eingabe übereinstimmen.