Benutzer:Apsel/input/text

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Achtung!

Diese Seite ist noch in Arbeit, die Informationen können noch unvollständig sein. Bis dahin verweise ich auf die Seiten input bzw. button.

Es handelt sich hierbei um 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.

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: Juli 2015) nicht so gut, die Funktionalität des Suchformulars ist trotzdem gewährleistet. Siehe auch: caniuse.com/datalist

type = "password"[Bearbeiten]

  • 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 id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> </form> </body> </html>

type = "tel"[Bearbeiten]

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

Details: caniuse.com

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 id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> </form> </body> </html>

type = "url"[Bearbeiten]

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

Details: caniuse.com

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 id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> </form> </body> </html>

type = "email"[Bearbeiten]

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

Details: caniuse.com

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 id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> </form> </body> </html>