Clique aqui para retornar à coluna do tutorial Wulin.com HTML.
Acima: Linguagem de marcação - citações
Fonte original Capítulo 5 Formulário
A interação sempre foi o foco da Internet, permitindo que os usuários trocassem informações e se comuniquem. Os formulários nos permitem organizar e coletar informações dos usuários da mesma maneira; portanto, ao projetar um site, sempre pertencemos à categoria que pode ser usada em qualquer situação. Por exemplo, descobrimos que existem cerca de 10.000 maneiras diferentes de marcar formas. Bem, talvez não muitos, mas ainda podemos pensar em várias situações, facilitando o uso de estruturas de formulário e também facilita a gerência pelos proprietários de sites. Métodos para marcar os formulários A: Use formulários
<Form Action =/Path/to/Script Method = Post>
<tabela>
<tr>
<th> Nome: </th>
<td> <tipo de entrada = nome do texto = nome /> </td>
</tr>
<tr>
<th> email: </th>
<td> <tipo de entrada = nome do texto = email /> </td>
</tr>
<tr>
<th> & nbsp; </th>
<Td> <tipo de entrada = submeter valor = submeter /> </td>
</tr>
</tabela>
</morm>
Muitas pessoas têm formas marcadas há muito tempo com mesas. Devido à alta frequência de uso, nos acostumamos a ver as formas do tipo dessa maneira: a coluna esquerda é uma descrição de texto alinhada à direita e a coluna direita é um elemento de forma alinhado à esquerda. Usar um formulário simples de duas listas é uma das maneiras simples de concluir o tipo de formulário fácil de usar.
Algumas pessoas pensam que o formulário não é necessário e outras pensam que o formulário deve ser considerado um material de formulário. Não pretendemos suportar nenhuma declaração, mas, em alguns casos, a melhor maneira de obter um layout de formulário específico ao usar um formulário, especialmente formas complexas com muitos elementos diferentes (formas que usam caixas de rádio, caixas suspensas etc.). Confiar inteiramente no CSS para lidar com tais formas pode ser frustrante e geralmente exige que <span> e <div> consumam mais tags do que a tabela.
Em seguida, observe a Figura 5-1. Este é o efeito do método geral de exibição do navegador visual a:
Figura 5-1: Efeito do método A exibido no navegador
Você descobrirá que o uso de tabelas pode organizar os elementos de texto de uma maneira muito interessante. No entanto, para uma forma tão simples, posso evitar o uso de tabelas e usar outros métodos que não requerem tantos rótulos. A menos que o design visual do formulário exija tal tipo de composição, o formulário pode não ser necessário. Ao mesmo tempo, também devemos considerar várias facilidade de uso. Ao estudar os dois métodos a seguir, entraremos em contato com esta parte.
<Form Action =/Path/to/Script Method = Post>
<p>
Nome: <Tipo de entrada = Nome do texto = Nome /> <r />
Email: <Tipo de entrada = Nome do texto = email /> <r />
<Tipo de entrada = Submete Valor = Enviar />
</p>
</morm>
Usar um único parágrafo e algumas tags <r /> é uma maneira viável de separar todos os elementos, mas pode ser retratada visualmente um pouco espremida. Figura 5-2 O efeito de exibição da décima primeira versão do navegador:
Figura 5-2: Efeito do método de exibição do navegador B
Embora possamos concluir o layout sem usar uma tabela, ela parece um pouco lotada e feia. Ao mesmo tempo, também encontramos o problema que os elementos de formação não podem estar perfeitamente alinhados.
Conseguimos adicionar um patch extra ao elemento <input> com CSS para aliviar a sensação de aglomeração. Assim:
entrada{
margem: 6px 0;
}
O parágrafo anterior adiciona 6 pixels de patches extras às partes superior e inferior de cada elemento <input> (incluindo nome, caixa de entrada de email e botão de envio) e adiciona espaço extra entre os elementos. Assim como a Figura 5-3:
Figura 5-3. Efeito do método B após adicionar patches extras ao elemento de entrada
O próprio método B não tem grandes problemas, mas também pode ser ajustado para melhorar a forma. O método C também usa essas técnicas de ajuste fino, então vamos dar uma olhada.
<forma de ação =/path/to/script id = thisform método = post>
<p> <Rótulo para = Nome> Nome: </elabel> <r />
<Tipo de entrada = ID do texto = nome do nome = Nome /> </p>
<p> <Label for = email> email: </celt> <r />
<Tipo de entrada = ID do texto = Nome do email = Email /> </p>
<p> <Tipo de entrada = submeter valor = submeter /> </p>
</morm>
Gosto de várias coisas sobre o método C. Primeiro, para uma forma simples semelhante a este exemplo, achei mais conveniente colocar cada descrição e formar elemento em um parágrafo separado. Sem adicionar exibição de estilo, a distância predefinida entre os parágrafos deve ser suficiente para fazer você ler o conteúdo facilmente. Posteriormente, podemos definir o intervalo usando CSS como as tags <p> contidas no formulário.
Nós até demos um passo adiante e definimos um ID exclusivo = thisform para o formulário. Portanto, o intervalo exato que mencionei agora pode ser escrito como este:
#Thisform P {
margem: 6px 0;
}
Isso significa definir as manchas superiores, inferiores e externas da tag <p> nesta forma como 6 pixels, cobrindo os valores predefinidos selecionados pelo navegador para parágrafos gerais.
Outra diferença entre o método C e os dois primeiros métodos é que, embora cada grupo (caixa de instrução e entrada) seja colocado em <p>, ainda os colocamos em uma linha independente. Usando <r /> para separar cada elemento, podemos ignorar o problema de diferentes comprimentos de texto, resultando na incapacidade de alinhar perfeitamente os itens de entrada.
A Figura 5-4 mostra o efeito do método de exibição geral do navegador C, onde os estilos definidos para a tag <p> foram usados.
Figura 5-4. Efeito do método de exibição do navegador C, usando CSS para P tag
Além do efeito visual do método C, a vantagem mais importante é que ele melhora a facilidade de uso.
Usando a tag <belt> para melhorar a facilidade de uso do formulário, requer duas etapas, e o método C concluiu essas duas etapas. Primeiro, use <brety> para conectar a descrição do texto com os elementos de formulário relevantes, seja a caixa de entrada de texto (campo de texto), a caixa de entrada do bloco de texto (área de texto), a caixa de rádio (rádio), a caixa de seleção (caixa de seleção) etc. O método c usa a tag <belt> no nome: e o email: título, conectando -os aos elementos que entram nos dados.
A segunda etapa é adicionar o atributo for à tag <etiqueta> e preencher o ID da caixa de entrada correspondente.
Por exemplo, no método C, use a tag <belt> para envolver o nome: e preencha o atributo for com o mesmo valor que o ID da caixa de entrada após ele.
<forma de ação =/path/to/script id = thisform método = post>
<p> <Label for = Name> Nome: </cret> <r />
<Tipo de entrada = ID do texto = nome do nome = Nome /> </p>
<p> <Label for = email> email: </celt> <r />
<Tipo de entrada = ID do texto = Nome do email = Email /> </p>
<p> <Tipo de entrada = submeter valor = submeter /> </p>
</morm>
Talvez eu tenha ouvido outras pessoas dizer que você deve adicionar a tag <etiqueta> no formulário. A questão mais importante é por que você deve usar a tag <botey>.
É bom estabelecer associações de etiqueta/identificação que permitam aos leitores da tela ler o rótulo correto para cada elemento do formulário sem a influência do arranjo de layout. Ao mesmo tempo, a etiqueta <tabel> é criada para marcar os rótulos das barras . Ao usar esta tag, estamos explicando o significado de cada elemento e fortalecendo a estrutura do formulário.
Há um benefício adicional de usar a tag <etel e etiqueta> ao processar caixas de escolha única e multi-verificação, ou seja, a maioria dos navegadores também alterará o valor do elemento quando o usuário clicar no texto em <brety>. Isso pode criar uma área de cliques maior para o elemento de entrada, facilitando os usuários com mobilidade-inconvenientes para preencher os formulários (Mark Pilgrim, mergulhar na acessibilidade , http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
Por exemplo, se você adicionar uma caixa de verificação múltipla ao formulário para que o usuário possa optar por anotar essas informações, podemos usar a tag <etiqueta> como esta:
<forma de ação =/path/to/script id = thisform método = post>
<p> <Rótulo para = Nome> Nome: </elabel> <r />
<Tipo de entrada = ID do texto = nome do nome = Nome /> </p>
<p> <Label for = email> email: </celt> <r />
<Tipo de entrada = ID do texto = Nome do email = Email /> </p>
<p> <Tipo de entrada = ID da caixa de seleção = Remember Nome = Remember /> <Rótulo para = Lembre -se> Lembre -se desta informação? </belt> </p><p> <Tipo de entrada = submeter valor = submeter /> </p>
</morm>
Ao marcar caixas com várias verificações dessa maneira, dois benefícios podem ser obtidos: o leitor de tela pode ler o texto explicativo correto (assim como este exemplo, o texto pode aparecer após a caixa de entrada) e a gama de caixas de múltiplas verificações de comutação se tornou maior. Agora, além das próprias caixas de várias verificações, a parte do texto também está incluída (a maioria dos navegadores suporta).
A Figura 5-5 mostra o efeito de exibição deste formulário no navegador. Indicamos especificamente o intervalo de comutação de caixa múltipla após o aumento:
Figura 5-5. Várias caixas de seleção que incluem texto na faixa de comutação
Além dos formulários e parágrafos, também quero mostrar outra maneira de marcar o formulário, usando a lista de definições.
Página anterior 1 2 3 4 Próxima página Leia o texto completo