LU06b - Eingabefelder

Siehe auch selfhtml - input

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.

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>
...

Beachten Sie, dass der Wert for='email' im Label mit id='email' im Input übereinstimmen muss.

Kevin Maurizi, Marcel Suter