Leonardo Caineli Web Designer e Programador de Interfaces

Formulários semânticos

Postado em 03/12/2008 na(s) categoria(s) Padrões Web

Neste post iremos criar um formulário semântico, validado e acessível aos usuários portadores de deficiência visual (que utilizam leitores de tela) e motora (que não utilizam o mouse).

Estruturando semanticamente um formulário:

<form id="form" method="post" action="#">
	<fieldset>
		<legend>Dados pessoais</legend>
		<label for="nome">Nome</label>
		<input id="nome" name="nome" type="text" title="Nome" tabindex="1" accesskey="n" />
		<label for="email">E-mail</label>
		<input id="email" name="email" type="text" title="E-mail" tabindex="2" accesskey="e" />
	</fieldset>
	<fieldset>
		<legend>Destinatário</legend>
		<label for="depto">Selecione o departamento</label>
		<select id="depto" name="depto" title="Departamento" tabindex="3">
			<optgroup label="Departamento 1">
				<option value="nome1" title="Nome do funcionário 1">Nome do funcionário 1</option>
				<option value="nome2" title="Nome do funcionário 2">Nome do funcionário 2</option>
			</optgroup>
			<optgroup label="Departamento 2">
				<option value="nome3" title="Nome do funcionário 3">Nome do funcionário 3</option>
				<option value="nome4" title="Nome do funcionário 4">Nome do funcionário 4</option>
			</optgroup>
		</select>
	</fieldset>
	<fieldset>
		<legend>Mensagem</legend>
		<label for="msg">Escreva sua mensagem</label>
		<textarea id="msg" name="msg" cols="" rows="" tabindex="4" accesskey="m"></textarea>
		<input id="enviar" name="enviar" type="submit" value="Enviar" tabindex="5" accesskey="e" />
	</fieldset>
</form>

Fieldset:

A tag “fieldset” permite controlar um determinado grupo de campos.

Legend:

A tag “legend” permite criar um título para um determinado grupo de campos.

Label:

A tag “label” permite referenciar um campo. O atributo “for” deve ser relacionado ao atributo “id” de seu respectivo campo.

Optgroup:

A tag “optgroup” permite criar grupos da tag “option”.

Atributos:

O atributo “title” permite exibir o valor declarado no formato tooltip.
O atributo “tabindex” permite controlar a navegação dos campos através a tecla TAB.
O atributo “accesskey” permite associar teclas de atalho aos campos.

Resultado: