HTML - Elemente - Formulare - Buttons

1. Versenden

Um Formularinhalte an ein serverseitiges Script zu übergeben, gibt es zwei Möglichkeiten. Einmal durch Drücken der Enter-Taste (was aber nur funktioniert, wenn man sich in einem <input>-Element befindet) und zum anderen durch drücken auf einen Submit-Button. Die Syntax dafür sieht dann so aus:

<!-- HTML 4 -->
<input type="submit" value="Senden">

<!-- XHTML 1 -->
<input type="submit" value="Senden" />

Mehrere Submit-Buttons

Wenn man zum Beispiel in einem Formular eine "vorwärts-rückwärts"-Funktion einbauen will, benötigt man zwei Buttons dafür. Da gibt man zum Beispiel beiden denselben Namen und unterschiedliche Werte für value. Da diese beim Versenden übertragen werden, kann man das entsprechend abfangen.

<input type="submit" name="do" value="weiter" />
<input type="submit" name="do" value="zurück" />

2. Zurücksetzen, Abbrechen

Dieser Button macht das Gegenteil von submit. Er löscht nämlich sämtliche vom User eingegebene Inhalte aus Formularfeldern und setzt dieses in seinen Ursprungszustand zurück. Sollten bereits vorgegebene Werte schon vorhanden sein, die dann per Eingabe verändert wurden, so werden sie durch diesen Button wiederhergestellt.

Demo 1: (Text eintragen und drücken)

Demo 2: (Text ändern und drücken)

<form ...>
  <input type="text" name="bla" />
  <input type="reset" value="Plätten" />
</form>

<form ...>
  <input type="text" name="bla" value="blubb" />
  <input type="reset" value="Plätten" />
</form>

Der einzige Unterschied zum submit-Button liegt in der Angabe reset beim Attribut type.

3. Bilder für Submit-Buttons einbinden

Da sich normale Buttons nur beschränkt mit CSS formatieren lassen, haben sich die Götter des W3C erbarmt und den armen Entwicklern eine Möglichkeit gegeben, den Ansprüchen ihrer Designerkollegen zu genügen. Man kann für den submit-Button alternative Grafiken so einbinden:

<form ...>
  <input type="text" name="bla" /><br /><br />
  <input type="image" src="../../pics/submit.gif" alt="Sende" />                    
</form>

Beispiel

Text eintragen, drücken, in die Adressleiste im Browser sehen und die Parameter bestaunen

4. Klick-Buttons

Ab HTML 4.0 kann man Buttons auch mit mehreren Elementen füllen und den Typ vorgeben. Damit hat man sehr große Möglichkeiten bei der Formatierung. Ein Reset-Beispiel könnte so aussehen:

Text eintragen und drücken

Hach was bin ich schön

<form ...>
  <input type="text" name="bla" /><br /><br />
  <button name="Klicki" type="reset" style="width: 260px; 
    background: url(../../pics/verlauf.gif) repeat-x;
    border: 1px solid #000;">
    <p style="float: left">
      <img src="../../pics/klick_l.gif" width="19" height="19" 
          alt="Klick mich">
    </p>
    <p style="float: left; padding-top: 1px;">
      Hach was bin ich schön
    </p>
    <p style="float: left">
      <img src="../../pics/klick_r.gif" width="19" height="19" 
        alt="Klick mich">
    </p>
  </button>
</form>

5. Attribut disabled

Kann auch hier eingesetzt werden. Der Button ist zwar weiterhin sichtbar, aber völlig funktionslos.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt