Hauptmenü

Untermenü

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" />

Erläuterung

Das Attribut submit sorgt dafür, dass beim drücken dieses Buttons das Formular abgeschickt wird. Mit value="Senden" legt man den Text desselben fest.

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>

Erläuterung

Mit type="image" legen wir fest, dass an Stelle des normalen Buttons ein Bild benutzt wird, src="..." gibt den Pfad an und alt steht für alternativen Text wie bei normalen Bildern auch. Wenn ihr etwas in das Textfeld eintragt und dann in die Adressleiste eures Browsers seht, werdet ihr in diesem Fall feststellen, dass neben dem Inhalt noch zwei Parameter übergeben werden, nämlich x und y. Darin stehen die angeklickten Koordinaten des Bildes.

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




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

Erläuterung

Mit <button> ... </button> definieren wir eine Art von Container. Alles, was sich innerhalb des Elements befindet, wird auf der Schaltfläche dargestellt. name benötigen wir, wenn zum Beispiel JavaScript-Funktionen auf diesem Button liegen. Wichtig ist das Attribut type. Damit legt man die Aktion beim Drücken fest. Es gibt davon drei:

  • submit
  • reset
  • button

submit und reset kennt ihr ja schon. Mit dem Wert button verwandelt ihr denselben in ein funktionsloses Monster, das aber wunderbar per JavaScript angesteuert werden kann. Der Rest ist stinknormales HTML und CSS.

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