Standard-Buttons in HTML definieren

HTML stellt zwei Standard-Buttons zur Verfügung, um Formulareingaben zu handhaben: einen Button zum „Absenden“ und einen zum „Abbrechen“. Mit dem Absendebutton kann der Anwender das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <form>-Tag mit dem Attribut action festgelegt wurde. Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt, Eingaben werden gelöscht.

Erläuterung:

Mit <input type=“submit“> definieren Sie einen Absendebutton (input = Eingabe, submit = bestätigen). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action angegeben ist. Zur unterschiedlichen weiteren Behandlung der übermittelten Daten können Sie mehrere Absendebuttons mit name-Attribut verwenden.

Mit <input type=“reset“> definieren Sie einen Abbrechen-Button (reset = zurücksetzen). Eingegebene Daten werden verworfen und nicht abgeschickt.

Mit dem Attribut value bestimmen Sie die Beschriftung der Buttons (value = Wert).

Genaue Informationen zu diesem Thema finden Sie unter:

http://de.selfhtml.org/html/formulare/definieren.htm
http://de.selfhtml.org/html/formulare/formularbuttons.htm

---

ERSTELLUNG ANKLICKBARE BUTTONS:

Wenn Sie nun auf einer Webseite ganz schnell und ohne Einsatz von Grafik-Buttons oder CSS-Dateien einen anklickbaren Button erstellen möchten, ist die oben beschriebene Methode ein gutes Beispiel dafür.

Setzen Sie einfachen folgenden HTML-Code ein:

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" />
</form>

Unter <form action=„https://sura1.wordpress.com/„> setze ich beim Attribut action meine Webadresse ein.

Mit  <input type=“submit“ value=“Sura 1 Artworks“ /> wird mit dem Attribut value die Beschriftung des Buttons festgelegt.

Im Attribut value können Sie danach durch den CSS-Befehl style=„font-size: …px;“ die Größe des Buttons entsprechend einstellen (siehe Beispielcode! Font-size: bis 50px!!).

Wichtig:

Durch die Länge des Textes/Größe der Buchstaben definieren Sie die Länge/Größe des Buttons!!

Quellcode in meinem Beispiel:

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 25px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 30px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 35px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 40px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 45px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 50px;" />
</form>

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Free CSS Menüs – www13stylesscss
Free CSS Menus: 14 gratis CSS Menüs
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
Navigations-Menü mit Button-Effekt
Formatierung von horizontalen Navigationsleisten mit CSS