Dicas de como customizar formulários com jquey

Esta se tornando cada vez mais comum a pratica de Designers projetar formulários com visual diferente do padrão exibido pelos browsers.  Para implementar tal inovação, os desenvolvedores vem buscado soluções de scripts que não comprometam a acessibilidade e a performance do website.

Neste post irei demostrar uma solução que criei para personalizar inputs do tipo checkbox e radio, também listarei algumas referências de plugins muito úteis para customizar outros elementos do seu form.

Personalização de inputs checkbox e radio (demo)

Para personalizar inputs do tipo checkbox e radio é muito simples, primeiro vamos utilizar a marcação abaixo:

<ol class="list_radio">
<li><input type="radio" id="rad1" name="exemplos" /> <label for="rad1">Label 1</label></li>
<li><input type="radio" id="rad2"  name="exemplos"  /> <label for="rad2">Label 2</label></li>
<li><input type="radio" id="rad3" name="exemplos"  /> <label for="rad3">Label 2</label></li>
</ol>

<ol class="list_check">
<li><input type="checkbox" id="chck1"  /> <label for="chck1">Label 1</label></li>
<li><input type="checkbox" id="chck2" /> <label for="chck2">Label 2</label></li>
<li><input type="checkbox" id="chck3" /> <label for="chck3">Label 3</label></li>
</ol>

No CSS vamos aproveitar a herança das classes (list_check e list_radio) para colocar os respectivos backgrounds nos labels.

/* Estilo para type='radio'*/
.list_radio li { float: left; margin-right: 15px}
.list_radio li label { background: url(radio_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_radio li label.ativo { background-position: 0 -25px}
/* Estilo para type='checkbox'*/
.list_check li { padding-bottom: 10px}
.list_check li label {  background: url(check_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_check li label.ativo { background-position: 0 -26px}

Pelo jQuery iremos controlar a adição e remoção da classe ativo no label.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//escondendo os inputs padrões
$(".rad, .chck").hide();
//verificando se exite inputs marcados
$("form input").each(function(i){
if($(this).is(':checked')) {
$(this).siblings('label').addClass("ativo");
}
});
// Radios estilizados
$(".list_radio label").click(function() {
$(this).parent().siblings().children("label").removeClass("ativo");
$(this).addClass("ativo");
$(this).siblings('input[type=radio]').attr("checked", "checked");
});
// Checkboxs estilizados
$(".list_check label").toggle(
function() {
$(this).siblings('input[type=checkbox]').attr("checked", "checked");
$(this).addClass("ativo");
},        function() {
$(this).siblings('input[type=checkbox]').attr("checked", "");
$(this).removeClass("ativo");
});
});
</script>

Outras customizações

• Customização de selects

  » www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/
  » info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

• Personalização de input text

  É comum a utilização de cantos arrendodados em campos do tipo texto. As CSS3 já estão vindo com suporte a esta funcionalidade (ver código abaixo), porém para o Internet Explorer é necessário acrescentar um script.

  -moz-border-radius: 5px;/* Firefox */
border-radius: 5px; /* css3 */
-webkit-border-radius: 5px; /* Browsers webkit */

• Customização de input file

  » www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  » marcgrabanski.com/pages/code/style-file-input

É importante resaltar que fugir demais do padrão dos formulários do browser pode comprometer a usabilidade e performance do site. Desta forma o Designer tem que avaliar bem a experiência e limitações dos usuários antes de implementar essas inovações.