É ruim design para usar tags de mesa ao exibir formulários em HTML?

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

Pergunta

Eu continuo a ouvir que as tags div deve ser usado para fins de layout e etiquetas não table. Então, isso também se aplica para formar layout? Eu conheço um layout do formulário é ainda um layout, mas parece que a criação de layouts de formulário com divs requer mais html e css. Então, com isso em mente, deve formulários layouts uso div etiquetas vez?

Foi útil?

Solução

Sim, ele faz aplicar para layouts de formulário. Tenha em mente que há também marcas como FIELDSET e LABEL que existem especificamente para adicionar estrutura a um formulário, por isso não é realmente uma questão de apenas usando DIV. Você deve ser capaz de marcação de um formulário com HTML mínima bonita, e deixe CSS fazer o resto do trabalho. Por exemplo:. 

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Outras dicas

Eu acho que é um mito que as formas são "difíceis" para o layout bem com boa HTML e CSS. O nível de controle que CSS dá-lhe sobre o seu layout vai muito além do que qualquer layout baseado em tabelas desajeitado que nunca faria. Esta não é uma ideia nova, como este Smashing artigo da revista do caminho de volta em 2006 shows.

I tendem a usar variantes da seguinte marcação em minhas formas. Eu tenho um estilo .form genérico no meu CSS e, em seguida, as variantes para as entradas de texto, caixas de seleção, seleciona, textareas etc etc. 

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

As tabelas não são maus. Eles são, de longe, a melhor opção quando as necessidades de dados tabulares a ser exibido. Formas IMHO são dados não tabulares - são formas, e CSS fornece mais do que ferramentas suficientes para formas de layout no entanto você gosta .

Se você só precisa de uma simples linha da coluna Tipo de aperto layout que você não deve se sentir culpado usando tabelas. Eu não sei como alguém pode chamar isso de 'mau design' apenas porque não é CSS. Já vi projetos baseados muitos mau CSS. Eu amo CSS e acho que muito superior em muitas maneiras de layouts de tabela aninhada tradicionais, mas fazer o que bests funciona eo que é mais fácil de manter e avançar para decisões mais importantes, mais impactantes.

O princípio geral é que você quer usar o que elementos HTML melhor transmitir o conteúdo semântico que você está pretendendo e, em seguida, contar com css para representar visualmente que o conteúdo semântico. Seguindo esse princípio compra um monte de benefícios intrínsecos, incluindo mais fáceis de sites geral mudanças visuais, search engine optimization, layouts multi-dispositivo, e acessibilidade.

Assim, a resposta curta é: você pode fazer o que quiser, mas as melhores práticas sugerem que você só pode usar marcas de tabela para representar dados tabulares e em vez disso usar qualquer html tags de melhor transmitir o que é que você está tentando representar. Pode ser um pouco mais difícil inicialmente, mas uma vez que você se acostumar com a idéia, você vai saber porque você nunca fez isso de outra maneira.

Dependendo do que você está tentando fazer com sua forma, não deve demorar muito mais marcação para usar marcação semântica e CSS, especialmente se você contar com as propriedades em cascata de css. Além disso, se você tem vários da mesma forma em várias páginas em seu site, a abordagem semântica é muito mais eficiente, tanto para código e de manter.

Para fazer formas mais acessível possível e semanticamente correta, eu uso o seguinte formato: 

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

Eu uso CSS em sua maioria, até CSS torna-se um empecilho. Por exemplo, é muito mais fácil de criar uma coluna 3+ (3 conjuntos de rótulo campo de formulário +) formulário usando uma tabela do que em css. Eu não poderia obter o layout de olhar adequadamente em todos os principais navegadores usando css puro e eu estava gastando muito tempo fazê-la funcionar. Então eu disse parafuso-lo e eu fiz isso facilmente usando uma tabela. Tabela não são ruins.

É uma área cinzenta. Nem tudo na marcação tem limites claramente definidos, e este é um caso em que você começa a usar sua preferência pessoal e fazer um julgamento. Ele não se encaixa a idéia de dados que está sendo organizado, mas as células estão relacionados em vários eixos, e essa é a regra de ouro que eu uso para decidir se encaixa algo em uma mesa ou não.

É certamente mais fácil de usar a tabela de div para o layout de uma tabela, mas tenha em mente que uma mesa é suposto significar alguma coisa - é apresentar dados de forma regular para o usuário ver, mais do que colocar caixas na tela um determinado fim. Em geral, eu acho que formas layouts deve usar divs para decidir como os elementos do formulário são exibidos.

Uma coisa que eu não costumo ver discutidos nestas questões layout do formulário, se você tiver escolhido uma tabela para o layout de seu formulário (com rótulos à esquerda e campos à direita como mencionado em uma das respostas), em seguida, que o layout é fixo. No trabalho que recentemente teve que fazer um 'prova de conceito' rápida das nossas aplicações web em árabe. Os aplicativos que tinha usado tabelas para o layout do formulário eram basicamente preso, enquanto eu era capaz de inverter a ordem de todos os campos do formulário e etiquetas em todas as minhas páginas, alterando sobre linhas dez no meu arquivo CSS.

Se os formulários são dispostas em um formato tabular (por exemplo, rótulos de esquerda e os campos à direita), então sim, etiquetas de uso da tabela.

A forma não é "apresentação", você pergunta para dados, você geralmente não apresentam dados. Eu uso um monte de edição em linha em dados tabulares. Obviousely eu uso o datacells - td como titulares para os elementos de entrada quando mudar de apresentação a entrada

.

A maioria das respostas que eu vi aqui parece adequado. A única coisa que eu gostaria de acrescentar, especificamente para o apáticos ou Mr. Matt é usar <dl>/<dt>/<dd>. Eu acredito que estas representam a lista semanticamente. 

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

Você pode querer remodelar estes, mas este diz semanticamente o que está acontecendo, que é que você tem uma lista de "termos" (<dt>) e "definições" (<dd>), com o termo sendo o rótulo ea definição sendo o usuário valores inseridos.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top