If you are designing a mobile app, you will want to add a small button (let’s say a back button) with a small arrow on it. If you are doing it right, you will probably use some sprite image with few other parts in it. One way is to add more white space in that sprite and take in consideration few more pixels, then in CSS you specify a bigger width/height and everyone is happy. Except de developer. You will face the problem of getting the coordinates of your sprites, small tweaks using firebug and so on. Also, you may have issues when you are trying to position that element in page.

My solution

Very easy, very neat, very CSS:

.back { position:relative; width:10px;height:10px }
  .back:before {
    content:".";
    text-indent:-9999px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    top:-10px;
    background:#c00; /* you can remove this */
    position:absolute;
    opacity:0;
  }

That’s all. Basically you extend the active area without changing the space that initial area will cover.

Pretty neat, no?

#header #topNav ul li a {
/* some css properties */
}

Pentru un markup de genul:

<header id="header">
	<nav id="topNav>
		<ul>
			<li><a href="#">Menu item</a></li>
			[...]
			<li><a href="#">Menu item</a></li>
		</ul>
	</nav>
</header>

Unde este problema?

Problema este că, în cazul în care specificăm mai multe stiluri, repetăm excesiv:

#header #topNav ul li a:hover {}
#header #topNav ul li.active a {}

Apoi, dacă o luăm logic, vedem că #topNav nu poate fi decât în interiorul #header, li nu poate fi decât într-un ul (în contextul dat), care, la rândul lui, este în #topNav. De asemenea, a nu poate fi decât în… li. Are sens?

Cum e corect?

#topNav a {}
#topNav .active a {}

Arată mult mai frumos, nu?

Problema numărul doi este că browserele în care merge sunt ușor încăpățânate. Safari și Chrome (webkit) afișează într-un fel, Firefox 4 în alt fel. De exemplu, în webkit nu poți suprascrie următoarele stiluri:

input[type=search] {
        padding: 30px;            /* Overridden by padding: 1px; */
        font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
        border: 5px solid black;  /* Overridden by border: 2px inset; */
        background: red;          /* Overridden by background-color: white; */
}

Via.

Problema o rezolvi relativ ușor, folosind următoarea regulă în css:

input[type="search"] { -webkit-appearance: textfield; }

Enjoy!

1. Cufon nu merge;
2. Document Mode: IE9 fute layout-ul la un site ce merge fără probleme pe orice alt browser (inclusiv ie7/8);
3. Același Document Mode IE9 introduce o chestie căreia îi simțeam lipsa. Not! Jumping bug!

Din păcate însă, astfel de probleme au fost și când a fost lansat IE8 beta (care culmea, era la fel de standard compliant ca un schnitzel într-un motor de avion IE9). Știu că se voi primi suficiente mailuri de la clienți supărați că nu li se vede site-ul bine într-un browser aflat într-un stadiu beta. Și mai știu că unii se vor supăra și că alții vor înțelege că nu pot oferi suport tehnic pentru un browser aflat în stadiu beta.

Alte chestii amestecate:

1. Dacă îi dai view source la o pagină ai o surpriză plăcută: ai syntax highlight!
2. Butonul de compatibility mode l-au mutat, nefiind nevoie să intri în meniuri. Chestia asta există și în IE8, dar… nu am văzut-o. Bonus, există și shortcut (alt+7,8,9) pentru diverse moduri. Din păcate însă, scurtăturile astea merg doar dacă ai focus pe developer toolbar. No biggie.
   Cu toate astea, ar fi fost ok dacă se putea alege modul de compatibilitate (la click dreapta, de exemplu) între IE7 și IE8. Totodată, o chestie care mă amuză: existența unei astfel de funcții înseamnă oare că MS recunoaște că versiunea anterioară era de căcat?
3. Pentru a adăuga un site la favorite este nevoie de minim două click-uri și mișcarea mouse-ului.
4. Când vrei să validezi un site din Dev Toolbar te duce întâi pe site-ul MS după care pe site-ul W3C. Eu înțeleg că vor să facă statistici cu modul de utilizare, dar totuși…
5. text-shadow lipsește. Cu desăvârșire. Ce dacă are vreo 3-4 ani de când a apărut și este suportat nativ de restul browserelor (fără niciun prefix)? IE9 e mai tare!

Momentan atât. Timpul nu îmi permite un review mai amănunțit. Cei de la Nettuts se pare că au avut mai mult timp.

