Devo colocar elementos de entrada dentro de um elemento de rótulo?

Existe uma melhor prática sobre a nidificação de labele inputelementos HTML?

maneira clássica:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

ou

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

De w3: o próprio rótulo pode ser posicionado antes, depois ou ao redor do controle associado.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

ou

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

ou

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

Observe que a terceira técnica não pode ser usada quando uma tabela está sendo usada para layout, com o rótulo em uma célula e seu campo de formulário associado em outra célula.

Qualquer um é válido. Eu gosto de usar o primeiro ou o segundo exemplo, pois oferece mais controle de estilo.

eu prefiro

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

sobre

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

Principalmente porque torna o HTML mais legível. Na verdade, acho que meu primeiro exemplo é mais fácil de estilizar com CSS, pois o CSS funciona muito bem com elementos aninhados.

Mas é uma questão de gosto, suponho.

Se você precisar de mais opções de estilo, adicione uma tag de extensão.

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Código ainda parece melhor na minha opinião.

Se você incluir a tag de entrada na tag label, não precisará usar o atributo 'for'.

Dito isso, não gosto de incluir a tag de entrada nos meus rótulos porque acho que eles são entidades separadas, não contendo.

Diferença de comportamento: clicar no espaço entre o rótulo e a entrada

Se você clicar no espaço entre o rótulo e a entrada, ele ativará a entrada apenas se o rótulo contiver a entrada.

Isso faz sentido, pois nesse caso o espaço é apenas outro caractere do rótulo.

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

Ser capaz de clicar entre o rótulo e a caixa significa que é:

• mais fácil clicar
• menos claro onde as coisas começam e terminam

Os exemplos da caixa de seleção Bootstrap v3.3 usam a entrada interna: http://getbootstrap.com/css/#forms Pode ser sábio segui-los. Mas eles mudaram de idéia na v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios, então não sei mais o que é sábio:

As caixas de seleção e o uso de rádios são criados para oferecer suporte à validação de formulário baseada em HTML e fornecer rótulos concisos e acessíveis. Como tal, os nossos <input>s e <label>s são elementos irmãos, em oposição a um <input>dentro de um <label>. Isso é um pouco mais detalhado, pois você deve especificar o id e os atributos para relacionar o <input>e <label>.

Pergunta do UX que discute esse ponto em detalhes: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

Pessoalmente, gosto de manter o rótulo do lado de fora, como no seu segundo exemplo. É por isso que o atributo FOR está lá. A razão é que frequentemente aplicarei estilos ao rótulo, como uma largura, para que o formulário fique bonito (abreviado abaixo):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

Faz com que eu possa evitar tabelas e todo esse lixo nos meus formulários.

Consulte http://www.w3.org/TR/html401/interact/forms.html#h-17.9 para obter as recomendações do W3.

Eles dizem que isso pode ser feito de qualquer maneira. Eles descrevem os dois métodos como explícitos (usando "for" com o ID do elemento) e implícitos (incorporando o elemento no rótulo):

Explícito:

O atributo for associa um rótulo a outro controle explicitamente: o valor do atributo for deve ser o mesmo que o valor do atributo id do elemento de controle associado.

Implícito:

Para associar um rótulo a outro controle implicitamente, o elemento de controle deve estar dentro do conteúdo do elemento LABEL. Nesse caso, o LABEL pode conter apenas um elemento de controle.

Ambos estão corretos, mas colocar a entrada dentro do rótulo torna muito menos flexível ao estilizar com CSS.

Primeiro, a <label>é restrito em quais elementos ele pode conter . Por exemplo, você só pode colocar um <div>entre o <input>texto e o rótulo, se <input>não estiver dentro do <label>.

Segundo, embora existam soluções alternativas para facilitar o estilo, como agrupar o texto do rótulo interno com uma extensão, alguns estilos serão herdados dos elementos pai, o que pode tornar o estilo mais complicado.

Uma 'pegadinha' notável determina que você nunca deve incluir mais de um elemento de entrada dentro de um elemento <label> com um atributo "for" explícito, por exemplo:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

Embora isso possa ser tentador para recursos de formulário nos quais um valor de texto personalizado é secundário a um botão de opção ou caixa de seleção, a funcionalidade de foco no clique do elemento label lança imediatamente o foco no elemento cujo ID está explicitamente definido no atributo 'for' , tornando quase impossível para o usuário clicar no campo de texto contido para inserir um valor.

Pessoalmente, tento evitar elementos de rótulo com filhos de entrada. Parece semanticamente impróprio para um elemento de rótulo abranger mais do que o próprio rótulo. Se você estiver aninhando entradas em rótulos para obter uma certa estética, você deve usar CSS.

Como a maioria das pessoas disse, os dois lados funcionam de fato, mas acho que apenas o primeiro deveria. Sendo semanticamente rígido, o rótulo não "contém" a entrada. Na minha opinião, o relacionamento de contenção (pai / filho) na estrutura de marcação deve refletir a contenção na saída visual . ou seja, um elemento ao redor de outro na marcação deve ser desenhado ao redor do elemento no navegador . De acordo com isso, o rótulo deve ser o irmão da entrada, não o pai. Portanto, a opção número dois é arbitrária e confusa. Todo mundo que leu o Zen do Python provavelmente concordará (Flat é melhor que aninhado, Sparse é melhor que denso; deve haver um - e de preferência apenas um - meio óbvio de fazê-lo ...).

Devido a decisões como essa do W3C e dos principais fornecedores de navegadores (permitindo "da maneira que você preferir", em vez de "fazer da maneira certa"), a Web está tão bagunçada hoje e os desenvolvedores precisam lidar com problemas e código legado tão diverso.

Eu costumo ir com as duas primeiras opções. Vi um cenário em que a terceira opção foi usada, quando as opções de rádio estavam incorporadas nos rótulos e no css continha algo como

label input {
    vertical-align: bottom;
}

para garantir o alinhamento vertical adequado dos rádios.

Referindo-se ao WHATWG ( Gravando a interface do usuário de um formulário ), não é errado colocar o campo de entrada dentro do rótulo. Isso economiza seu código porque o foratributo do labelnão é mais necessário.

Eu prefiro agrupar elementos dentro do meu <label>porque não preciso gerar os IDs.

Sou desenvolvedor de Javascript e React ou Angular são usados ​​para gerar componentes que podem ser reutilizados por mim ou por outras pessoas. Seria fácil duplicar um ID na página, levando a comportamentos estranhos.

Uma coisa que você precisa considerar é a interação da caixa de seleção e das entradas de rádio com o javascript.

Usando a estrutura abaixo:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

Quando o usuário clica na função controlCheckbox () "Texto do rótulo", é acionada uma vez.

Mas quando a tag de entrada é clicada, a função controlCheckbox () pode ser acionada duas vezes em alguns navegadores mais antigos. Isso ocorre porque as tags de entrada e rótulo acionam o evento onclick anexado à caixa de seleção.

Então você pode ter alguns erros em seu checkboxState.

Ultimamente, tenho encontrado esse problema no IE11. Não tenho certeza se os navegadores modernos têm problemas com essa estrutura.

A principal vantagem de colocar inputdentro labelé a eficiência de digitação para humanos e armazenamento de bytes para computadores.

@Znarkus disse em seu comentário ao OP,

Um dos grandes profissionais de colocar o <input />interior de <label>, é que você pode omitir fore id: <label>My text <input /></label>no seu exemplo. Muito melhor!

Nota: No código @Znarknus, outra eficiência foi incluída, não explicitamente declarada no comentário. type="text"também pode ser omitido e inputrenderizará uma caixa de texto por padrão.

Uma comparação lado a lado de pressionamentos de tecla e bytes [1].

31 pressionamentos de tecla, 31 bytes

<label>My Text<input /></label>

58 pressionamentos de tecla, 58 bytes

<label for="myinput">My Text</label><input id="myinput" />

Caso contrário, os trechos são visualmente iguais e oferecem o mesmo nível de acessibilidade do usuário. Um usuário pode clicar ou tocar no rótulo para colocar o cursor na caixa de texto.

[1] Arquivos de texto (.txt) criados no bloco de notas no Windows, bytes das propriedades do Windows File Explorer