HTML/Elemente/input

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

Das input-Element wird innerhalb von Formularen genutzt, um Daten vom Benutzer abzufragen. Dabei kann das input-Element ganz unterschiedlich aussehen - vom Eingabefeld bis hin zur Checkbox, zum Radio-Button oder sogar einem Farbwähler.
Die Art des Eingabefeldes wird über das type-Attribut festgelegt. Mit HTML5 wurden für viele Anwendungsbereiche neue Typen (Übersicht) geschaffen.

Syntax
Start-Tag: notwendig
End-Tag: verboten
WAI‑ARIA‑Rolle
  • keine, falls type = date, datetime, datetime-local, week, month, time, file, hidden
  • button, falls type = button, image, reset, submit
  • checkbox, falls type = checkbox
  • combobox, falls type = text, search, tel, url, email mit Vorschlägen
  • menuitem, falls type = button, image in einem menu-Element
  • menuitemcheckbox, falls type = checkbox in einem menu-Element
  • menuitemradio, falls type = radio in einem menu-Element
  • radio, falls type = radio
  • slider, falls type = range
  • spinbutton, falls type = number
  • textbox, falls type = email, password, search, tel, text, url ohne Vorschläge
    • ?, falls type = color
  • (Details)

Elternelemente
Darf vorkommen in:
Elementen mit flow content
erlaubte Inhalte

keine, leeres Element
Beispiel 
<form>
  <label for="vname">Vorname:
    <input id="vname" name="vname">
  </label>
  <label for="zname">Zuname: 
    <input id="zname" name="zname">
  </label>
  <label for="männl">männlich</label>
    <input type="radio" id="männl" name="geschlecht" value="0">
  <label for="weibl">weiblich</label>
    seagreen<input type="radio" id="weibl" name="geschlecht" value="1">
  <label for="queer">queer</label>
    seagreen<input type="radio" id="queer" name="geschlecht" value="2">

  <label for="alter">über 18:</label>
  <input type="checkbox" id="alter" name="alter">

  <input type="submit" value="senden">
</form>

Im Codebeispiel finden sich verschiedene Eingabefelder, die je nach type ganz verschiedene Einsatzzwecke haben.

