Absenden - Webseitenbau - A. Brandenberger

4.8.12 Druckknöpfe für "Absenden" und "Verwerfen"

1 Allgemein
2 Druckknöpfe für "Absenden" und "Verwerfen"
3 Farbige Buttons
4 Grafische Buttons zum Absenden
5 Buttons mit Bild zum Absenden oder Abbrechen
6 Grundlagen-Websites & Workshops

⇧ 1 Allgemein

Prinzip

Um Formulareingaben zu handhaben stellt HTML zwei Standard-Buttons zur Verfügung, einen Button zum "Absenden" und einen zum "Abbrechen".
Mit dem Absende-Button kann der Anwender das ausgefüllte Formular losschicken.

Mit den Formulardaten geschieht dann das, was im einleitenden "Form"-Tag bei action="..." festgelegt wurde.
Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt.

⇧ 2 Druckknöpfe für "Absenden" und "Verwerfen"

Codes

<input type="submit">
<input type="reset">

Formatierung:

input [type=submit] und input [type=reset] Dies sind die beiden "Type"-Formatierungen für diese Buttons.
Mit dieser Formatierung weden diese Elemente formatier, ohne dass weitere Angaben im Text gemacht werden müssen.

1) Stylesheet

.input[type=submit], input[type=reset], 
input[type=button] {
padding:1px 3px;
font-size:1em;
font-family:sans-serif;
}

2) Quelltext

<input type="submit" value="Formular abschicken">
<input type="reset" value="Eingaben verwerfen">

3) HTML-Dokument

⇧ 3 Farbige Buttons

Beispiel

1) Quelltext

<input type="button" value="Klick mich"
style="background-color:#ffe4b5;color:#000000;
font-style:italic;font-weight:bold;">

2) HTML-Dokument

Workshop

CSS 4 You de Farbige Formularelemente

⇧ 4 Grafische Buttons zum Absenden

Prinzip

Sie können innerhalb von Formularen Grafiken referenzieren und diese als Absendebutton definieren.
Solche grafische Buttons können Sie als Alternative zu Buttons vom Typ <input type="submit"> verwenden.

1) Quelltext

<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
 <table border="0" cellpadding="5" cellspacing="0"
 bgcolor="#E0E0E0">
  <tr>
   <td align="right">Ihre E-Mail-Adresse:</td>
   <td><input type="text" name="Mail" 
   size="30" maxlength="30"></td>
  </tr>
  <tr>
   <td align="right">Formular:</td>
   <td><input type="image" src="absende.gif"
   alt="Absenden"></td>
  </tr>
 </table>
</form>

2) HTML-Dokument

⇧ 5 Buttons mit Bild zum Absenden oder Abbrechen

Prinzip

Dies funktioniert genauso wie das Definieren von Klick-Buttons (Bild). Dort wird erklärt, wie solche Buttons definiert werden.
Um einen Button zum Absendebutton (Submit-Button) zu erklären, müssen Sie im einleitenden <button>-Tag type="submit" notieren.
Um den Button zu einem Abbrechen-Button (Reset-Button) zu erklären, müssen Sie type="reset" notieren.

⇧ 6 Grundlagen-Websites & Workshops

SELFHTML-Wiki de Formulare absenden Beispiel
SELFHTML-Wiki de Formulare zurücksetzen Beispiel

↑

Ihre E-Mail-Adresse:
Formular: