Es gibt viele Möglichkeiten, eine Webseite zu erstellen und zu gestalten. Nicht nur für CSS – zum Beispiel durch CSS Display oder CSS Transition -, sondern auch im HTML-Code. Eine von ihnen ist der sogenannte HTML Input. Was bewirkt er? Wie funktioniert er? Und: Wie gebraucht man ihn?
Inhalt
Was ist ein HTML Input?
HTML Input ist ein Element, das man in HTML-Seiten verwendet, um es Benutzern zu ermöglichen, Daten einzugeben, zu bearbeiten und zu speichern. Daher ist es eine Form der Benutzereingabe, die die Benutzeroberfläche einer Website beeinflusst.
Formen von HTML Input
HTML Input kann in den verschiedensten Formen (type) vorliegen. Beim Erstellen einer HTML-Seite kann ein Entwickler außerdem verschiedene Arten von HTML Input verwenden, um eine bestimmte Funktionalität zu ermöglichen. Hierbei spricht man von sogenannten Attributen. Zu den wichtigsten Formen gehören unter anderem Textfelder, Checkboxen, Dropdown-Menüs und Adressen-Angaben (zum Beispiel von Webseiten, E-Mail-Adressen oder Hausadressen).
Zum Beispiel kann ein Entwickler ein Textfeld verwenden, damit Benutzer einen Text eingeben können, oder ein Dropdown-Menü, um Benutzern eine Liste der Optionen anzuzeigen. HTML Input gebraucht man ebenfalls für die Erstellung von Formularen, in denen Benutzer ihre persönlichen Daten eingeben können.
Außerdem kann man einen HTML-Input ebenfalls in JavaScript-Code nutzen, um eine Webanwendung zu erstellen. Zum Beispiel: Wenn ein Benutzer eine bestimmte Aktion auf einer Website ausführt, kann der entsprechende JavaScript Code verwendet werden, um bestimmte Elemente auf der Seite zu ändern oder anzuzeigen.
Wie erstellt man nun einen HTML Input?
Willst Du zum Beispiel ein herkömmliches Textfeld auf Deiner Webseite erstellen, in dem Du Deinen Namen angeben kannst, so verwendest Du den folgenden Tag im HTML:
<input type="text" id="name" name="name">In der Regel wird ein HTML Input in Zusammenhang mit einem Label bzw. einer übergreifenden Form angegeben. Entsprechend sitzt der Input-Tag dazwischen.
Im Falle eines Textfeldes hast Du weiterhin die Möglichkeit, die Länge des Textfeldes mit Mindestanzahl (minlength) und Maximalanzahl (maxlength) sowie der Größe (size) der anzugebenden Buchstaben zu konkretisieren. Durch die Angabe von Namen, Buchstabenanzahl und Größe sprichst Du dem Input-Tag also Attribute zu.
Die weiteren Input-Formen werden nach demselben Prinzip angegeben. Welche Attribute sie haben können, ist von den jeweiligen Formen selbst abhängig.
Der Input-Tag im CSS
Den Input-Tag kann man ebenfalls im CSS angeben. Auch in diesem Fall muss man zuvor ein Label erstellen und darauf achten, wie die Anzeige auf der Webseite letztlich gestaltet werden soll. Dies wird mit den jeweiligen CSS-Eigenschaften (zum Beispiel CSS Display) geschaffen.
Auf einen Blick
Insgesamt ist HTML Input ein sehr mächtiges Werkzeug, das Entwicklern hilft, Websites und Webanwendungen auf Laptop und Co. zu erstellen, die für Benutzer zugänglich und interaktiv sind. Mithilfe dieses Tools sollen Benutzer in der Lage sein, ihre Daten anzugeben. Es gibt verschiedene Formen, wie man das macht, zum Beispiel mithilfe eines Textfeldes. Die jeweiligen Formen können weiterhin mit Attributen spezifiziert werden.
FAQ zu HTML Input
Wie die Bezeichnung als solche bereits vermuten lässt, geht es hierbei um die Eingabe – in diesem Fall um die Eingabe von Benutzerdaten, zum Beispiel Namen und Adressen. Die Art und Weise, wie diese Daten eingegeben, bearbeitet und gespeichert werden, steuert man mit einem HTML Input.
Der entsprechende Tag befindet sich im HTML-Format in einem Label-Tag. Der Input-Tag spezifiziert zuvor die Form des Inputs und kann mithilfe von Attributen spezifiziert werden: <input type=“hierkommtdieFormhin“ hierkommtdasAttributhin>
Input-Formen regeln die Art und Weise, wie die entsprechenden Daten von Benutzern auf einer Webseite eingegeben, bearbeitet sowie gespeichert werden können. Dies ist zum Beispiel in Form von einem Textfeld, als Checkboxen, etc. möglich.