Button wieder neu entdeckt 2


Schon seit längerem wusste ich das es den <button>-Tag gibt, aber erst jetzt habe ich seine Vielseitigkeit erkannt und schätzen gelernt.

Diesen Tag gibt es schon seit der HTML 4.0 Version. Bis dahin konnten die Designer immer nur über den <input>-Tag mit den type-Attribut Buttons erzeugen. Zulässige Werte um einen Button zu erzeugen sind submit, reset und image, Erst ab der 4er Version von HTML bezeichnet man Buttons auch in ihrer Bezeichnung so was sie auch tatsächlich sind, nämlich Buttons. Und das Schöne daran ist, sie funktionieren zusätzlich auch noch in allen gängigen Browsern.

Die Syntax um einen Button zu erzeugen ist recht simple. Man setzt einfach um das was ein Button werden soll den <button>-Tag und gibt, wie auch beim <input>-Tag, im type-Attribute einen der drei Werte submit, um das Formular abzuschicken, reset, um das Formular auf den Orginalzustand zurückzusetzen, oder button, um ein freiprogrammierbares Element zu bekommen, ein.

  1. <button type="button" onclick="alert('Oh Wundern es geht!')">Drück mich</button>

Das ist schon das ganze Geheimnis zur Verwendung von Buttons. Nun kann man fast beliebig viel in diesen Container hinsetzen. Es gibt nur zwei Ausnahmen die nicht funktioniert. Erstens, da der Button selbst schon eine Art Verweis ist, dürfen in ihm keine Verweis erzeugende Elemente eingesetzt werden. Und zweitens, da der Button meistens für Formulare genutzt wird, darf in ihm keine weiteren Formular-Elemente verwendet werden.

Weiterhin ist zu Beachten, dass ein submit– bzw. reset-Button natürlich nun innerhalb eines Formulares funktioniert und der frei definierbare nur mit aktiviertem JavaScript.

Hier nun ein paar schöne Beispiele für die freie Verwendbarkeit solcher Buttons. Dabei habe ich die CSS-Formatierung der Einfachheit inline gesetzt.

  1. <button type="button" style="padding:1em">Klick mich!</button>

  1. <button type="button" style="">
  2. <image src="icon.png" width="100" height="100" alt="Abschicken" />
  3. </button>

  1. <button type="button" style="">
  2. <style type="text/css">td:hover{background-color:#99CC00;</style>
  3. <table style="border-collapse:collapse;">
  4. <tr>
  5. <th scope="col">Spalte 1</th>
  6. <th scope="col">Spalte 2</th>
  7. <th scope="col">Spalte 3</th>
  8. </tr>
  9. <tr>
  10. <td>Inhalt 1</td>
  11. <td>Inhalt 2</td>
  12. <td>Inhalt 3</td>
  13. </tr>
  14. <tr>
  15. <td>Inhalt 4</td>
  16. <td>Inhalt 5</td>
  17. <td>Inhalt 6</td>
  18. </tr>
  19. </table>
  20. </button>

Interessant ist, dass die hover-Angabe z.Z. ausschließlich beim IE funktioniert.

  1. <button type="button" style="width:20em;padding:1em;text-align:left">
  2. <h4>Lizenzvertrag</h4>
  3. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
  4. </button>

Leider versteht der IE die Breitenangabe im Style nicht.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

2 Gedanken zu “Button wieder neu entdeckt