Așadar. Dacă tot de dai mare web developer sau ceva de genul, bagă în plm la cap următoarele:

• Unele elemente au implicit display:block Exemplu:p, form, div etc
• Altele au implicit display:inline (cum ar fi span, em, strong), display:table-cell (td, th) șamd.
• În sfârșit, altele capătă display:block în momentul în care îi aplici un float.

Altfel spus: nu mai folosi ca dobitocu’ toate proprietățile doar să fie! Să dai display:block la un div sau la un element cu float este echivalent cu a pune o clanță la clanța de la ușă!

Ah, da, și folosește-te în plm de clase și id-uri! Nu pune ca tâmpitu’ stiluri inline!

Și pentru clienți: utilizatorii site-ului vostru nu dau doi bani că site-ul arată diferit în browsere diferite. De fapt, sunt șanse MINIME ca un utilizator să nu observe asta! Și știi de ce? Pentru că utilizatorii folosesc un singur browser! Dacă nu funcționează la fel în toate browserele ar trebui să-ți faci probleme!

De ce ai folosi aceste tag-uri „exotice”? Cel mai bun motiv este păstrarea unui cod cu o structură semantică. Un alt motiv ar fi evitarea adăugării de clase peste clase diverselor elemente din pagină.

Tabele

Tag-ul table

Chiar dacă tot hype-ul în jurul codului fără tabele de acum cinci ani s-a stins, încă mai sunt clienți care cer – și evident, programatori care fac – cod fără tabele. Nimic greșit, nu? Doar atunci când ai date… tabulare. Probabil tag-ul table sună ca o fosilă și ar trebui lăsat să moară. Nimic mai fals! Este viu, este util și te scutește de bătăi de cap. A început să fie folosit pentru design pe la mijlocul anilor ’90 din motive foarte întemeiate: războiul browserelor era în floare, fiecare browser avea un mod unic de a interpreta CSS iar tabelele erau singura soluție pentru programatorii ce vroiau un site cross-browser.

Cu toate astea, întrebarea rămâne: Cum recunoști datele tabulare? Când pot folosi tabele fără frică? Dacă poți aranja informația respectivă într-un fișier excel foarte ușor, atunci ai nevoie de un tabel!

Tag-ul th (table head)

Tag-ul th îl folosești când ai de afișat un cap de tabel. Am văzut tot felul de artificii, de la clasă suplimentară pentru un td până la folosirea tag-ului strong într-un td. În plus, ce scapă destul de mulți din vedere este că un cap de tabel poate fi și în altă parte decât sus (ex: stânga).
Detalii.

Tag-ul colgroup

Trebuie să recunosc, până acum vreo două luni nu am folosit prea mult aceste tag-uri. Ca să specifici lățimea unei celule de tabel poți adăuga câte o clasă pentru fiecare td sau th și să ajustezi proprietățile clasei respective. Folosind colgroup poți defini proprietățile celulelor dintr-o coloană întreagă. Rezultatul? Nicio carie clasă aiurea!
Detalii.

<table>
	<colgroup class="col1"></colgroup>
	<colgroup class="col2"></colgroup>
	<colgroup class="col3"></colgroup>
	<tr>
		<td>continut col 1</td>
		<td>continut col 2</td>
		<td>continut col 3</td>
	</tr>
</table>

Tag-ul col

Se foloseşte în combinaţie cu colgroup şi, spre deosebire de mai sus-numitul colgroup, col te ajută să setezi doar lăţimea coloanelor. Ar mai fi de menţionat că tag-urile col sunt de tip self-closed (<col />) dacă folosești un doctype XHTML.
Detalii.

Tag-urile tbody, thead și tfoot

Aici sunt două chestii funny:

• Chiar dacă nu specifici, tbody este adăugat automat de (unele) browsere.
• Ordinea corectă într-un tabel este următoarea: thead, tfoot și tbody. Chiar dacă footer-ul apare la început în cod, în browsere este randat corect.

Detalii tbody, thead şi tfoot.

Formulare

Da, și la formulare există tag-uri nefolosite sau folosite puțin. Hai să vedem care sunt acestea.

fieldset

În practică am întâlnit diverse situații în care existau părți ale unui formular împărțite în… div-uri. Aparent, nu e nimic greșit în asta, dar definiția tag-ului div sună cam așa:

