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:
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:
Sem multiple produz:
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 |





Boa Noite,
estou tentando colocar no site um telefone de joão onde quando eu selecionar apareça o número de telefone dele. Grato.
Posted by Jean Alexandre | 24/04/2009, 21:03@ JEAN ALEXANDRE
Não entendi bem o que você quer saber, tu quer colocar o número telefone numa página? Apenas digite o número como se estivesse escrevendo o texto. Explica melhor o que tu quer fazer, se tiver algum site pra você me mostrar como exemplo facilitaria ainda mais te ajudar.
Falopa!
Posted by John-Henrique | 24/04/2009, 21:08Muito bom o post vlw ^_^
Posted by Alexandre Broggio | 23/06/2010, 07:54