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ă?

  1. Pun input-urile într-un span;
  2. span-urilor ce conțin input-uri bifate li se adaugă o clasă;
  3. 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.
  4. 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. :D

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.

6 Comentarii to “Formulare custom – checkbox & radio”

  1. Ionuț Botizan

    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… :P

  2. Staicu Ionuț-Bogdan

    Un DEMO ceva, n-ai de gând să pui?

    Nope! :twisted:

    Nu este utilizabil doar cu tastatura, dacă asta vrei să vezi :)

  3. Ar fi bine sa pui mereu demo, la fiecare tutorial.

  4. Ionuț Botizan

    Da, aia vreau să văd…
    Atunci de ce n-ai folosit “A” în loc de “SPAN” mă tinere?! :) 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)…
    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ș… :P

  5. Ionuț Botizan

    Stai c-am mai văzut una…
    Păi bine mă Ionuțule, “float”? :( Dacă eu am input-urile aliniate frumos la dreapta, de ce vii tu să-mi strici mie layout-ul?
    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? :P

    EDIT 2:
    Pfoai, deja mă ia cu draci! :)) Eu zic mai bine să dai “Unpublish” la articolul ăsta, să-l revizuiești și să revii mai târziu. :D
    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… :P

  6. Staicu Ionuț-Bogdan

    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 :D

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter