HTML/Elemente/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"
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"
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"
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>
Ein Passwortfeld in HTML ist keine Abfrage für geschützte Web-Seiten. Lesen Sie zu diesem Thema den Abschnitt über .htaccess - Server-Reaktionen kontrollieren.
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. Zudem bieten Browser für Textfelder eine Rechtschreibprüfung an. Das will man bei Passwort-Feldern nicht; fürs input-Element muss man daher autocomplete="off" spellcheck="false"
setzen.
Achtung!
spellcheck="false"
deaktiviert werden. Die erweiterte Rechtschreibprüfung nutzt ansonsten einen Webservice zum Prüfen der Eingabe, sprich des Passworts, sendet also das Passwort an den Webservice. [1] type = "tel"
MIt input type="tel"
können Sie ein Eingabefeld für eine Telefonnummer vorbereiten.
Bei mobilen Geräten wird eine angepasste Tastatur eingeblendet.
type = "url"
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.
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.
-
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"
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.
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:[2]
[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*
Quellen
- ↑ chrome-and-edge-enhanced-spellcheck-features-expose-pii-even-your-passwords (otto-js.com)
- ↑ W3C: input type=email – e-mail address input control
input
-Elemente, derentype
-Attribut den Werttext
hat, als auch alleinput
-Elemente ohnetype
-Attribut selektiert.