O que há de novo nos formulários em 2022?

Os navegadores estão constantemente adicionando novos recursos HTML, JavaScript e CSS. Aqui estão algumas adições úteis para trabalhar com formulários que você pode ter perdido…

requestSubmit()

Safari 16 será o navegador final para adicionar suporte para requestSubmit.

Antes de vermos como .requestSubmit() funciona, vamos nos lembrar de como o envio de um formulário programaticamente com JavaScript funciona ao usar o .submit() método. Envio de formulário com submit() não aciona um evento de envio. Então, no código a seguir, o formulário é enviado, preventDefault() não tem efeito e nada é registrado no console:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  // code to submit the form goes here
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
})

.submit() também irá ignorar qualquer validação de formulário HTML. Dada a marcação a seguir, o formulário será enviado quando a entrada estiver vazia, mesmo que a entrada tenha um required atributo:

<form>   
  <label for="name">Name</label>
  <input required name="name" id="name" type="text">
</form>

.requestSubmit() é uma maneira alternativa de enviar um formulário usando JavaScript, mas em contraste com .submit(), a validação do formulário HTML impedirá que o formulário seja enviado. Se todos os dados inseridos no formulário passarem pela validação, o submit evento será acionado, significando "formulário enviado!" seria registrado no console no exemplo a seguir:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

Você já pode fazer isso clicando programaticamente no botão de envio do formulário, mas requestSubmit talvez seja uma solução mais elegante.

submitter propriedade do evento de envio

A SubmitEvent.submitter propriedade adquirida suporte completo entre navegadores com o lançamento do Safari 15.4. Esta propriedade somente leitura especifica o <button> or <input type="submit"> elemento que causou o envio de um formulário.

<form>
  <button name="foo" value="bar" type="submit">Bar</button>
  <button name="foo" value="baz" type="submit">Baz</button>
</form>

Quando você tem vários botões ou entradas de envio, cada um com um valor diferente, apenas o valor do botão ou entrada que foi clicado para enviar o formulário será enviado ao servidor, em vez de ambos os valores. Isso não é novidade. A novidade é que o ouvinte de eventos para o evento submit agora tem acesso ao event.submitter propriedade. Você pode usar isso para adicionar uma classe ao botão ou entrada que acionou o envio do formulário, por exemplo, ou para obter sua value ou qualquer outro de seus atributos HTML.

document.forms[0].addEventListener('submit', function(event) {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(event.submitter.formaction);
  event.submitter.classList.add('spinner-animation');
})

formdata evento

Isso não é particularmente novo, mas apenas alcançou suporte entre navegadores com o lançamento do Safari 15. O principal caso de uso para o formdata O evento está permitindo que elementos personalizados participem de envios de formulários. Fora dos componentes da web, no entanto, ainda pode ser útil.

Você adiciona um formdata ouvinte de eventos para o formulário com o qual você deseja interagir:

document.querySelector('form').addEventListener('formdata', handleFormdata);

O evento é acionado tanto por um envio de formulário HTML regular quanto por uma ocorrência de new FormData(). event.formData contém todos os dados que estão sendo enviados.

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

A função de retorno de chamada para o formdata O ouvinte de eventos é executado antes que os dados sejam enviados ao servidor, dando a você a chance de adicionar ou modificar os dados que estão sendo enviados.

function handleFormdata(event) {
  event.formData.append('name', 'John');
}

Você poderia ter modificado ou anexado o FormData dentro do manipulador de eventos de envio, mas formdata permite separar a lógica. É também uma alternativa ao uso de entradas ocultas na marcação do seu formulário nos casos em que você está enviando o formulário "à moda antiga" - ou seja, confiando na funcionalidade interna do HTML para enviar o formulário em vez de fazê-lo com fetch.

showPicker() para elementos de entrada

showPicker() foi suportado desde o Chrome 99, Firefox 101 e no próximo Safari 16. Para um elemento de entrada cujo atributo de tipo seja Data, Mês, Semana, Hora, datetime-local, cor ou arquivo, showPicker() fornece uma maneira programática de exibir a IU de seleção. Para entradas de cor e arquivo, sempre foi possível mostrar programaticamente o seletor chamando .click na entrada:

document.querySelector('input[type="color"]').click();

Essa abordagem não funciona em entradas de data, e é por isso que essa nova API foi adicionada. .showPicker() também funcionará com entradas de cor e arquivo, mas não há nenhuma vantagem real em usá-lo .click().

Atributo inerte

Sempre foi possível desabilitar várias entradas de uma vez envolvendo-as em um HTML fieldset e desabilitando o fieldset:

Inerte é um novo atributo HTML. Não é apenas para formulários, mas formulários são certamente um caso de uso chave. Ao contrário do disabled atributo, inert pode ser aplicado a um form próprio elemento. Tudo dentro do formulário será não focalizável e não clicável. Quando se trata de tecnologias assistivas, inert é semelhante à configuração aria-hidden="true". Ao contrário do disabled atributo, inert não aplica nenhum estilo por padrão, mas é fácil adicionar o seu próprio:

form[inert] {
  opacity: .2;
}

Tem mais por vir…

O grande é o estilo <select> elementos, algo que os desenvolvedores desejam há décadas. Parece pronto para finalmente se tornar uma realidade em breve com a introdução de selectmenu.

Mas por enquanto é isso! As atualizações recentes trazem suporte completo ao navegador para formar recursos que esperávamos, tornando-os excelentes para uso em produção.