A versão 4 do HTML traz algumas novas tags bastante úteis. Eu mesmo deveria usá-las com mais frequência, mesmo assim sempre me irrito quando vejo suas funcionalidades implementadas de forma muito mais complicada. Aqui vão elas em ordem de importância.- Atributo title
Este atributo pode ser colocado em praticamente qualquer elemento. Quando você passa o mouse sobre o elemento, os navegadores mostram o texto dentro do title como uma tooltip. Sua utilização mais interessante é nos links, permitindo dar mais informações para o usuário de aonde o link vai levar, antes mesmo de clicar no link e mudar de contexto. Melhora em muito o cheiro da informação. Pena que no Internet Explorer, se uma imagem é linkada ela incorretamente mostra o texto de seu atributo alt, em vez do do especificado title.
Veja no link acima como funciona. Eis o código correspondente:<a href="http://www.steptwo.com.au/papers/kmc_informationscent/index.html" title="Explicação do conceito de cheiro da informação (em inglês)">cheiro da informação</a> - Elemento label
Você já tentou marcar um checkbox ou um radiobutton e clicou fora do lugar certo? E já tentou fazer isto com um mouse falhando? É difícil de acertar, não? Eles são muito pequenininhos.
Uma lei básica de interação é a chamada Lei de Fitts, que diz que o tempo para se clicar em um alvo é proporcional à sua àrea e inversamente proporcial à sua distância ao cursor. Algo grande e perto é clicado muito mais rápido do que algo pequeno e longe. É tão difícil clicar algo pequeno perto, quanto algo grande e longe. Por isto é nos programas de desktop você pode clicar no rótulo do checkbox para marcá-lo, pois se a área clicável é maior, torna-se mais fácil interagir.
E será estamos condenados no HTML a ter que clicar em uma área tão pequena para marcar os checkboxes e os radiobuttons? Claro que não! O elemento label vem nos resgatar. Ele permite que você associe um rótulo e um elemento de um form. Tente clicar nos rótulos abaixo e veja como o radiobox é selecionado:
Este é o código HTML:Qual o melhor time do mundo?<br>
<label><input name="time" value="0" type="radio">Flamengo</label>
<label><input name="time" value="1" type="radio">O Rubro-negro da Gávea</label>
De brinde, quem usa o label torna seu sítio muito melhor para deficientes visuais. A associação de elementos do form e seus rótulos costuma ser expressa apenas visualmente (e.g., colunas adjacentes numa tabela). A associação explícita permite que programas leitores de tela descrevam esta relação para o usuário. Na verdade, este é o motivo principal da criação deste elemento e a razão pela qual você deve usá-lo em todos os elementos de form.
Pena que é tão difícil achar um rótulo que possa ser clicado. Acho que só em alguns sítios do Google e do Yahoo. O número de pessoas que usa este elemento é do tamanho da pequenininha torcida do Fluminense. - Elementos fieldset e legend
Estes servem para agrupar elementos de um form. Visualmente os navegadores desenham uma caixa em volta dos elementos contidos por um fieldset, basta adicionar o legend para rotular o grupo. Veja como fica:
Confira o código:
Usando este elemento, você se valerá de um princípio básico de desenho visual chamado proximidade sem necessidade de usar enroladíssimas tabelas. Outra vantagem é que é possíver estilizar um grupo de elementos com simples regras CSS.<form>
<fieldset>
<legend>Seus dados</legend>
<fieldset>
<legend>Endereço: </legend>
<label>Rua: <input type="text"></label>
<label>CEP: <input type="text"></label>
</fieldset>
<fieldset>
<legend>Dados de pagamento: </legend>
<label>Número Cartão<input type="text"><label>
<label>Código de segurança<input type="text"></label>
</fieldset>
</fieldset>
</form> - Elemento optgroup
Confesso que este é o menos útil da lista, especialmente porque normalmente pull-down menus é um péssimo widget de interação. Nele você não pode ver todas as opções ao mesmo tempo, dificultando compará-las para escolher a melhor. Mas já que é interessante e pouco conhecido também entrou na lista. Ele te permite agrupar elementos dentro de um pull down menu. Veja o exemplo:
Eis o código:<select>
<option>Selecione seu time</option>
<optgroup label="Rio de Janeiro">
<option>Flamengo</option>
<option>Outros</option>
</optgroup>
<optgroup label="São Paulo">
<option>Aquele</option>
<option>Outros</option>
</optgroup>
</select>
Postagens
