html mit Adi Prinz

Ein mehrzeiliges Eingabefeld erstellen

Im Gegensatz zu den meisten Eingabefeldern wird ein Textbereich nicht mit input, sondern mit einem eigenen öffnenden und schließenden textarea-Tag erstellt.

<label for="nachricht">Nachricht:</label>

<textarea
  id="nachricht"
  name="nachricht"></textarea>
    

Der eingegebene Text steht zwischen dem öffnenden und dem schließenden textarea-Tag. Ein value-Attribut wird bei textarea nicht verwendet.

Die sichtbare Größe festlegen

Mit rows wird die sichtbare Anzahl der Textzeilen angegeben. Das Attribut cols legt ungefähr fest, wie viele Zeichen pro Zeile sichtbar sind.

<label for="beschreibung">Beschreibung:</label>

<textarea
  id="beschreibung"
  name="beschreibung"
  rows="6"
  cols="40"></textarea>
    

In einem responsiven Layout wird die Breite meistens mit CSS festgelegt. Die Bootstrap-Klasse form-control sorgt hier dafür, dass der Textbereich die verfügbare Breite verwendet.

Einen Textbereich vorbelegen

Ein vorgegebener Text wird zwischen den beiden textarea-Tags eingetragen.

<label for="anmerkung">Anmerkung:</label>

<textarea
  id="anmerkung"
  name="anmerkung"
  rows="4">Bitte senden Sie mir weitere Informationen.</textarea>
    

Leerzeichen und Zeilenumbrüche zwischen den Tags gehören zum Inhalt des Textbereichs. Deshalb sollte ein leerer Textbereich ohne zusätzlichen Zeilenumbruch geschrieben werden: <textarea></textarea>.

Einen Hinweistext anzeigen

Mit placeholder kann ein kurzer Hinweis angezeigt werden. Dieser verschwindet, sobald der Benutzer einen Text eingibt.

<label for="kommentar">Kommentar:</label>

<textarea
  id="kommentar"
  name="kommentar"
  rows="5"
  placeholder="Schreiben Sie hier Ihren Kommentar."></textarea>
    

Ein Platzhalter ersetzt keine sichtbare Beschriftung. Für eine verständliche und barrierearme Bedienung sollte weiterhin ein label vorhanden sein.

Einen Textbereich zum Pflichtfeld machen

Das boolesche Attribut required verhindert das Absenden des Formulars, solange kein Text eingegeben wurde.

<label for="begruendung">Begründung:</label>

<textarea
  id="begruendung"
  name="begruendung"
  rows="5"
  required></textarea>
    

Die Textlänge begrenzen

Mit minlength und maxlength können die minimale und die maximale Anzahl der eingegebenen Zeichen festgelegt werden.

<label for="feedback">Feedback:</label>

<textarea
  id="feedback"
  name="feedback"
  rows="5"
  minlength="10"
  maxlength="300"
  required></textarea>
    

maxlength begrenzt die Eingabe direkt. Die Prüfung von minlength erfolgt normalerweise beim Absenden des Formulars. Beide Werte müssen zusätzlich auf dem Server kontrolliert werden.

Textbereiche deaktivieren oder schützen

Mit readonly bleibt der Inhalt lesbar und kann beim Absenden übertragen werden. Mit disabled ist das Feld deaktiviert und wird nicht übertragen.

<textarea name="hinweis" readonly>Dieser Text kann nicht geändert werden.</textarea>

<textarea name="interne-notiz" disabled>Dieses Feld ist deaktiviert.</textarea>
    

Praxisbeispiel: Kontaktanfrage

Das Absenden wird in diesem Lernbeispiel mit onsubmit="return false;" verhindert. Die integrierte HTML-Validierung kann trotzdem ausprobiert werden.

Ein Formular absenden

Eine Schaltfläche mit type="submit" sendet das zugehörige Formular ab. Vor dem Absenden führt der Browser normalerweise die integrierte HTML-Validierung aus.

<button type="submit">
  Formular absenden
</button>
    

Wird die Schaltfläche betätigt, prüft der Browser zunächst das Pflichtfeld und das Format der E-Mail-Adresse. In diesem Lernbeispiel verhindert onsubmit="return false;" die tatsächliche Übertragung.

Eingaben zurücksetzen

Eine Schaltfläche mit type="reset" setzt die Formularfelder auf ihre ursprünglichen Werte zurück. Das bedeutet nicht immer, dass alle Felder anschließend leer sind.

