Beispiel
Ein HTML-Formular mit zwei verschiedenen Eingangstypen; Text und einreichen:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Versuch es selber " Mehr "Versuchen Sie es selbst" Beispiele unten.
Definition und Verwendung
Der type - Attribut gibt den Typ des <input> Element angezeigt werden soll .
Der Standardtyp ist: text .
Tipp: Dies ist kein erforderliches Attribut, aber wir denken , dass Sie immer sollte es enthalten.
Browser-Unterstützung
| Attribut | |||||
|---|---|---|---|---|---|
| type | ja | ja | ja | ja | ja |
Hinweis: Der type - Attribut in allen gängigen Browsern funktioniert. Allerdings sind nicht alle die verschiedenen Eingabetypen funktioniert in allen gängigen Browsern.
Schauen Sie unten Browser - Unterstützung für jeden Eingabetyp zu sehen.
Unterschiede zwischen HTML 4.01 und HTML5
HTML5 hat die folgenden neuen Eingabetypen: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel - url color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel und url .
Syntax
<input type="value">
Werte Attribut
| Wert | Beschreibung |
|---|---|
| button | Definiert eine anklickbare Schaltfläche (meist mit einem JavaScript verwendet, aktivieren Sie ein Skript) |
| checkbox | Definiert eine Checkbox |
| color | Definiert eine Farbauswahl |
| date | Definiert ein Datum Kontrolle (Jahr, Monat und Tag (keine Zeit)) |
| datetime | Der Eingabetyp Datetime wurde aus dem HTML-Standard entfernt. Verwenden Sie datetime-local statt. |
| datetime-local | Definiert ein Datum und eine Zeitsteuerung (Jahr, Monat, Tag, Stunde, Minute, Sekunde und Sekundenbruchteile (keine Zeitzone) |
| Definiert ein Feld für eine E-Mail-Adresse | |
| file | Definiert eine Datei-Auswahlfeld und eine "Durchsuchen ..." (für das Hochladen von Dateien) |
| hidden | Definiert eine versteckte Eingabefeld |
| image | Legt ein Bild als Submit-Button |
| month | Definiert einen Monat und Jahr Kontrolle (keine Zeitzone) |
| number | Definiert ein Feld für die Eingabe einer Nummer |
| password | Definiert ein Passwort-Feld (Zeichen sind maskiert) |
| radio | Definiert ein Optionsfeld |
| range | Definiert eine Steuerung für die Eingabe einer Zahl, deren genaue Wert ist nicht wichtig (wie ein Schieberegler) |
| reset | Definiert eine Reset-Taste (setzt alle Formularwerte auf Standardwerte) |
| search | Definiert ein Textfeld für einen Suchbegriff eingeben |
| submit | Definiert einen Submit-Button |
| tel | Definiert ein Feld für die Eingabe einer Telefonnummer |
| text | Standard. Definiert eine einzeilige Textfeld (Standardbreite beträgt 20 Zeichen) |
| time | Definiert eine Steuerung für die Eingabe einer Zeit (keine Zeitzone) |
| url | Definiert ein Feld für die Eingabe einer URL |
| week | Definiert eine Woche und Jahr Kontrolle (keine Zeitzone) |
Beispiele
Eingang: button
Beispiel
Eine anklickbare Schaltfläche, die eine JavaScript aktiviert, wenn es angeklickt wird:
<input type="button" value="Click me" onclick="msg()">
Versuch es selber " Eingang: checkbox
Beispiel
Ankreuzfelder lassen ein Benutzer eine oder mehrere Optionen aus einer begrenzten Anzahl von Möglichkeiten:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Versuch es selber " Eingangstyp: color
Beispiel
Wählen Sie eine Farbe aus einem Farbauswahl:
Select your favorite color: <input type="color" name="favcolor"> Versuch es selber " Eingang: date
Beispiel
Definieren Sie ein Datum Kontrolle:
Birthday: <input type="date" name="bday"> Versuch es selber " Eingangstyp: datetime
Beispiel
Definieren Sie ein Datum und eine Zeitsteuerung (mit Zeitzone):
Birthday (date and time): <input type="datetime" name="bdaytime"> Versuch es selber " Der Eingabetyp Datetime wurde aus dem HTML-Standard entfernt. Verwenden Sie datetime-local statt.
Eingangstyp: datetime-local
Beispiel
Definieren Sie ein Datum und eine Zeitsteuerung (keine Zeitzone):
Birthday (date and time): <input type="datetime-local" name="bdaytime"> Versuch es selber " Eingang: email - email
Beispiel
Definieren Sie ein Feld für eine E-Mail-Adresse (wird automatisch überprüft, wenn eingereicht):
E-mail: <input type="email" name="usremail"> Versuch es selber " Tipp: Safari auf dem iPhone die E - Mail - Typ erkennt und ändert die On-Screen - Tastatur , um es zu entsprechen (fügt @ und .com - Optionen).
Eingang: file
Beispiel
Definieren Sie eine Datei-Auswahlfeld und eine "Durchsuchen ..." (für das Hochladen von Dateien):
Select a file: <input type="file" name="img">
Versuch es selber " Eingang: hidden
Beispiel
Definieren Sie ein verstecktes Feld (nicht für einen Benutzer sichtbar).
Ein verstecktes Feld speichert oft einen Standardwert, oder kann sein Wert durch einen JavaScript geändert haben:
<input type="hidden" name="country" value="Norway">
Versuch es selber " Eingang: image
Beispiel
Definieren Sie ein Bild als Submit-Button:
<input type="image" src="img_submit.gif" alt="Submit">
Versuch es selber " Eingang: month
Beispiel
Definieren Sie einen Monat und Jahr Kontrolle (keine Zeitzone):
Birthday (month and year): <input type="month" name="bdaymonth"> Versuch es selber " Eingang: number
Beispiel
Definieren Sie ein Feld für die Eingabe einer Nummer (Sie können auch festlegen, Einschränkungen auf, welche Zahlen werden akzeptiert):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> Versuch es selber " Verwenden Sie die following Attribute Einschränkungen angeben:
- max - gibt den maximal zulässigen Wert
- min - gibt den Minimalwert erlaubt
- step - gibt die gesetzlichen Nummernintervalle
- value - Gibt den Standardwert
Eingang: password
Beispiel
Definieren Sie ein Passwort-Feld (Zeichen maskiert)
<input type="password" name="pwd">
Versuch es selber " Eingang: radio
Beispiel
Radio-Buttons lassen ein Benutzer nur eine von einer begrenzten Anzahl von Möglichkeiten wählen:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Versuch es selber " Eingang: range
Beispiel
Definieren Sie eine Steuerung zur Eingabe einer Zahl, deren genaue Wert ist nicht wichtig (wie ein Schieberegler). Sie können einstellen, auch Beschränkungen auf, was Zahlen akzeptiert werden:
<input type="range" name="points" min="0" max="10"> Versuch es selber " Verwenden Sie die following Attribute Einschränkungen angeben:
- max - gibt den maximal zulässigen Wert
- min - gibt den Minimalwert erlaubt
- step - gibt die gesetzlichen Nummernintervalle
- value - Gibt den Standardwert
Eingang: reset
Beispiel
Definieren Sie eine Reset-Taste (setzt alle Formularwerte auf Default-Werte):
<input type="reset"> Versuch es selber " Tipp: Verwenden Sie vorsichtig die Reset - Taste!Es kann für die Benutzer lästig sein, die die Reset-Taste versehentlich aktivieren.
Eingang: search
Beispiel
Definieren Sie ein Suchfeld (wie eine Website-Suche oder Google-Suche):
Search Google: <input type="search" name="googlesearch"> Versuch es selber " Eingang: submit
Eingang: tel
Beispiel
Definieren Sie ein Feld eine Telefonnummer eingeben:
Telephone: <input type="tel" name="usrtel"> Versuch es selber " Eingang: text
Beispiel
Definieren Sie zwei einzeilige Textfelder, die ein Benutzer Text eingeben:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Versuch es selber " Eingang: time
Beispiel
Definieren Sie eine Steuerung für eine Zeit eingeben (keine Zeitzone):
Select a time: <input type="time" name="usr_time"> Versuch es selber " Eingang: url
Beispiel
Definieren Sie ein Feld eine URL für die Eingabe von:
Add your homepage: <input type="url" name="homepage"> Versuch es selber " Tipp: Safari auf dem iPhone erkennt die URL - Eingabetyp und ändert die On-Screen - Tastatur , um es anzupassen (fügt .com - Option).
Eingang: week
Beispiel
Definieren Sie eine Woche und Jahr Kontrolle (keine Zeitzone):
Select a week: <input type="week" name="week_year"> Versuch es selber "