Absenden Button  nach oben

Absende Buttons werden dazu benutzt, dass das (ausgefüllte) Formular an ein verarbeitendes Programm übergeben, sozusagen abgesendet, wird. Absende Buttons werden mit dem input-Element definiert. Damit es sich aber nicht um ein Textfeld handelt, sonder um ein Knopf, notiert man zusätzlich das Attribut type mit dem Wert Submit. Beispiel:

<input type="submit" name="button1" value="Absenden"> 

Bei Absende Buttons können Sie außerdem das Attribut value notieren. In diesem wird festgehalten, wie der Knopf beschriftet werden soll. Wird das Attribut nicht notiert, so erfolgt die Beschriftung mit dem Standardtext des Browsers.

Seit HTML 4.0 ist es nun auch möglich Absende Buttons mit dem button-Element zu definieren. Hierzu lesen Sie bitte die Beschreibung zum button-Element.

Reset Buttons  nach oben

Reset Buttons verwendet man dazu, dass die Eingaben in einem Formular gelöscht werden. Man definiert sie, ebenso wie Absende Buottons, mit dem input-Element. Als Wert für das type-Attribut erhalten sie jedoch reset - damit weiß der Browser, dass es sich um ein Resetbutton handelt. Beispiel:

<input type="reset" name="button1"> 

Bei Reset-Buttons können sie außerdem das Attribut value notieren. In diesem wird festgehalten, wie der Knopf beschriftet werden soll. Wird das Attribut nicht notiert, so erfolgt die Beschriftung mit dem Standardtext des Browsers.

Seit HTML 4.0 ist es nun auch möglich Reset-Buttons mit dem button-Element zu definieren. Hierzu lesen Sie bitte die Beschreibung zum button-Element.

Bildbuttons  nach oben

Bildbuttons - Buttons die statt der gewöhnlichen Schaltfläche durch ein Bild dargestellt werden - werden wie Submit- oder Reset-Buttons definiert, allerdings mit dem Wert image für das type-Attribut. Hinzu kommt, dass Sie die anzuzeigende Datei bestimmen müssen. Dies tun Sie mit dem src-Attribut. Zusätzlich können Sie die Größe des Bildes definieren. Benutzen Sie hierzu das width-Attribut (für die Breite) sowie das height-Attribut (für die Höhe). Beispiel:

<input alt="Text" width="10" height="10" type="image" 
       src="name.jpg" name="Bildbutton">
<input alt="Klicken sie hier" width="95" height="105" 
       type="image" src="../button.jpg" name="Bildbutton2"> 

Zusätzlich können Sie mit dem alt-Attribut einen alternativen Text eingeben. Dieser wird, wie bei normalen Bildern, angezeigt, sobald der Mauszeiger auf dem Bild ist.

Mit HTML 4.0 ist es nun auch möglich Bildknöpfe mit dem button-Element zu definieren. Hierzu lesen Sie bitte die Beschreibung zum button-Element.

Dateibuttons  nach oben

Dateibuttons sind Knöpfe, die es Ihnen erlauben, über ein Menü, Dateien auf dem eigenen Computer auszuwählen um diese z.B. ins Internet zu übertragen. Dateibuttons werden ebenso wie Submit oder Reset Buttons definiert. Als Unterschied erhalten sie für das type-Attribut den Wert file. Beispiel:

<input type="file" accept="text/html"> 

Zusätzlich können Sie mit dem accept-Attribut die Art der Dateien angeben, die verwendet werden dürfen. Als Werte gelten hier alle MIME Typen.

sonstige Buttons  nach oben

Alle sonstigen Buttons - also Knöpfe, die nicht zum Absenden oder löschen des Formulars benötigt werden - werden mit dem input-Element und dem Wert button des type-Attributs notiert. Eine Beschriftung erfolgt über das value-Attribut. Beispiel:

<input type="button" value="Fenster oeffnen" name="button1" 
       onClick="window.open()"> 

Button Element  nach oben

Mit HTML 4.0 ist es nun auch möglich Klick-Buttons mit dem button-Element zu definieren. Mit dem type-Attribut können Sie bestimmen ob und um welche Art von Formularbutton es sich handeln soll. Verfügbar sind folende Werte:

  • submit - beschreibt, dass es sich um einen Submit Button handelt.
  • reset - beschreibt, dass es sich um einen Reset Button handelt.
  • button - beschreibt, dass es sich allgemein um einen Formularbutton handelt.

Beispiel:

<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>
<button onClick="window.open()" type="button">Fenster 
 oeffnen</button> 

Bitte beachten Sie dabei, dass die Beschriftung des Knopfes nicht über das value-Attribut erfolgt sondern innerhalb der beiden Tags getätigt werden muss. Das value-Attribut dient in diesem Zusammenhang als Text, der beim Absenden an den Server geschickt wird.

