HTML/Tutorials/Formulare/input/text
Während der Standardwert für input type="text" ist und eine Texteingabe erlaubt, gibt es weitere einzeilige Eingabefelder, deren Inhalt jeweils eine andere Bedeutung hat.
Inhaltsverzeichnis
type = "text"[Bearbeiten]
Ein Eingabefeld vom Typ text ist für die Eingabe kurzer einzeiliger Texte vorgesehen.
text
ist der Standardwert des type
-Attributes für input
-Elemente und kann deshalb – wie beim Feld zname – weggelassen werden. Es ist auch aus Gründen der CSS-Selektion oder des JavaScript-Zugriffs nicht mehr notwendig.
for
- bzw. id
-Attribute verwenden und mit einem label-Element verknüpfen. Siehe auch: HTML/Tutorials/Formulare/BeschriftungenFolgende Attribute können verwendet werden:
-
name
: für den Formularfeldzugriff mit JavaScript, bei CGI-Scripts und auch bei E-Mail-Formularen -
size
: Anzeigelänge in Zeichen -
maxlength
: interne Feldlänge in Zeichen. Wenn die interne Feldlänge größer ist als die angezeigte Feldlängesize
(wie im zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).
size
wird durch eine CSS-Angabe von width überschrieben.type = "search"[Bearbeiten]
Ein Eingabefeld vom Typ search (englisch Suche) ist für Eingabe von Suchbegriffen vorgesehen. Es unterscheidet sich von einem Eingabefeld des Typs text
nur unwesentlich.
Einige Browser ergänzen möglicherweise ein Lupensymbol, fügen ein Bedienfeld hinzu, welches das Eingabefeld leert oder passen ggf. automatisch den Wert eines input-Elements vom Typ submit
an.
type = "password"[Bearbeiten]
In einem Eingabefeld können Sie mit type="password"
Geheimnummern, Passwörtern usw. eingeben. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Sternchen) dargestellt, sodass Personen im Raum des Anwenders nicht zufällig das eingegebene Passwort mitlesen können.
<label for="email">E-Mail-Adresse</label>
<input id="email" required>
<label for="passwd">Passwort</label>
<input type="password" id="passwd" size="30" maxlength="40" required>
Passwörter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe im Klartext über das Internet übertragen. Weisen Sie Anwender in ernsthaften Zusammenhängen auf diese Tatsache bitte explizit hin. Für eine verschlüsselte Kommunikation zwischen Browser und Server gibt es das HTTPS-Protokoll, das der Web-Server unterstützen muss. Fragen Sie gegebenenfalls Ihren Provider oder Webmaster danach.
Sie können die Eingabe in ein Passwort-Eingabefeld sichtbar machen, indem Sie das type-Attribut mit setAttribute#Passwort sichtbar machen ändern.
Passwort-Felder unterscheiden sich von Textfeldern außerdem dadurch, dass der Browser Nutzereingaben in Textfeldern speichert und beim nächsten Mal wieder anbietet. Dass will man bei Passwort-Feldern nicht; fürs input-Element muss man autocomplete="off"
setzen.
type = "tel"[Bearbeiten]
MIt input type="tel"
können Sie ein Eingabefeld für eine Telefonnummer vorbereiten.
- Browserunterstützung
- caniuse.com
Bei mobilen Geräten wird eine angepasste Tastatur eingeblendet.
type = "url"[Bearbeiten]
Mit input type="url"
können Sie Web-Adressen eingeben. Schon während der Eingabe wird überprüft, ob diese eine gültige Web-Adresse ist.
- Browserunterstützung
- caniuse.com
Es wird überprüft, ob die Internet-Adresse valide ist. Im Internet Explorer 10 und Chrome erscheint sonst eine Fehlermeldung; Firefox und Opera verhindern ein Senden. Im Internet Explorer 9 und älter ist eine normale Texteingabe möglich.
Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe ein .com automatisch im Tastenfeld.
Die Browser bestehen auf einer vollständigen, validen Internet-Adresse. So ist
-
selfhtml.org
nicht valide -
www.selfhtml.org
nicht valide -
https://www.selfhtml.org
valide
value
mit dem Anfang der vollständigen, validen Internet-Adresse vor!type = "email"[Bearbeiten]
Mit input type="email"
können Sie E-Mail-Adressen eingeben. Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe das @-Symbol automatisch im Tastenfeld.
- Browserunterstützung
- caniuse.com
Es wird überprüft, ob die Eingabe ein @-Symbol beinhaltet und verhindert Satzzeichen außer dem Punkt hinter dem @. Im Internet Explorer 10 und Chrome erscheint dann eine Fehlermeldung; Firefox und Opera verhindern ein Senden. Im Internet Explorer 9 und älter ist eine normale Texteingabe möglich.
So können sie gleich clientseitig eine browsereigene Vorprüfung vornehmen lassen.
Die Browser verwenden folgenden regulären Ausdruck:[1]
[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*
input
-Elemente, derentype
-Attribut den Werttext
hat, als auch alleinput
-Elemente ohnetype
-Attribut selektiert.