îl folosești atunci când n-ai un tag mai bun

Prin urmare, folosești… fieldset.
Detalii.

Poți grupa elementele unui formular foarte ușor și poți folosi următorul tag:

legend

Tag-ul ăsta este genul de tag la care te întrebi: „de ce naiba există așa ceva?”. Răspunsul? SE-MAN-TI-CĂ! Da, poți folosi un h3 în locul lui, dar… de ce ai face-o? Tag-ul legend îți adaugă un titlu fieldset-ului curent (se poate folosi doar într-un fieldset).
Detalii.

label

label este un tag aparte. Chiar dacă este folosit de mulți, nu este folosit corect de mulți. În teorie, tag-ul label ajută la adăugarea unui text lângă un element de formular. Fie că este input (de orice fel), fie că este textarea, fie că este select. Ceea ce mulți nu știu este că pot face elementul din interiorul unui label să „răspundă” la click pe textul din label. Astfel, în situația unui chestionar – de exemplu – este suficient să faci un click pe text pentru a selecta bifa (nu doar pe bifă; Apple, ar trebui să iei în considerare chestia asta în OSX 10.7!). Modalități de folosire:

<label><input type="checkbox" /> Bifează asta!</label>

<label for="check">Bifează asta!</label>
<input type="checkbox" id="check" name="check" />

Da, este nevoie să ai ambele atribute: și id și name pentru a funcționa corect.

Atenție! NU recomand plasarea tag-ului select în interiorul unui label, deoarece va deveni inutilizabil!.
Detalii.

button

S-a întâmplat vreodată să ai nevoie ca într-un tag input type="submit" să ai nevoie de o imagine? O săgeată, o bifă, un X, orice. Sau o literă boldată, un text italic sau alte minuni d’astea? Sau poate un sliding door? Răspunsul scurt: nu ai cum fără a adăuga CSS suplimentar. Soluția? button!

<button type="submit" name="submit_button" value="submit_form"><img src="ok.gif" alt="ok"/> <strong>S</strong>a<em>v</em>e</button>

Combinația de tag-uri este perfect validă. Singura problemă este la modul în care IE6 se comportă: dacă toate browserele trimit serverului valoarea atributului value, IE6 se prostește la maxim și trimite ce este în interiorul tag-ului. Dar cum am observat foarte rar situații în care programatorul backend folosește validarea ȘI la butonul de submit, consider că e destul de safe de folosit (nu 100%, dar… e ok). O altă problemă – tot cu IE6 – este că în cazul în care ai mai mult de un buton pe pagină, nu e capabil să îți spună pe care ai apăsat (ceea ce nu se întâmplă dacă folosești input type="submit".
Detalii.

optgroup

Folosind acest tag, poți grupa elementele unui select, astfel încât au un soi de titlu boldat.
Detalii.

Alte tag-uri

Dacă tag-urile de mai sus se pot folosi fie în interiorul unui tabel fie în interiorul unui formular, ce urmează acum sunt tag-uri ce pot fi folosite oriunde, fără a ține cont (prea mult) de parent. Sunt un fel de copii rebeli, dacă vrei.

dl/dt/dd

Poți folosi un dl (definition list) atunci când ai o listă cu titlu pentru fiecare element. Cel mai bun exemplu care îmi vine în minte acum este o pagină de genul Q&A.
Detalii.

Încheiere

Cam astea sunt tag-urile cărora le-am simțit lipsa în unele proiecte la care am lucrat peste munca altora. Nu sunt tag-uri imperios necesare, întrucât poți face artificii foarte ușor pentru a le înlocui, dar, dacă există, de ce să nu le folosești, nu?

Și dacă nu avem cum să mai creștem viteza, optimizăm dimensiunile!

Astfel, au apărut regulile de performanță de la yahoo. Și printre regulile astea, cele mai importante consider că sunt cele de micșorare:

• gzip;
• minification (pentru că minificare sună aiurea ).

Cu gzip o rezolvi rapid. Câteva rânduri în .htaccess și ai terminat. Cu minificarea (?!) însă… E mai greu. Pentru că, nu-i așa, întotdeauna se găsește ceva de modificat la site când nu ești acasă. Iar editarea unui cârnat pe o singură linie de câteva zeci de mii de caractere poate fi o experiență nu tocmai plăcută.

Prin urmare poți folosi editarea on the fly. Nu știu însă cum se comportă pe site-uri cu un trafic considerabil…

Scriptul face următoarea chestie: Combină mai multe fișiere, șterge toate comentariile, spațiile aiurea, tab-urile aiurea și toate rândurile noi:

<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', ' ', $buffer);
  $buffer = str_replace(array("\r\n", "\r", "\n", '  ', '    ', '    '), ' ', $buffer);
  $buffer = str_replace("\t", " ", $buffer);
  return $buffer;
}
include('screen.css');
include('style.css');
include('comments.css');
ob_end_flush();

