Na linguagem HTML temos diversas tags que podem nos ajudar a melhorar diversos itens de nossos sites e sistemas web, desde segurança até mesmo acessibilidade e desempenho.

Neste irei mostrar algumas tags que facilitam o trabalho do desenvolvedor e também facilitam a vida de usuário.

Auto completar campos

Você já deve ter notado que em diversos sites onde o usuário precisa logar-se digitando seu email ou nome de usuário, por diversas vezes aparece o login ou email de outros usuários que já utilizaram o mesmo computador anteriormente, pois bem, a maioria dos navegadores permitem que seja desativado este recurso, para computadores públicos este recurso deveria estar desabilitado, mas, nem sempre isso acontece. O problema é que alguém mal intencionado pode utilizar o seu endereço de email ou usuário para alguma ação sem sua autorização, ou mesmo, para enviar spam. O que quase ninguém sabe é que o HTML permite que nós desabilitemos este recurso com um parâmetro bem simples de lembrar.

<input name=”login” autocomplete=”off” type=”text” />

Produz:

Para testar, digite algum texto e envie clique no botão testar, ao recarregar a página tente digitar o mesmo texto e verá que o campo não tenta autocompletar o texto.

O parâmetro AUTOCOMPLETE aceita dois tipos de valores ON e OFF (maiúsculo ou minúsculo, tanto faz) o padrão é ON, por este motivo qualquer campo sem autocomplete OFF exibe as últimas palavras digitadas nos campos.Observação: Apesar de tudo este parâmetro não é seguro devido ao fato de alguns navegadores não aceitarem ou não suportarem sua funcionalidade. De qualquer forma sempre que puder use-o.

Impedir alterações nos valores de um campo de texto

Em alguns projetos precisamos exibir determinadas informações em campos, mas, não podemos permitir que o usuário possa edita-las, normalmente isso ocorre em formulários onde exista um valor padrão. Em HTML é possível fazer isso utilizando o parâmetro READONLY, este parâmetro deixa o campo com o estado somente leitura, de forma que o usuário poderá apenas ler e selecionar o valor do campo. Este parâmetro não possui um valor, para usa-lo apenas é necessário informa-lo na tag do input.

<input name=”login” type=”text” readonly=”readonly” value=”Tente digitar algo” />

Produz:

Observação: READONLY não funciona em campos do tipo SELECT ou SELECT BOX.

Desabilitar campos de textos

Em alguns casos é preciso exibir alguma informação em um campo, mas, sem permitir que o usuário realize alguma seleção do valor do campo, melhor ainda, impedindo que o usuário realize alguma ação com o campo. Em HTML podemos fazer isso utilizando o parametro DISABLED, este parametro também não possui valor.

<input name=”login” type=”text” disabled=”disabled” value=”Tente copiar ou digitar algo” width=”50″ />

Produz:

Botões de formulários personalizados com imagens

Muitas vezes precisamos estilizar nossos elementos HTML e algumas vezes deixamos de fazer determinada estilização devido ao fato de alguns itens não serem compativeis com o nosso objetivo, isso acontece sempre com botões de formulário os SUBMITs e os BUTTONs, no HTML podemos personalizar estes elementos utilizando imagens, podendo assim, criar botões em formas diferentes como triangulos, circulos entre outros que desejar. Esta estilização pode ser feita usando o atributo SRC.

<input src=”wp-content/themes/dapit_hapon/images/dapithapon_subhead.gif” type=”button” />
<input src=”wp-content/themes/dapit_hapon/images/dapithapon_subhead.gif” type=”submit” />

Produz:

Atualmente o w3c adotou o imagefield como padrão, sendo assim, alguns navegadores mais recentes não interpretam os exemplos acima, em todo caso utilize este exemplo.
<input type=”image” name=”imageField” id=”imageField” src=”wp-content/themes/dapit_hapon/images/dapithapon_subhead.gif” />
Produz:

Selecionar mais de um item em um SELECT

Em alguns casos é preciso selecionar mais de uma opção dentro de um select ou menu de lista, enfim, SELECT. Podemos definir que um SELECT permita selecionar mais de uma opção utilizando o atributo MULTIPLE da seguinte forma.
Para selecionar mais de um item o usuário precisa manter a tecla CONTROL ou SHIFT precionada enquanto seleciona as opções.

<select name=”frutas[]” size=”3″ multiple=”multiple”>
<option value=”maçã”>maçã</option> <option value=”banana”>banana</option> <option value=”uva”>uva</option>
<option value=”pera”>pera</option>
<option value=”melancia”>melancia</option>
<option value=”morango”>morango</option>
</select>

Produz:

maçã banana uva pera melancia morango

Ao selecionar mais de um item eles ficaram disponíveis em um array, neste caso seria assim: frutas[0] com o valor do primeiro item selecionado e frutas[1] com o valor do segundo item selecionado.

Destacar itens de um select

Para melhor organizar um select podemos separar as opções em grupos utilizando o atributo OPTGROUP. Também pode-se utilizar o atributo MULTIPLE como citado anteriormente.

<select name=”comidas”>
<optgroup label=”Frutas”></optgroup>
<option value=”maçã”>maçã</option>
<option value=”banana”>banana</option>
<option value=”uva”>uva</option>
<optgroup label=”Bebidas”></optgroup>
<option value=”água”>água</option>
<option value=”refrigerante”>refrigerante</option>
<option value=”suco”>suco</option>
<option value=”outros”>Outros</option>
</select>

Com multiple produz:

maçã banana uva

água refrigerante suco Outros

Sem multiple produz:

maçã banana uva

água refrigerante suco Outros

Conclusão, vimos que existem elementos HTML úteis e que ainda possuem atributos e parametros que os tornam ainda mais úteis, mas, o fato deles permitirem uma melhor apresentação somente com HTML não quer dizer que você não possa melhora-los com algumas pitadas de CSS e Java Script e um pouco de criatividade.

Compare Preços de: DVD, MP3, LCD, Plasma, HDTV, Home Theater no JáCotei.

Ofertas válidas até a meia noite de hoje
Flash Sites Profissionais. 5 Dvds 20 Gb De Dados. Confira! Mais info» R$ 29.99 até 18x de 2.25	Mega 2.200 Sites Efeitos Códigos Lojas Logos Banners Blogs Mais info» R$ 9.90 até 18x de 0.74	Nova Mega Loja E Commerce 2010 Versão 11 Asp 18 Modelos Mais info» R$ 89.90 até 18x de 6.74	8 Dvd´s Muitas Imagens Em Alta Resolução Psd Máscaras Mais info» R$ 22.99 até 18x de 1.72	Webdesign Teoria E Prática Mais info» R$ 62.90 até 18x de 4.72	Webdesign Teoria E Prática(manuseado) Mais info» R$ 49.90 até 18x de 3.74
Vitrine Tecnoblog