<button type="reset">
  Eingaben zurücksetzen
</button>
    

Ändern Sie die beiden Felder und betätigen Sie anschließend die Reset-Schaltfläche. Die ursprünglich im HTML festgelegten Werte werden wiederhergestellt.

Eine allgemeine Schaltfläche erstellen

Eine Schaltfläche mit type="button" besitzt zunächst keine eigene Formularfunktion. Ihre Aktion wird üblicherweise mit JavaScript festgelegt.

<button
  type="button"
  id="hilfe-anzeigen">
  Hilfe anzeigen
</button>
    

Ohne JavaScript löst diese Schaltfläche keine weitere Aktion aus. type="button" eignet sich beispielsweise zum Öffnen eines Dialogfensters, zum Ein- und Ausblenden von Inhalten oder zum Berechnen eines Wertes.

Das button-Element verwenden

Beim button-Element steht die sichtbare Beschriftung zwischen dem öffnenden und dem schließenden Tag. Dadurch können neben Text auch weitere HTML-Elemente eingefügt werden.

<button type="submit">
  <strong>Anmeldung absenden</strong>
</button>
    

Im Unterschied dazu wird bei input-Schaltflächen die Beschriftung mit dem value-Attribut festgelegt:

<input
  type="submit"
  value="Anmeldung absenden">
    

Das button-Element ist flexibler und wird für neue Formulare meistens bevorzugt.

Den Schaltflächentyp immer angeben

Befindet sich ein button-Element innerhalb eines Formulars, ist der Standardtyp normalerweise submit. Eine vermeintlich allgemeine Schaltfläche könnte daher unbeabsichtigt das Formular absenden.

<button type="button">
  Vorschau anzeigen
</button>

<button type="submit">
  Formular absenden
</button>
    

Der Typ sollte immer ausdrücklich angegeben werden. Dadurch bleibt sofort erkennbar, welche Aufgabe die Schaltfläche besitzt.

Name und Wert einer Schaltfläche übertragen

Eine Submit-Schaltfläche kann ein name- und ein value-Attribut besitzen. Wurde das Formular über diese Schaltfläche abgesendet, wird ihr Name-Wert-Paar mitübertragen.

<button
  type="submit"
  name="aktion"
  value="speichern">
  Speichern
</button>

<button
  type="submit"
  name="aktion"
  value="veroeffentlichen">
  Veröffentlichen
</button>
    

Je nach verwendeter Schaltfläche wird beispielsweise einer dieser Werte übertragen:

aktion=speichern
    

aktion=veroeffentlichen
    

Auf dem Server kann dadurch festgestellt werden, welche Aktion der Benutzer ausgewählt hat.

Das Übertragungsziel einer Schaltfläche festlegen

Mit formaction kann eine Submit-Schaltfläche ein anderes Übertragungsziel verwenden als das im form-Element festgelegte action-Attribut.

<form action="speichern.php" method="post">
  <label for="titel">Titel:</label>

  <input
    type="text"
    id="titel"
    name="titel"
    required>

  <button type="submit">
    Speichern
  </button>

  <button
    type="submit"
    formaction="vorschau.php">
    Vorschau
  </button>
</form>
    

Ähnliche Attribute für einzelne Submit-Schaltflächen sind:

• formaction – legt das Übertragungsziel fest
• formmethod – bestimmt die Übertragungsmethode
• formenctype – bestimmt die Codierungsart
• formtarget – bestimmt das Zielfenster
• formnovalidate – überspringt die integrierte Formularvalidierung

Eine Schaltfläche deaktivieren

Mit dem booleschen Attribut disabled wird eine Schaltfläche deaktiviert. Sie kann dann nicht betätigt werden und erhält normalerweise keinen Tastaturfokus.

<button type="submit" disabled>
  Bestellung absenden
</button>
    

In einer echten Anwendung kann JavaScript die Schaltfläche beispielsweise erst aktivieren, nachdem notwendige Eingaben oder Bestätigungen vorhanden sind. Die Prüfung muss trotzdem zusätzlich auf dem Server erfolgen.

Praxisbeispiel: Nachricht verfassen

Die erste Schaltfläche prüft die Pflichtfelder, die zweite stellt die ursprünglichen Feldwerte wieder her und die dritte benötigt JavaScript, um tatsächlich eine Vorschau anzuzeigen.