Și rezultatul îl poți vedea pe blogul meu:

Cum se folosește?

1. Faci un fișier, să zicem screen.php
2. Înlocuiești

   <link rel='stylesheet' href='screen.css' type='text/css' />
   <link rel='stylesheet' href='style.css' type='text/css' />
   <link rel='stylesheet' href='comments.css' type='text/css' />
   

   Cu

   <link rel='stylesheet' href='screen.php' type='text/css' />
   

3. Gata

La o listă de forma:

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>

Bagi CSS-ul ăsta:

li {
	width:50%;
	float:left
}

De ce în teorie? Pentru că lista nu va arăta – cum e normal, de altfel – ca o listă pe două coloane ci ca una în zig-zag:

1 - 2
3 - 4
5

Ceea ce, între noi fie vorba, e cam nasol. Mai ales când vrei să afișezi o listă ordonată.

Soluția

jQuery, desigur!

$('li').slice(0, Math.ceil($('li').length/2)).addClass('leftside'); // selectăm prima jumătate de listă și îi adăugăm o clasă

Și puțin CSS:

li {
	width:50%;
	margin-left:50%;
}
li.leftside {
	float:left;
	clear:left;
	margin-left:0;
}

Și gata. Avem o listă cu două coloane.

Aaron, autorul articolului, argumentează – pe bună dreptate – absurditatea folosirii unui cod de forma:

.this-is-absurd {
  border-radius: 10px 5px;
  -moz-border-radius: 10px 5px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 5px;
  -o-border-radius: 10px 5px;
  -khtml-border-top-left-radius: 10px;
  -khtml-border-top-right-radius: 5px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-bottom-left-radius: 5px;
}

Nu știu dacă sunt lucruri mai absurde în CSS decât repetarea codului, astfel încât fiecare browser să înțeleagă ce i se zice.

Soluția salvatoare!

Soluția stă în… produsul autorului, desigur! Pe numele de scenă eCSStender. Toate bune și frumoase până la un punct: punctul în care trebuie să-l folosești.

Pentru că:

• Are vreo 10kb;
• Nu prea face nimic de capul lui, de fapt. Are nevoie de plugin-uri (2-3-4kb fiecare) și de un selector engine. Cum ar fi.. Sizzle (da, cel din jQuery);
• Cum sunt șanse maxime să încarci tot jQuery, nu doar Sizzle, mai adaugi vreo 20kb;

Cei 10+20kb precizați sunt valabili doar dacă ai gzip activat pe server

De ce nu ai folosi eCSStender (cu tot cu plugin-uri)?

