Por que utilizar um elemento form quando submit campos com JavaScript?

Nota: apenas traduzi o texto abaixo e postei aqui.

Uma pergunta que muitas vezes aparece para nós é a seguinte:

Se estivermos "preventing" o comportamento default de form submission e tratando-o manualmente (por exemplo, com a Fetch API), há mais algum motivo para usar a tag <form>? (exceto o form submission com tecla enter/return...)

Quando comecei minha jornada para o desenvolvimento web, tive a mesma pergunta.

Observação rápida: adoro quando as pessoas fazem perguntas que você acha que são óbvias para todos os outros. Freqüentemente, há outras pessoas que estão se perguntando a mesma coisa, mas têm medo de perguntar.

Existem dois motivos pelos quais você ainda deve usar um elemento form:

• Isso torna sua vida mais fácil.
• Semântica (e a acessibilidade que daí resulta).

Usar um elemento form torna a vida mais fácil

Considere um grupo de campos sem um elemento form.

<label for="username">Nome do usuário</label>
<input type="text" id="username">

<label for="password">Senha</label>
<input type="password" id="password">

<button id="signin">Logar</button>

Você pode "listen" os cliques no #signin button.

Mas essa não é a única maneira de alguém submit um form. Eles poderiam realizar "focus" no button e apertar a barra de espaço. Eles poderiam pressionar a tecla Enter em qualquer campo do form.

Agora você está analisando pelo menos três event listeners diferentes para "listen" adequadamente as form submissions.

Um event listener para governar todos eles

Em vez disso, vamos agrupar os campos em um form element com o ID #signin.

<form id="signin">
    <label for="username">Nome do usuário</label>
    <input type="text" id="username">

    <label for="password">Senha</label>
    <input type="password" id="password">

    <button id="signin">Logar</button>
</form>

Com esta configuração, você pode attach um submit event ao #signin form, e ele será disparado em qualquer uma dessas situações.

Quer os usuários cliquem no button, usem a barra de espaço para pressioná-lo ou pressionem a tecla Enter em um dos campos, um único event listener capturará o comportamento do usuário para que você possa conectá-lo e executar seu JavaScript.

Semântica e acessibilidade

A segunda razão é a semântica.

Se algo for um formulário, use um elemento form. Isso ajuda dispositivos assistivos, como screen readers, a compreender melhor o conteúdo da página e fornecer à pessoa que os utiliza informações mais significativas.

Realmente não há muito mais a dizer aqui. Se algo for um formulário, use o elemento form.

Fonte

Newsletter de Go Make Things