Webkrauts » One Button to rule them all

Artikel

One Button to rule them all

3. Türchen des Webkrauts-Adventskalenders

Das button-Element kommt für gewöhnlich in Formularen als Alternative zum input type="submit" zum Einsatz. Sein vorhandenes Potential bleibt dabei jedoch auf der Strecke. Die Möglichkeiten für Webentwickler sind weitaus vielfältiger.

Die Bezeichnung Button ist Programm – eine Schaltfläche, die der Nutzer anklicken kann. Es gibt drei unterschiedliche Typen: Neben type="submit" zum Abschicken eines Formulars sind type="reset" zum Zurücksetzen sowie einfach type="button" möglich. Bei letzterem wird keine Aktion ausgeführt, so dass Webworker ein individuelles Verhalten mittels JavaScript erzeugen können. Wird das type-Attribut weggelassen, funktioniert der Button standardmäßig wie ein Absendebutton, im Grunde so als wäre type="submit" gesetzt. Leider keine Regel ohne Ausnahme, denn der IE7 (und kleiner) benutzt type="button" als Grundeinstellung, wodurch der submit-Type zum Abschicken des Formulars gesetzt werden muss. Die beiden Attribute name und value sind optional.


  <button type="submit">Abschicken</button>

Welche Vorzüge haben Buttons?

Der Vorteil von button gegenüber input type="submit" liegt in der höheren Flexibilität. Beim input-Element können Webworker lediglich einzeiligen Text im value-Attribut hinterlegen, wohingegen button neben einfachem Text auch weitere HTML-Block- und Inline-Elemente beinhalten kann. Es fungiert dabei wie ein klickbarer Container, dessen Einzelteile sich obendrein hervorragend über CSS gestalten lassen.


  <button type="submit">
      <strong>Geschenke versenden</strong>
      <span>sponsored vom Weihnachtsmann</span>
  </button>

Die zweite große Stärke des button-Elements liegt neben der Verwendung in Formularen zweifelsohne außerhalb von ihnen. Oftmals gibt es UI-Elemente, mit denen der Besucher auf einer Seite interagieren soll, beispielsweise Vor- und Zurück-Buttons bei einer Slideshow oder einem Toggle-Button, der das entsprechende Akkordeon auf- und zufahren lässt. Vielen Webworkern kommt sicherlich sofort das gute alte a-Element in den Sinn, das uns die erwartete Klickoption liefert. Bei beiden Beispielen wären a-Elemente aber semantisch fehl am Platze, da keine Anker oder Verlinkungen erzeugt werden sollen.


  <button type="button">mehr Informationen anzeigen</button>

Gegenüber einem semantisch neutralen Element wie dem span hat button ebenfalls die Nase vorn, da es auch mit der Tastatur angesprungen werden kann, was der Bedienbarkeit zugute kommt. Stichwort Barrierefreiheit – abgerundet wird das ganze mit der ARIA-Rolle button und dem ARIA-Attribut aria-pressed.


  <button type="button" role="button" aria-pressed="false">Inhalt versteckt</button>
  <button type="button" role="button" aria-pressed="true">Inhalt angezeigt</button>

Darüber hinaus bringt Button das Attribut disabled mit, wodurch es möglich wird, den Button zu deaktivieren. Ein typischer Anwendungsfall ist ein Registrierungsformular, das der Besucher erst abschicken können soll, nachdem er alle Pflichfelder ausgefüllt hat. Fehlt eins dieser Felder, ist der Absendebutton deaktiviert. Diese Art der Validierung übernimmt hierbei ein Javascript, dass die Eingabefelder on the fly prüft und dann das disabled-Attribut auf den Button setzt bzw. entfernt.


  <button type="submit" disabled="disabled">Registrieren</button>

Schönes neues HTML5!

Neben den bereits bekannten Attributen disabled, name, type und value peppt HTML5 das Element mit neuen Attributen auf, die sich sehen lassen können:

autofocus

Mittels autofocus erhält der Button den Fokus, nachdem die Seite geladen wurde. Dies ermöglicht dem Besucher, eine direkte Aktion auszuführen.


  <button autofocus type="submit">Einloggen</button>

form

Die Form-ID gibt an, welches Formular der Button steuern soll.


  <button form="id_des_zugehoerigen_formulars" type="reset">Daten zurücksetzen</button>

