HTML/Formulare/input/text

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

Wärend 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"[Bearbeiten]

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

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 4.0
Beispiel: input-Element, type text ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>input-Element, type text</title> </head> <body> <form> <label for="vname">Vorname: <input type="text" id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> </form> </body> </html>

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: Formulare gestalten

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"[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.

  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
  • HTML5
Beispiel: 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 als Eingabemöglichkeiten verschiedene Vogelnamen vorschlägt. Es können aber auch Begriffe eingegeben werden, die nicht zu den Vorschlägen gehören.

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.

Beachten Sie: Die Browser-Unterstützung des hier vorgestellten datalist-Elements ist noch (Stand: Oktober 2015) nicht so gut, die Funktionalität des Suchformulars ist trotzdem gewährleistet. Siehe auch: caniuse.com/datalist


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.

  • Leer
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: Pflichtangaben ansehen …
    <label for="bname">Benutzername:</label> 
    <input type="text" id="bname" size="30" maxlength="30" required>
 
    <label for="passwd">Passwort</label>  
    <input type="password" id="passwd" size="30" maxlength="40" required>


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.


type = "tel"[Bearbeiten]

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

  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
  • HTML5

Details: caniuse.com

Beispiel: Telefonnummerneingabe mit type="tel"
<!doctype html>
<html>
  <form action="input.htm">
    Geben Sie ihre Mobilnummer ein: <input type="tel" name="MobilNummer" placeholder="0179-">
  </form>
</html>

Bei mobilen Geräten wird das Nummernfeld 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.

  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
  • HTML5

Details: caniuse.com

Beispiel: Eingabe einer Internet-Adresse
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Eingabe einer Internet-Adresse</title>
</head>
<body>
  <h1>Kontaktformular</h1>
  <form action="input.htm">
    <label>url: <input type="url" name="deine-url" value="http://www."></label><br>
    <input type="submit">
  </form>
</body>
</html>

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
http://www.selfhtml.org valide
Empfehlung: Belegen Sie value mit dem Anfang der vollständigen, validen Internet-Adresse vor!


type = "email"[Bearbeiten]

Mit input type="email" können Sie Email-Adressen eingeben. Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe das @-Symbol automatisch im Tastenfeld.

  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
  • HTML5

Details: caniuse.com

Beispiel: Eingabe der email-Adresse
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Eingabe der email-Adresse</title>
</head>
<body>
  <h1>Kontaktformular</h1>
  <form action="input.htm">
    <label>email: <input type="email" name="email"></label>
    <input type="submit">
  </form>
</body>
</html>

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 RegEx.[1]

[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*

Weblinks[Bearbeiten]

  1. W3C: input type=email – e-mail address input control