Beachten Sie: Das <input>-Tag ist ein so genanntes Standalone-Tag. In HTML5 können Sie den schließenden Schrägstrich (/) weglassen.
Attribute
Name Inhalt Standardwert Bedeutung
Universalattribute
id ID identifiziert ein einziges Element innerhalb eines Dokuments
class CDATA ordnet ein Element einer oder mehreren Klassen zu.
accesskey ID Tastaturkürzel
contenteditable CDATA editierbarer Inhalt
contextmenu definiert Kontextmenü
dir ltr, rtl definiert die Schreibrichtung innerhalb des Dokuments
draggable ID kann mit Drag & Drop gezogen werden
dropzone CDATA Aktion bei Ablegen
hidden versteckter Inhalt
lang NAME legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
spellcheck ID Rechtschreibprüfung
Sollte auch für input type="password" deaktiviert werden.
style CDATA notiert direkt in einem Element- style sheet data
tabindex NAME zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird.
title CDATA betitelt oder beschreibt ein Element.
type Schlüsselwort
(siehe Detailseite)		 text Legt fest, welche Art von Eingabeelement verwendet werden soll.
accept CDATA Für type="file" listet das Attribut durch Komma getrennt die Dateitypen auf, die der Browser vom Anwender akzeptieren soll. Welche Dateitypen möglich sind, finden Sie auf der Detailseite zum Attribut.
autocomplete off, on bestimmt, ob der, im Element eingegebene Wert, automatisch durch den Browser vervollständigt werden kann. Dieses Attribut wird ignoriert, wenn der Typedes Elementes hidden, password, checkbox, radio, file oder eine Schaltfläche ist.
alt CDATA alternativer Text, der angezeigt wird, wenn das Element vom Typ Image ist und das Bild nicht geladen werden kann.
autofocus Boolesches Attribut Focus wird beim Laden auf dieses Element gelegt.
checked Boolesches Attribut bestimmt, dass Radio-Schaltflächen und Checkboxen vorausgewählt sind
disabled Boolesches Attribut legt fest, dass das Element ausgegraut, d.h. nicht benutzbar ist
form CDATA Identifizierungsname des form-Elements mit dem es in Verbindung steht.
formaction CDATA URI der Datei (Script), die die Verarbeitung der Eingaben übernimmt.
formenctype application/x-www-form-urlencoded, multipart/form-data, text/plain application/x-www-form-urlencoded legt den Inhalts-Typ fest.
formmethod GET, POST bestimmt, mit welcher Anfragemethode der Browser die Daten des Elements übermittelt.
formnovalidate Boolesches Attribut legt fest, dass das Formular vor dem Senden nicht überprüft wird, wenn das Element vom Type button oder image ist.
formtarget _self, _blank, _parent, _top _self bestimmt das Zielfenster, in dem die ausgewerteten Daten angezeigt werden, wenn das Eingabeelement vom Type button oder image ist.
height CDATA bestimmt die Höhe des Elements, wenn das Element vom Typ image ist.
inputmode verbatim, latin, latin-name, latin-prose, full-width-latin, kana, katakana, numeric, tel, email, url Ein Hinweis an den Browser, welche Tastatur angezeigt werden soll, wenn das Element vom Typ text, password, email oder url ist.
list CDATA Identifizierungsname des datalist-Elements mit dem es in Verbindung steht.
max NUMBER maximaler (numerischer oder Datum/Uhrzeit) Wert für dieses Element, das nicht weniger als der Minimalwert (min-Attribut) sein darf.
maxlength NUMBER Die maximale Anzahl von Zeichen für ein Textfeld, wenn diese vom Typ text, email, search, password, tel, oder url ist.
min NUMBER Der minimale (numerische oder Datum/Uhrzeit) Wert für dieses Element, das nicht größer als der Maximalwert (max-Attribut) sein darf.
minlength NUMBER Die minimale Anzahl von Zeichen für ein Textfeld, wenn diese vom Typ text, email, search, password, tel, oder url ist.
multiple Boolesches Attribut Bestimmt, dass der Benutzer mehr als einen Wert auswählen kann, wenn der Typ des Elements email oder file ist.
name CDATA Name des Elementes, welcher mit den Formulardaten übermittelt wird.
pattern CDATA Suchmuster mit Hilfe von Regulären Ausdrücken.
placeholder CDATA Platzhalter die die Art der Eingabe vorschlagen.
readonly Boolesches Attribut bestimmt, dass der Wert des Elements nicht verändert werden kann. Ist das Element vom Type hidden, range, color, checkbox, radio, file oder button, wird dieses Attribut ignoriert.
required Boolesches Attribut bestimmt, dass eine Eingabe in das Element erfolgen muss, bevor es abgesendet werden kann. Das Attribut kann nicht genutzt werden, wenn das Eingabeelement vom Type hidden, image, oder button ist.
size CDATA bestimmt die Größe des Elementes in Pixeln, es sei denn der Typ des Elementes ist text oder password. In diesem Fall wäre es die Anzahl an Zeichen.
src CDATA Wenn das Eingabeelement vom Typ image ist, gibt dies den URI Verzeichnisspfad des Bildes an, welches auf der Schaltfläche angezeigt wird. Anderfalls wird dieses Attribut ignoriert.
step CDATA legt Schritte für die min und max Attribute fest
value CDATA bestimmt den Initialisierungswert des Elements. Dieser Wert wird ignoriert, wenn das Element vom Typ radio oder checkbox ist.
width CDATA Wenn das Element vom Type Bild ist, definiert dieses Attribut die Breite des Bildes das auf der Schaltfläche angezeigt wird.

Attribut: Pflichtattribut
Attribut: optionales Attribut

Siehe auch

  • Eingabe von Text
    • type =text
    • type =search
    • type ="password"
    • type ="tel"
    • type ="url"
    • type = "email"
     
  • Eingabe von Zahlen
    • type="number"
    • type="range"
    • inputmode
     
  • Eingabe von Zeitangaben
    • type="date"
    • type = "datetime-local"
    • type = "week"
    • type = "month"
    • type = "time"
     
  • Auswahllisten
    • type = "radio"
    • type = "checkbox"
     
  • Formulare/Auslösen von Benutzeraktionen
    • type = "button"
    • type = "submit"
    • type = "image"
    • type = "reset"
     
  • Farbwähler

    type = "color"

     
  • Versteckte Elemente

    type = "hidden"

     
  • File Upload

    type = "file"

     

Weblinks

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