Formulare custom – checkbox & radio
Cred că una dintre cele mai mari provocări o reprezintă customizarea elementelor unui formular. Se știe că nu există niciun element de formular care să poată fi stilizat corect, începând cu banalul label până la input sau button. Cum nu ai întotdeauna nevoie de toate elementele, îți voi arăta o metodă rapidă de a stiliza radio și checkbox-uri. Fiind rapidă, folosește jQuery.
$('form input:radio').wrap('<span class="fakeRadio"/>');
$('form input:checkbox').wrap('<span class="fakeCheckbox"/>');
$('input:checked').parent().addClass('checked');
$('form').delegate('input:radio', 'change', function(){
var t=$(this);
t.closest('form').find('input[name='+t.attr('name')+']').parent().removeClass('checked');
t.parent().addClass('checked');
});
$('form').delegate('input:checkbox', 'change', function(){
var t=$(this);
if(t.is(':checked')){
t.parent().addClass('checked');
}else {
t.parent().removeClass('checked');
}
});
Ce se întâmplă?
- Pun input-urile într-un span;
span-urilor ce conțininput-uri bifate li se adaugă o clasă;- Atașez evenimentul fiecărui tip de input: dacă este radio am grijă să debifez celelalte input-uri, dacă este checkbox am grijă să-i verific starea.
- Gata.
Codul html este acesta:
<label for="checkbox1"><input type="checkbox" name="checkbox1" id='checkbox1" /> Checkbox </label> <label for="checkbox2"><input type="checkbox" name="checkbox2" id='checkbox2" /> Checkbox </label>
Este important ca bifele să fie incluse în tag-ul label dintr-un motiv extrem de simplu: altfel nu va funcționa. 
Cum acum totul se rezumă la CSS, nu ne rămâne decât să… stilizăm:
.fakeRadio,
.fakeCheckbox {
float:left;
background:url(fakeRadio.png) no-repeat left bottom;
width:18px;
height:18px;
position:relative;
margin-right:5px;
top:2px;
}
.fakeCheckbox {background-image:url(fakeCheckbox.png);}
.fakeRadio.checked,
.fakeCheckbox.checked {background-position:left top;}
.fakeRadio input,
.fakeCheckbox input {position:absolute;left:-9999px;}
Imaginile sunt aici:
Pentru formulare ceva mai avansate poți folosi niceforms.
Un DEMO ceva, n-ai de gând să pui? Că e o chichiţă pe care-aş vrea s-o verific înainte să mă iau de tine, dar mi-e lene să fac Copy&Paste la codul tău…
Nope! :twisted:
Nu este utilizabil doar cu tastatura, dacă asta vrei să vezi
Ar fi bine sa pui mereu demo, la fiecare tutorial.
Da, aia vreau să văd…
Cu “A” ar fi funcţionat navigarea în formular folosind TAB pentru că “A”-ul acceptă focus. Tot ce mai aveai de adăugat era un eveniment “keypress” unde să verifici dacă tasta apăsată a fost SPACE şi să schimbi starea input-ului asociat (this.checked = !this.checked)…
Atunci de ce n-ai folosit “A” în loc de “SPAN” mă tinere?!
Următorul pas ar fi fost să adaugi funcţionalitatea tastelor “sus/jos” în cazul input-urilor de tip radio.
Altă variantă (chiar mai simplă) ar fi să modifici opacitatea input-ului la 0.01, fără să-l mai duci în China, la -9999px, şi atunci ar fi primit focus, dar nu ar fi fost vizibil. Adăugai şi evenimente focus/blur pe input şi schimbai clasa SPAN-ului astfel încât să se vadă că are focus şi gata…
Hai, acu că ai primit indicaţii, pune mâna şi fă v.2-ul şi nu mai fi leneş…
Stai c-am mai văzut una…
Dacă eu am input-urile aliniate frumos la dreapta, de ce vii tu să-mi strici mie layout-ul?
Păi bine mă Ionuţule, “float”?
display:inline-block;ce-are? Merge (în cazul ăsta) pe toate browserele mari (inclusiv IE6).FF2 făcea figuri, dar era ceva cu -moz şi pentru el, însă nu mi-am bătut capul niciodată iar pe IE merge doar în cazul elementelor care în mod normal sunt de tip inline (nu merge efectiv, ci se întâmplă nişte chestii care provoacă acelaşi comportament pe care l-ar provoca “inline-block”).
EDIT:
Ah, şi de ce n-ai folosit un singur “sprite”, mă rog frumos? Nu erai tu ăla cu tot felul de (micro)optimizări în ceea ce priveşte viteza de încărcare a paginii şi stresul asupra serverului?
EDIT 2:
Eu zic mai bine să dai “Unpublish” la articolul ăsta, să-l revizuieşti şi să revii mai târziu. 
Pfoai, deja mă ia cu draci!
Eveniment “click” pe SPAN de ce nu există? Dacă eu nu vreau să pun INPUT-ul în interiorul LABEL-ului asociat iar vizitatorul dă click pe INPUT-ul fals în loc de LABEL? Ce se întâmplă? Evident că nimic…
Nici nu mai vorbesc cu tine până nu revizuieşti codul! Şi foarte bine ţi-au făcut ăia cu Lost-u’ lor că aşa meriţi dacă faci prostii…
Ionuț, codul l-am făcut pe la ora 2AM, cheaun de somn fiind.
Nu am folosit sprite pentru că la proiectul la care lucram am avut nevoie doar de radio. Checkbox-urile le-am făcut pentru a le pune pe blog
Mulțumesc pentru feedback, voi pune și un v2, că văd că există un oarecare interes