Mit dem button-Element lassen sich auch Bildknöpfe definieren. Hierzu notieren Sie statt des Beschriftungstextes ein/e Bild/Grafik. Beispiel:

<button type="submit">
 <img src="name.gif" height="200" width="100" alt="Bildtext"
</button>

Ausgeschaltet  nach oben

Alle vorgestellten Buttons können zusätlich das Attribut disabled erhalten. Dieses bewirkt, dass Buttons nicht verwendbar und somit 'ausgeschaltet' sind (disabled = engl. unnutzbar). Beispiel:

<input disabled type="submit">
<input disabled type="reset">
<input disabled type="button" onClick="window.open" 
       value="Klick mich">
<input disabled type="file">
<input disabled type="image" src="name.gif">
<button disabled type="submit">Klick mich</button>

Bitte beachten Sie dabei, dass das disabled-Attribut keinen Wert erhält.

Checkboxen  nach oben

Checkboxen sind einzellige Textfelder. Ihre Funktion ist es, das Ankreuzen zu ermöglichen. Checkboxen notiert man mit dem input-Element und dem Wert checkbox des Attributes type. Beispiel:

<input name="kiwi" type="Checkbox">Kiwis
<input name="banane" type="Checkbox">Bananen 

Radio-Buttons  nach oben

Radio-Buttons sind eine Art Checkboxen, allerdings mit dem Unterschied, dass sie eine Entweder-Oder Möglichkeit darstellen. So ist es bei mehreren definierten Checkboxen möglich auch mehrere anzukreuzen - bei Radio-Buttons ermöglichen sie allerdings nur eine Auswahl. Ebenso wie Checkboxen werden auch diese mit dem input-Element definiert. Damit es sich nun aber um Radio-Buttons handelt notiert man statt des Wertes Checkbox den Wert Radio für das type-Attribut. Beispiel:

<input name="gruppe1" type="Radio">Klaus
<input name="gruppe1" type="Radio">Peter 
<input name="gruppe2" type="Radio">Monika
<input name="gruppe2" type="Radio">Bärbel
<input name="gruppe2" type="Radio">Karla 

Bitte beachten Sie hierbei, dass es für die Funktion eines solchen Buttons als Radio-Button unbedingt notwendig ist, dass die Buttons, unter denen einer ausgewählt werden soll mit dem gleichen Wert des name-Attributes notiert werden. Geschieht dies nicht, so verhält sich der Radio-Button quasi wie eine normale Checkbox.

Sendewert  nach oben

Bei Checkboxen und Radio-Buttons lässt sich der Sendewert definieren. Hierzu notiert man das value-Attribut. Es gibt an, um welchen Wert es sich handelt. Dies ist besonders nützlich, wenn ein Formular per E-Mail versandt wird und man später noch wissen möchte, wofür die angekreuzte Checkbox nun eigentlich steht. Beispiel:

<form action="mailto:nam@name.de">
<input value="checkbox-kiwi" name="kiwi" 
       type="Checkbox">Kiwis
<input value="checkbox-banane" name="banane" 
       type="Checkbox">Bananen

<input value="klaus" name="gruppe1" type="Radio">Klaus
<input value="peter" name="gruppe1" type="Radio">Peter

<input value="monika" name="gruppe2" type="Radio">Monika
<input value="baerbel" name="gruppe2" type="Radio">Bärbel
<input value="karla" name="gruppe2" type="Radio">Karla
<input type="Submit">
</form> 

Ankreuzen  nach oben

Bei beiden oben genannten Formularfeldern ist es möglich, diese schon im Vorraus so zu definieren, das sie angekreuzt sind. Dies geschieht mit dem checked-Attribut. Beispiel:

<input checked name="gruppe1" type="Radio">Klaus
<input name="gruppe1" type="Radio">Peter

<input checked type="Checkbox">Klaus
<input checked type="Checkbox">Peter 

Bitte beachten Sie dabei, dass das checked-Attribut keinen Wert erhält. Bitte beachten Sie ebenfalls, dass bei Radio-Buttons immer nur ein Feld einer Gruppe angekreuzt werden kann.

Ausgeschaltet  nach oben

Die beiden oben genannten Formularfelder lassen sich mit dem Attribut disabled ausschalten. Auch dieses Attribut erhält keinen Wert und bewirkt, dass ein Ankreuzen nicht möglich ist. Beispiel:

<input name="gruppe1" type="Radio">Milch
<input name="gruppe1" type="Radio">Kuh
<input disabled name="gruppe1" type="Radio">Hase

<input type="Checkbox">Schmidt
<input type="Checkbox">Schröder
<input disabled type="Checkbox">Kohl