formaction

Dieses Attribut definiert eine URL, an die die Formulardaten geschickt werden und überschreibt damit das Form-Action-Attribut.


  <button formaction="http://webkrauts.de" type="submit">Registrierung abschließen</button>

formenctype

Die drei Möglichkeiten application/x-www-form-urlencoded, multipart/form-data sowie text/plain. geben an, wie die Daten enkodiert an den Server geschickt werden. Somit wird das Form-Enctype-Attribut ersetzt.


  <button formenctype="text/plain" type="submit">Daten übertragen</button>

formmethod

Durch die möglichen Werte post, get, put oder delete überschreibt der Button das ~~Form-Action-Attribut~~ Form-Method-Attribut.


  <button formmethod="post" type="submit">Auf der gesamten Website suchen</button>

formnovalidate

Hiermit wird die Form unvalidiert abgeschickt. Es ersetzt das Form-Novalidate-Attribut.


  <button formnovalidate type="submit">Gesammelte Daten abschicken</button>

formtarget

Um das Form-Target-Attribut zu überschreiben, ist es möglich durch _blank, _self, _parent oder _top zu sagen, wo die Action-URL geöffnet werden soll.


  <button formtarget="_blank" type="submit">Ergebnis auf neuer Seite öffnen</button>

Vom simplen Text-Button zum grafischen Bonbon

In der Vergangenheit gab es eigentlich nur eine vernünftige Art und Weise Buttons mit flexiblen Inhalten grafisch zu gestalten. Die Rede ist von der Sliding Doors Technik unter Verwendung eines Sprites. Mittlerweile steht uns Webworkern aber die weite Welt des CSS3 zu Verfügung. Schatteneffekte, Verläufe, abgerundete Ecken und vieles mehr müssen heutzutage nicht mehr über eine Pixelgrafik gelöst werden. Das Gute daran: wir sparen einen HTTP-Request und die Seite lädt schneller, spitze! Was dies im Detail bedeutet, demonstriert das folgende Beispiel.

    
  <!-- HTML -->
  <ul class="buttons">
      <li>
          <button class="btn" type="button">
              <span>Hinzufügen</span>
          </button>
      </li>

      <li>
          <button class="btn" disabled="disabled" type="button">
              <span>Hinzufügen</span>
          </button>
      </li>
  </ul>

  /* CSS */
  .buttons {
      margin: 20px;
  }

  .buttons li {
      float: left;
      margin-right: 5px;
  }

  /* nervige Abstände auch im Firefox auf Null setzen */
  .btn::-moz-focus-inner {
      border: 0;
      padding: 0;
  }

  /* das Buttonstyling */
  .btn {
      display: inline-block;
      overflow: visible;
      position: relative;
      height: 29px;
      margin: 0;
      border-radius: 4px;
      border: 0;
      padding: 0;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      color: #000;
      background-color: #bfe500;
      background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
      transition: background linear 0.2s;
      cursor: pointer;
  }

  /* Typodefinition */
  .btn span {
      display: block;
      position: relative;
      padding: 0 12px 0 35px;
      font-family: arial, helvetica, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 31px;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      white-space: nowrap;
  }

  /* Pseudoklassen und Pseudoelemente definieren */
  .btn:focus,
  .btn:hover,
  .btn:active {
      outline: 0 none;
      background-color: #ffc600;
  }

  .btn:active {
      top: 1px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }

  .btn:before,
  .btn span:before,
  .btn span:after {
      position: absolute;
      top: 50%;
      left: 0;
      content: "";
  }

  /* Icon: grauer Kreis */
  .btn:before {
      left: 12px;
      width: 16px;
      height: 16px;
      margin-top: -7px;
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
      background: #76806c;
  }

  /* Icon: weißer Querstrich */
  .btn span:before {
      left: 15px;
      z-index: 10;
      width: 10px;
      height: 2px;
      margin-top: -1px;
      background-color: #fff;
  }

  /* Icon: weißer Längsstrich */
  .btn span:after {
      left: 19px;
      z-index: 10;
      width: 2px;
      height: 10px;
      margin-top: -5px;
      background-color: #fff;
  }

  /* disabled-Status */
  .btn[disabled] {
      opacity: 0.3;
      cursor: not-allowed;
  }

  .btn[disabled]:focus,
  .btn[disabled]:hover,
  .btn[disabled]:active {
      background-color: #bfe500;
  }

  .btn[disabled]:active {
      top: 0;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  }

Demo auf jsfiddle.net ansehen:

Um die Übersicht zu bewahren, kommt das Beispiel ohne die Vendor-Prefixes -webkit, -moz, -ms bzw. -o aus. Damit das Buttonstyling auch browserübergreifend den gewünschten Effekt hat, müssen wir an den nötigen Stellen – leider immer noch – auf sie zurückgreifen. Wer sich unsicher ist, ob und wo Vendor-Prefixe nötig sind, findet unter Can I Use alle nötigen Informationen. Abschließend sei noch gesagt, dass jeder, der den IE7 unterstützen will oder muss, natürlich IE-spezifische Anpassungen via Conditional Comments einbinden kann, um auch in diesem Browser ein entsprechendes Aussehen zu erreichen.

Weitere Inspiration in Sachen Button-Styling auf github:

Zum Autor

Stephan Zavodny ist passionierter Kommunikationsdesigner und arbeitet als Frontend-Entwickler in Berlin. Er schätzt ausgefeilte CSS-Lösungen, diskutiert gern über Usability-Aspekte und ist ein Verfechter guter Typografie, für die er sich sowohl im Web als auch im Printbereich einsetzt.

Info:: One Button to rule them all ist Beitrag Nr. 1065
Autor:: Stephan Zavodny am 3. Dezember 2011 um 08:00
Kategorie:: Adventskalender 2011

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Ganz schön viel Code für so einen kleinen Button

Kommentar by Zip - 3. Dezember 2011 um 10:23
2.

Abschließend sei noch gesagt, dass jeder, der den IE7 unterstützen will oder muss, natürlich IE-spezifische Anpassungen via Conditional Comments einbinden kann, um auch in diesem Browser ein entsprechendes Aussehen zu erreichen.

Der Aufwand ist nicht zu unterschätzen! Button-Styling für IE<9 ist ein Albtraum.

Kommentar by Alex - 5. Dezember 2011 um 09:31
3.

Sehr schöner, umfassender Artikel.

Kommentar by Moritz Gießmann - 5. Dezember 2011 um 10:48
4.

Wunderbare Internetseite, voll mit nützlichen, gut aufbereiteten Informationen.
Danke dafür!

Ich habe eine Frage zu folgendem Absatz unter "Schönes neues HTML5 -> formmethod":

Durch die möglichen Werte post, get, put oder delete überschreibt der Button das Form-Action-Attribut.

Handelt es sich hierbei tatsächlich um das Form-Action- oder um das Form-Method-Attribut?

Kommentar by Lukas Großberger - 5. Dezember 2011 um 17:14
5.

Lukas, vielen Dank für das aufmerksame Lesen. Du hast natürlich Recht, es muss Form-Method-Attribut heißen. Ich habs gleich mal korrigiert.

Kommentar by Stephan Zavodny - 6. Dezember 2011 um 10:33
6.

Verstehe ich das richtig, dass man bei Verwendung der Form-*-Attribute Formulare steuern kann, in denen der Button nicht genested ist? D.h. ich kann einen Submitbutton irgendwo auf der Seite einfügen und ein Formular an einer ganz anderen Stelle abschicken?

Kommentar by graste - 6. Dezember 2011 um 10:47
7.

Ja, schaut man sich den derzeitigen HTML5-Editor’s Draft zum Button Element bzw. zu den Form-Controls einmal näher an, so sollte genau dies möglich sein.

Kommentar by Stephan Zavodny - 6. Dezember 2011 um 12:04
8.

Sehr ausführlich und vor allem verständlich beschrieben.

Werde ich nach den Weihnachtstagen auf meiner Website mal umsetzen.

Eine schöne Weihnachtszeit wünscht
Klaus

Kommentar by Klaus - 20. Dezember 2011 um 09:39
9.

Ein weiterer Vorteil, den Submitbutton via button statt input anzulegen, ist, dass sich dieser via CSS einfacher ansprechen lässt. Eingabefelder haben oft komplett andere Definition als der dazugehörige Button.

Kommentar by Daniel S - 25. Dezember 2011 um 22:50