• eCSStender.CSS3-selectors.js este plugin-ul care ar putea promite cel mai mult. Dacă nu ar ocupa 7kb pentru… Nimic. Nu știu alții cum sunt, dar eu prefer fie să adaug o clasă manual pentru cine nu suportă (IE6) selectori avansați, fie să le adaug din jQuery.
• eCSStender.CSS3-color.js mi se pare cel mai util, mai ales că este 50% funcțional (poți folosi rgba() doar pentru backgrounds. Oricum, între a folosi plugin-ul și a folosi soluția asta, parcă aș alege varianta a doua…
• eCSStender.CSS3-backgrounds-and-borders.js ar fi fost super. Dacă ar merge. Dar înlocuiește bucata de cod de care am povestit mai sus cu:

  (function(){
          if ( typeof eCSStender == undefined ){ return; }
          var e = eCSStender;
          e.disableCache();
          e.register(
            { 'fragment': 'radius',
              'test':     function()
              {
                return ( ! e.isSupported( 'property', 'border-top-left-radius: 3px' ) &&
                         ( e.isSupported( 'property', '-moz-border-radius-topleft: 3px' ) ||
                           e.isSupported( 'property', '-webkit-border-bottom-left-radius: 3px' ) ||
                           e.isSupported( 'property', '-khtml-border-bottom-left-radius: 3px' ) ) );
              },
              'fingerprint': 'net.easy-designs.border-radius'
            },
            false,
            function( selector, properties, medium ){
              var style_block = selector + ' { ';
  
              // mozilla currently messes up the individual assignment, so we need to manage that
              var transpose = false;
              if ( e.isSupported( 'property', '-moz-border-radius-topleft: 3px' ) )
              {
                transpose = true;
              }
  
              // shorthand
              if ( typeof( properties['border-radius'] ) != 'undefined' )
              {
                // handle radii or just plain old corners
                var
                radii = properties['border-radius'].split('/'),
                corners = [];
                if ( radii.length > 1 )
                {
                  var horiz = e.trim( radii[0] ).split(' ');
                  var vert  = e.trim( radii[1] ).split(' ');
                  // handle mirroring
                  if ( horiz.length < 4 )
                  {
                    if ( typeof( horiz[1] ) == 'undefined' ){ horiz[1] = horiz[0]; }
                    if ( typeof( horiz[2] ) == 'undefined' ){ horiz[2] = horiz[0]; }
                    if ( typeof( horiz[3] ) == 'undefined' ){ horiz[3] = horiz[1]; }
                  }
                  if ( vert.length < 4 )
                  {
                    if ( typeof( vert[1] ) == 'undefined' ){ vert[1] = vert[0]; }
                    if ( typeof( vert[2] ) == 'undefined' ){ vert[2] = vert[0]; }
                    if ( typeof( vert[3] ) == 'undefined' ){ vert[3] = vert[1]; }
                  }
                  // some browsers can't handle compund radii yet
                  var compound = true;
                  if ( ! e.isSupported( 'property', '-webkit-border-bottom-left-radius: 3px 3px' ) &&
                       ! e.isSupported( 'property', '-moz-border-radius-bottomleft: 3px 3px' ) &&
                       ! e.isSupported( 'property', '-khtml-border-bottom-left-radius: 3px 3px' ) )
                  {
                    compound = false;
                  }
                  for ( var i=0; i<4; i++ )
                  {
                    corners[i] = compound ? horiz[i] + ' ' + vert[i] : horiz[i];
                  }
                }
                else
                {
                  corners = properties['border-radius'].split(' ');
                }
                if ( corners.length > 1 )
                {
                  // webkit/konquerer is a little funky with multiple-assignment
                  if ( e.isSupported( 'property', '-webkit-border-bottom-left-radius: 3px' ) ||
                       e.isSupported( 'property', '-khtml-border-bottom-left-radius: 3px' ) )
                  {
                    style_block += '-webkit-border-top-left-radius: ' + corners[0] + '; ' +
                                   '-webkit-border-top-right-radius: ' + corners[1] + '; ' +
                                   '-webkit-border-bottom-right-radius: ' + corners[2] + '; ' +
                                   '-webkit-border-bottom-left-radius: ' + corners[3] + '; ' +
                                   '-khtml-border-top-left-radius: ' + corners[0] + '; ' +
                                   '-khtml-border-top-right-radius: ' + corners[1] + '; ' +
                                   '-khtml-border-bottom-right-radius: ' + corners[2] + '; ' +
                                   '-khtml-border-bottom-left-radius: ' + corners[3] + '; ';
                  }
                  else
                  {
                    style_block += '-moz-border-radius-topleft: ' + corners[0] + '; ' +
                                   '-moz-border-radius-topright: ' + corners[1] + '; ' +
                                   '-moz-border-radius-bottomright: ' + corners[2] + '; ' +
                                   '-moz-border-radius-bottomleft: ' + corners[3] + '; ';
                  }
                }
                else
                {
                  style_block += '-moz-border-radius: ' + properties['border-radius'] + '; ' +
                                 '-webkit-border-radius: ' + properties['border-radius'] + '; ' +
                                 '-khtml-border-radius: ' + properties['border-radius'] + '; ';
                }
                properties['border-radius'] = null;
              }
  
              for ( var prop in properties )
              {
                if ( e.isInheritedProperty( properties, prop ) ) { continue; };
                if ( transpose )
                {
                  style_block += prop.replace( /border-(top|bottom)-(left|right)-radius/, '-moz-border-radius-$1$2' ) +
                                 ': ' + properties[prop] + '; ';
                }
                else
                {
                  style_block += prop + ': ' + properties[prop] + '; ';
                }
              }
              style_block += '} ';
              e.embedCSS( style_block, medium );
            }
          );
        })();
  

  Acum, să-mi fie cu iertare, dar eu prefer să adaug o clasă suplimentară pentru fiecare border-radius (dacă îl folosesc mai mult de o dată)…

De ce ai folosi eCSStender?

Singurul motiv bun pe care îl văd în momentul de față este că vei avea un cod mai curat și valid. Dar având în vedere că site-urile se optimizează și pentru accesul prin conexiuni mai slabe (cum ar fi GPRS), mă îndoiesc că validarea este un criteriu atât de important.

Alternativa

O alternativă la eCSStender, dar axată doar pe IE, de „doar” 40kb, ar fi ie7

$('form input:radio').wrap('<a class="fakeRadio"/>');
$('form input:checkbox').wrap('<a class="fakeCheckbox"/>');
$('form input:checked').parent().addClass('checked');

$('form').delegate('input:radio, input:checkbox', 'change', function(){
	var t=$(this);
	if(this.type==='radio'){t.closest('form').find('input[name="'+this.name+'"]').parent().removeClass('checked');}
	if(this.checked===true) { t.parent().addClass('checked') }else { t.parent().removeClass('checked');}
}).delegate('a.fakeRadio, a.fakeCheckbox', 'focus blur', function(e){
	if(e.type==='focusin'){$(this).addClass('focus')}else {$(this).removeClass('focus')}
});

Ce s-a schimbat?

Păi.. Multe:

1. Elementul stilizat nu mai e un span ci un a(nchor). Astfel putem avea și „pătrățelul” de focus (se poate naviga doar cu tastatura);
2. Un singur bind pentru ambele elemente;
3. Cod mai puțin și un pic mai optimizat (am folosit jQuery unde a fost cu adevărat necesar, folosindu-mă de metode javascript built in);
4. CSS-ul și HTML-ul (nu mai este necesară folosirea tag-ului label).

CSS-ul

.fakeRadio,
.fakeCheckbox {
	display:inline-block;
	background:url(checkbox.png) no-repeat left top;
	width:16px;
	height:16px;
	cursor:default;
	overflow:hidden;
}
*:first-child+html .fakeRadio,
*:first-child+html .fakeCheckbox {font-size:1em;overflow:visible}

.fakeCheckbox.checked {background-position:right top;}

.fakeRadio {background-position:left bottom;}
.fakeRadio.checked {background-position:right bottom;}

.fakeRadio.focus,
.fakeCheckbox.focus {outline:1px dotted #444;}

.fakeRadio input,
.fakeCheckbox input { opacity: 0; filter:alpha(opacity=0); margin:0;padding:0; }

1. Am renunțat la float:left în favoarea lui display:inline-block. Nu merge pe niște versiuni antice de Firefox, dar consider că e un sacrificiu rezonabil. [1]
2. Am combinat cele două imagini într-una singură. Un request mai puțin către server
3. Cum nu se putea să meargă totul extrem de bine, IE7 face figuri. Prin urmare, font-size și overflow:visible sunt cam musai;
4. Opacity e mai „sexy” decât scoaterea din decor.”

HTML-ul

În principiu, poți avea un radio sau un checkbox oriunde (într-un formular, desigur):

<form action="index_submit" method="get">
	<h1>Radio buttons</h1>
	<ul>
		<li><label> <input type="radio" name="myradio" /> Test cu &lt;label&gt;</label></li>
		<li> <input type="radio" checked="checked" name="myradio" /> Test fără &lt;label&gt; </li>
		<li><label> <input type="radio" name="myradio" /> Test cu &lt;label&gt;</label></li>
		<li> <input type="radio" name="myradio" /> Test fără &lt;label&gt; </li>
	</ul>

	<h1>Chekbox</h1>
	<ul>
		<li><label> <input type="checkbox" name="check[]" />  Test cu &lt;label&gt;</label></li>
		<li> <input checked="checked" type="checkbox" name="check[]" />  Test fără &lt;label&gt;</li>
		<li><label> <input type="checkbox" name="check[]" />  Test cu &lt;label&gt;</label></li>
		<li> <input type="checkbox" name="check[]" />  Test fără &lt;label&gt;</li>
	</ul>
</form>

DEMO!

Dacă fanii l-au cerut, îl dăm!