LU06b - Eingabefelder

Auf dieser Seite befassen wir uns mit input, textarea und label für die Eingabefelder unserer Formulare.

Das input-Element zeigt dem Benutzer ein einzeiliges Eingabefeld an. Es benötigt die Attribute:

id
name
type

input ist ein Standalone-Tag, welches kein schliessendes Tag benötigt.

...
  <input id='title' name='title' type='text'>
  <input id='title' name='title' type='text' />
...

Beide Varianten sind korrekt.

Der Name eines Eingabefeldes wird für die Übermittelung der Daten an den Server benötigt. Der Client sendet die Eingaben des Benutzers als Schlüssel/Wert-Paar (engl. key/value-pair) an den Server. Zum Beispiel: email=hans@must.er.

Durch den Schlüssel (bzw. Namen) email weiss der Server, um welches Attribut es geht.

Das type-Attribut legt die Art des Eingabefeldes fest. Dadurch wird einerseits das Aussehen des Feldes angepasst. Ausserdem kann der Browser anhand des Typs gültige von ungültigen Eingaben unterscheiden.

Unter selfhtml - input finden Sie eine Übersicht der verschiedenen Möglichkeiten für type. Falls Sie keinen oder einen ungültigen type angeben (was ich beides nicht empfehle), so wird type='text' angenommen.

Jenachdem welchen type Sie angeben, gibt es unterschiedliche weitere Attribute. Einige Attribute können Sie nutzen, um Regeln für gültige Eingaben zu definieren. Zum Beispiel:

minlength
required
max

Stöbern Sie in den Beschreibungen des input-Tags auf SelfHTML oder W3School um die verschiedenen Attribute kennenzulernen.

textarea

siehe auch selfhtml - textarea Das Element textarea zeigt ein mehrzeiliges Eingabefeld an. Wir bei input benötigen wir die Attribute

id
name

Zusätzlich können Sie über die Attribute cols und rows die Grösse der Anzeige in Spalten und Zeilen bestimmen.

selfhtml - label

Mit dem Element label ordnen wir den Eingabefeldern eine Beschriftung hinzu. Zu welchem Eingabefeld die Beschriftung gehört, legen wir über das Attribut for='…' fest.

...
  <form action='./index.php' method='post'>
    <label for='email'>Email</label>
    <input id='email' name='email_address' type='text' />
    ...
  </form>
...