Kontakt aufnehmen

HTML: Buttons und Boxen

In HTML werden Buttons werden z.B. zum Absenden oder Zurücksetzten notwendig. Boxen sind einzellige Felder. Ihre Funktion ist es, das Ankreuzen zu ermöglichen.

Absenden Button

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

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

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

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

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

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

Checkboxen

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

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

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

Bei beiden oben genannten Formularfeldern ist es möglich, diese schon im Voraus 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

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 

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Tabellen erstellen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern