HTML/Tutorials/Formulare/input/text

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Formulare‎ | input
Wechseln zu: Navigation, Suche

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.

type = "text"

Ein Eingabefeld vom Typ text ist für die Eingabe kurzer einzeiliger Texte vorgesehen.

input-Element, type text ansehen …
<form> <label for="vname">Vorname: <input type="text" id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> </form>
ansehen …

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.

Empfehlung: Ordnen Sie den Eingabefeldern eine Beschriftung zu, indem Sie for- bzw. id-Attribute verwenden und mit einem label-Element verknüpfen. Siehe auch: HTML/Tutorials/Formulare/Beschriftungen

Folgende 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änge size (wie im zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).
Beachten Sie: Eine Breitenangabe durch size wird durch eine CSS-Angabe von width überschrieben.
Beispiel
input[type="text"], input:not([type]) { … }
Durch diese Deklaration werden sowohl die input-Elemente, deren type-Attribut den Wert text hat, als auch alle input-Elemente ohne type-Attribut selektiert.

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.

Suchfeld mit type="search" ansehen …
<form> <input type="search" list="Vögel"> <datalist id="Vögel"> <option value="Amsel"> <option value="Buntspecht"> <option value="Drossel"> <option value="Eisvogel"> <option value="Fink"> <option value="Graugans"> <option value="Meise"> <option value="Spatz"> <option value="Specht"> </datalist> <button>suchen</button> </form>
Hier ist ein Suchfeld zu sehen, welches mittels des datalist-Elements verschiedene Vogelnamen als Eingabemöglichkeiten vorschlägt. Es können aber auch Begriffe eingegeben werden, die nicht zu den Vorschlägen gehören.
ansehen …

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.

Beispiel ansehen …
<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>
ansehen …


Beachten Sie: 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.
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!

Neben dem Ausschalten der Autovervollständigung muss auch die Rechtschreibprüfung mit 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]
Empfehlung: Passwortabfragen erfolgen meist in Kombination mit einem Benutzernamen oder einer E-Mail-Adresse. Bei der Verwendung von Benutzernamen muss bei der Registrierung überprüft werden, ob dieser schon vergeben ist. Für viele Benutzer ist es schwierig, sich viele verschiedene Benutzernamen und Passwörter zu merken. Damit nicht das berüchtigte PostIt mit den Zugangsdaten am Monitor verwendet wird, ist es benutzerfreundlicher, wenn Sie die E-Mail-Adresse des Benutzers abfragen. Diese ist jedem immer bekannt und genau so sicher wie ein individueller Benutzername.

type = "tel"

MIt input type="tel" können Sie ein Eingabefeld für eine Telefonnummer vorbereiten.

Browserunterstützung
caniuse.com
Telefonnummerneingabe mit type="tel"
<form> <label>Geben Sie ihre Mobilnummer ein: <input type="tel" name="MobilNummer" placeholder="0179-"> </label> </form>

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.

Browserunterstützung
caniuse.com
Eingabe einer Internet-Adresse
<form> <label>url: <input type="url" name="deine-url" value="https://"> </label> </form>

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.

Beachten Sie: 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
Empfehlung: Belegen Sie 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.

Browserunterstützung
caniuse.com
Eingabe der E-Mail-Adresse
<form> <label>E-Mail: <input type="email" name="email"> </label> </form>

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

  1. ↑ chrome-and-edge-enhanced-spellcheck-features-expose-pii-even-your-passwords (otto-js.com)
  2. ↑ W3C: input type=email – e-mail address input control

Siehe auch

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Formulare/input/text&oldid=89156“