Depois de entrar no eYou.com, tive que converter imediatamente a nova versão da interface de e-mail para XHTML + CSS. Felizmente, minhas habilidades básicas ainda são sólidas o suficiente, então fiz isso de maneira ordenada. Claro, você encontrará novos problemas. Por exemplo, quando você costuma criar páginas da web, raramente usa formulários porque não tem experiência com programas. Felizmente, o mundo ainda tem o Google, o que me permite enfrentar facilmente novos desafios. Escreva algumas experiências e compartilhe-as com todos.
Com base em considerações de acessibilidade, a forma padrão de escrever um formulário deve incluir conjunto de campos e legenda (descrição) em <form> e </form> para permitir que os usuários entendam o resumo do campo do formulário. A estrutura simples é a seguinte:
| A seguir está o conteúdo citado: <formulário> <conjunto de campos> <legenda></legenda> ... </fieldset> </form> |
Em alguns casos, você pode não querer que o conjunto de campos e a legenda afetem a estética do seu design. Basta definir a borda do conjunto de campos como 0 e a exibição da legenda como nenhuma em CSS.
Na maioria dos casos, o layout do formulário é dividido em duas colunas, com o rótulo à esquerda e a caixa de entrada (input type="text"...) à direita. Com um layout tão simples de duas colunas, não recomendo fortemente o uso de tabelas. Referência http://stylephreak.frogrun.com/uploads/source/cssform.php e http://www.aplus.co.yu/css/forms/?css=1 (duas referências definitivamente valiosas, você já não (não é necessário ler mais), descobrimos que a solução comum para padrões da Web é adicionar um div ao redor do rótulo e inserir type="text"... e definir a exibição do div como block. Defina o rótulo como float: left; (esta também é a razão pela qual o div está definido para display: block;) e então o rótulo pode ser colocado na mesma linha da caixa de entrada. Um pequeno truque para alinhar rótulos é fixar a largura do rótulo e, em seguida, usar text-align para alinhá-lo à esquerda ou à direita, conforme necessário. Uma dica para definir a largura é usar a unidade em para definir a largura com base na contagem máxima de palavras da tag, sem precisar testar laboriosamente o px.
Para tornar minha explicação mais fácil de entender, simplesmente escrevo um código:
| A seguir está o conteúdo citado: XHTML: (parcial) <formulário> body {/*Não tem nada a ver com o formulário, define o efeito de exibição da página*/ |