A padronização da Web tem recebido cada vez mais atenção de todos. Ao criar páginas da Web que atendem aos padrões da Web, muitas vezes encontramos problemas de formulário. O artigo de hoje apresenta algumas estruturas semânticas. espero que ajude o layout CSS de todos.
1. Use tags fieldset e legenda
No formulário, geralmente agrupamos as informações do formulário. Por exemplo, no formulário de registro, podemos agrupar as informações de registro em informações básicas (geralmente obrigatórias) e informações detalhadas (geralmente opcionais). isto? Podemos considerar adicionar as duas tags a seguir ao formulário:
fieldset: formulários de grupo.
legenda: descreva o conteúdo de cada grupo
| A seguir está o conteúdo citado: <form id="demoform" class="democss" action=""> <conjunto de campos> <legend>Registro Básico</legend> <p>Nome: <input type="text" name="fname" value="" /></p> ... </fieldset> <conjunto de campos> <legend>Registro detalhado</legend> <p>Juros: <input type="text" name="interest" value="" /></p> ... </fieldset> ... </form> |
O conjunto de campos tem bordas por padrão e a legenda geralmente é exibida no canto superior esquerdo por padrão. Mas, em alguns casos, talvez você não queira permitir que os estilos ou layouts padrão de conjuntos de campos e legendas afetem a estética do design.
Solução: Defina as bordas do conjunto de campos como 0 e a exibição da legenda como nenhuma em CSS.
2. Use etiquetas
Damos um rótulo ao rótulo de texto no formulário e usamos o atributo for para associá-lo ao componente do formulário. O efeito é que quando o rótulo de texto é clicado, o cursor é exibido no componente do formulário correspondente.
| A seguir está o conteúdo citado: <form id="demoform" class="democss" action=""> <conjunto de campos> <legend>Registro Básico</legend> <p> <label for="fname">Nome:</label> <input type="text" id="fname" name="fname" value="" /> </p> ... </fieldset> <conjunto de campos> <legend>Registro detalhado</legend> <p> <label for="interest">Interesse:</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </fieldset> ... </form> |
Além dos métodos acima, também podemos usar rótulo para aninhar todo o componente do formulário e rótulo de texto, como:
| A seguir está o conteúdo citado: <label for="fname"> Primeiro nome: <input type="text" id="fname" name="fname" value="" /> </label> |
De acordo com a especificação, o texto será automaticamente associado aos componentes adjacentes do formulário, mas infelizmente - o navegador IE6 atual não suporta esse recurso.
3. Use atributos accesskey e tabindex
Os sites precisam levar em consideração mais situações de uso. Por exemplo, quando não há um dispositivo cursor (como um mouse), o formulário pode ser preenchido por meio de operações do teclado. Neste momento, escolhemos a chave de acesso do rótulo (tecla de atalho, valor do atributo alt + accesskey no IE, valor do atributo alt + shift + chave de acesso no FF) e o atributo tabindex (tecla Tab, o valor do atributo tabindex é sequência) para adicionar ao rótulo do formulário, como rótulo, entrada, etc.
| A seguir está o conteúdo citado: <label for="fname" accesskey="f" tabindex="1" >Nome:</label> <input type="text" id="fname" name="fname" value="" /> |
4. Use a tag optgroup
A função da tag optgroup é definir um conjunto de opções em uma lista de seleção. Podemos usar a tag optgroup para classificar as opções do elemento select e usar o atributo label. O valor do atributo será exibido como um título recuado não selecionável na lista suspensa (selecionar). Nota: optgroups não suportam aninhamento.
| A seguir está o conteúdo citado: <selecione nome="China"> <optgroup label="Jiangsu"> <option value="nj">Nanquim</option> <option value="sz">Suzhou</option> </optgroup> <optgroup label="Zhejiang"> <option value="hz">Hangzhou</option> <option value="wz">Wen Zhou</opção> </optgroup> </selecionar> |
Há um pequeno bug no IE6.0 (não presente no FireFox): ao usar as setas do teclado para selecionar, no IE, quando o item selecionado é alterado de uma opção de um optgroup para uma opção de outro optgroup, o onchange não irá ser acionado. A solução é: adicionar eventos onkeydown ou onkeyup para ajudar a resolver o problema.
5. Use tags de botão
Definição e uso
Definido como um botão de envio. Dentro do elemento botão você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e o botão do elemento de entrada.
<button><img src="images/click.gif" alt="Clique em mim!" />Clique em mim!</button>
O botão fornece mais funções e conteúdo mais rico do que a entrada. O botão separa o texto do botão e você pode adicionar imagens dentro do botão, dando ao texto e às imagens mais estilos para escolher, tornando o botão rígido mais vívido.
E usar tags de botão será mais semântico do que botões de entrada e pode ser entendido simplesmente pelo significado literal.