Startseite ⇒ HTML Formular ⇒ Eingabefeld
1498 Aufrufe

Ein Einzeiliges HTML Eingabefeld erstellen

Das HTML Element input

input = Eingabe


Beschreibung:

Formular-Felder dienen der Eingabe von Daten, Texten und sonstigem. Mit dem HTML Element input können Sie ein einzeiliges Eingabefeld definieren.


Syntax:

Um ein einzeiliges Eingabefeld zu definieren notieren Sie das HTML Tag <input /> innerhalb des HTML Elementes form.


Quelltext:

<form action="URI">
  <input />
</form>

Ausgabe:

Sie können auch innerhalb des HTML Elementes form andere Elemente, wie z.B. einen Absatz verwenden.


Quelltext:

<form action="URI">
  <p>Einzeiliges Eingabefeld</p>
  <input />
</form>

Ausgabe:

Einzeiliges Eingabefeld



Eingabetyp -Das Attribut type

type = Typ


Beschreibung:

Mit dem Attribut type="Wert" können Sie festlegen was für eine Form das Eingabefeld haben soll. Standardeinstellung ist type="text". Wollen Sie ein Textfeld als Eingabefeld erzeugen, so brauchen Sie das Attribut nicht zu notieren. Der Vollständigkeit halber ist es aber empfehlenswert.


Syntax:

Das Attribut type="Wert" notieren Sie innerhalb des HTML Tags <input />. Dabei bestimmt "Wert" um was für einen Typ Eingabefeld es sich handelt.


Quelltext:

<form action="URI">
  <input type="text"/>
</form>

Ausgabe:



Bezeichnernamen -Das Attribut name

name = Name


Beschreibung:

Mit dem Attribut name="Bezeichnung" weisen Sie dem Eingabefeld einen internen Bezeichnernamen zu. Dies ist nicht unbedingt erforderlich, wird aber in meisten Fällen gebraucht, daher empfehle ich Ihnen, jedem Eingabefeld einen Namen zuzuweisen.


Syntax:

Das Attribut name="Bezeichnung" notieren Sie innerhalb des HTML Tags <input />. Dabei ist "Bezeichnung" der interne Bezeichnername des Eingabefeldes.


Quelltext:

<form action="URI">
  <input type="text" name="Feld1"/>
</form>

Ausgabe:



Größe bestimmen - Die Attribute size und maxlenght

size = Größe

maxlength = maximal length = maximale Länge


Beschreibung:

Mit den Attributen size="Wert" und maxlenght="Wert" können Sie die Anzeigelänge und die Feldlänge bestimmen. Dabei definiert das Attribut size="Wert" die Anzeigelänge und das Attribut maxlenght="Wert" die Feldlänge des Eingabefeldes in Zeichen.


Syntax:

Beide Attribute werden im HTML Tag <input /> notiert. Dabei gibt "Wert" eine Zahl an. Diese Zahl ist Länge des Feldes in Zeichen. In folgendem Bsp. hat das Feld eine Länge von 20 Zeichen, kann aber 50 Zeichen erfassen. Wenn die 30 Zeichen bei der Eingabe überschritten werden, so scrollt es automatisch weiter. Das zweite Eingabefeld wiederum hat eine Länge von 40 Zeichen, kann aber nur 10 Zeichen erfassen.


Quelltext:

<form action="URI">
<input type="text" name="Feld1" size="30" maxlength="50"/>
<input type="text" name="Feld1" size="50" maxlength="10"/>
</form>

Ausgabe:



Textvorbelegung - Das Attribut value

value = Wert


Beschreibung:

Um ein Eingabefeld mit einem bestimmten Text vorzubelegen können Sie das Attribut value="Wert" benutzen.


Syntax:

Das Attribut value="Wert" wird innerhalb des HTML Tags <input /> notiert. Dabei tragen Sie für "Wert" das ein was im Eingabefeld als Vorbelegung erscheinen soll.


Quelltext:

<form action="URI">
<input type="text" name="Feld1" size="20" maxlength="15" value="Vorname"/>
<input type="text" name="Feld1" size="20" maxlength="15" value="Nachname"/>
</form>

Ausgabe:



Ausgabefelder - Das Attribut readonly

readonly = nur lesen


Beschreibung:

Sie können mit dem Attribut readonly definieren dass ein Eingabefeld zu einem Ausgabefeld wird. Dabei kann der User in das Eingabefeld nichts eintragen. Dies kannn sinnvoll sein wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender nicht ändern können soll.


Syntax:

Das Attribut readonly wird innerhalb des HTML Tags <input /> notiert. Dabei hat das Attribut in HTML keinen Wert. Wollen Sie XHTML-konform arbeiten so müssen Sie readonly="readonly" im HTML Tag <input /> notieren.


Quelltext:

<form action="URI">
Preis:<br />
<input name="preis" type="text" size="10" value="&euro; 500.-" readonly="readonly" />
</form>

Ausgabe:

Preis:


Eingabefelder für Passwörter

type="password" = Typ="Passwort"


Beschreibung:

Bei Eingabefelder für Passwörter, Geheimnummern usw. gibt es die Möglichkeit, die eingegebenen Zeichen durch Platzhalter darzustellen.


Syntax:

Das Attribut type="password" wird innerhalb des HTML Tags <input /> notiert. Das Attribut type hat dabei den Wert "password".


Quelltext:

<form action="URI">
Kennwort:<br />
<input type="password" name="kennwort" size="20" maxlength="15" />
</form>

Ausgabe:

Kennwort:


Weiterführende Informationen:


Weblinks: