Web Dev Bros » HTML pur http://www.webdevbros.net hot talk about web development Thu, 20 Jan 2011 19:55:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Label-Element für checkboxen, radiobuttons, etc. http://www.webdevbros.net/2005/03/02/label-element-fur-checkboxen-radiobuttons-etc/ http://www.webdevbros.net/2005/03/02/label-element-fur-checkboxen-radiobuttons-etc/#comments Wed, 02 Mar 2005 10:09:03 +0000 Michal http://www.webdevbros.net/2007/05/02/label-element-fur-checkboxen-radiobuttons-etc/ Zu einem Radiobutton oder einer Checkbox gehört meist ein Text, welcher die Funktion des Elements beschreibt. Wie man es bereits von windows-Applikationen gewohnt ist, bewirkt ein Klick auf den ja Text auch eine Selektion des dazugehörigen Elements (z.b. Radiobutton).

Um das Ganze nun auch im Web zu realisieren bedarf es 1-2 Zeilen Javascript. Dachte ich mir bisher immmer :) Nun zur meiner Überraschung kann man das auch ganz anders lösen! Nämlich mit einem LABEL-Element und dem FOR-attribute. Anbei ein Code-Snippet zur Veranschaulichung:

PLAIN TEXT
HTML:
  2.   <input id="en" type="radio" value="en" name="lang" />
  3.   <label for="en">English vielleicht?</label>
  4.   <br/>
  5.   <input id="de" type="radio" value="de" name="lang" />
  6.   <label for="de">Deutsch vielleicht?</label>
  7. </form>

Hab nicht gewusst, dass dies möglich ist. Macht den HTML jetzt noch übersichtlicher. Vorallem verhält es sich auch anders als eine selbstgeschriebene Lösung mit Javascript. Noch dazu der schöne Rahmen drumherum wenns selektiert wird. Siehe Screenshot:

HTML Labels

Kompatibilität kann ich noch nicht sagen. Habs im IE6 und im Firefox getestet. Funktioniert in beiden reibungslos. Der Rest (der browser) interessiert mich ehrlicherweise nicht so ;)

Was ich grad bemerkt hab: Stellt man nun einen der obigen Radiobuttons auf DISABLED, wird auch das LABEL funktionsuntüchtig. Das find ich natürlich sehr toll!! Da ichs bis jetzt immer alles mir Javascript abgefangen hab.

]]> http://www.webdevbros.net/2005/03/02/label-element-fur-checkboxen-radiobuttons-etc/feed/ 0