Thread by @lixeletto

Gente, acabei de ver um cara falar pra trocar o <form> por uma <div> pra cessar o trigger do evento ao clicar no botão, nunca, sob hipótese alguma, substituam o elemento form por outra coisa, segue o porquê:

1 - Você perde a lista gigante de métodos disponíveis no elemento form (HTMLFormElement), na dúvida? Abre seu devTools e no console digite:

`dir(HTMLFormElement)`

Em seguida acesse o grupo `prototype` dele:

Tal como a <div> ele herda muitos métodos do prototype HTMLElement, mas ele tem métodos próprios valiosíssimos:

- elements
Retorna uma HTMLFormControlsCollection, que é uma array com todos os seus inputs
developer.mozilla.org/en-US/docs/Web…

esse `elements` é uma maneira muito limpa de acessar o seu formulário sem ficar catando de um por um via querySelector.

- checkValidity
O método checkValidity quando em um formulário aplica as validações que você colocou nos inputs via atributos (required, max, min, pattern ...)

Ele dispara todas essas restrições e coloca o atributo "valid" ou "invalid" no seu formulário. Esses atributos por sua vez são acessíveis pelo CSS via

:valid, :invalid { }

Você pode fazer isso nos inputs em particular também
jonathan-harrell.com/advanced-css-o…

- Você pode forcar eventos de submit(), reset() condicionalmente.

- Você consegue passar o seu formulário inteiro dentro da classe FormData pra retornar um objeto em string com os values dos seus inputs

javascript.info/formdata#:~:te…

2 - Tu consegue acessar todos os formulários da sua página via document

o `document.forms` retorna um HTMLCollection (tal como um querySelectorAll) com todos os seus formulários

tu consegue acessar via index:
`document.forms[0]`

ou via nome
`document.forms.index`

Pra acessar com o index tu tem que colocar o atributo 'name' no HTML

developer.mozilla.org/en-US/docs/Web…

3 - Os atributos do html <form> são fodas demais

- Apenas no IOS há suporte pro atributo `autocapitalize` que faz exatamente isso que vc tá pensando

- Você consegue habilitar o autocomplete do navegador pra todos os elementos do form simultaneamente passando essa propriedade

- a `action`recebe a URL bunitinha que vai receber as informações pelo método que tu especificou em `method` e com o enctype que tu especificou em `enctype`

- redirecionar pra outra página no submit? Isso é cousa do atributo `target`

developer.mozilla.org/en-US/docs/Web…

Tem um absurdo de coisas que a gente enche o cu de JS quando não precisa, dêem uma fucadinha sempre que possível e levem o poder do HTML mais a sério!

Faltou alguma coisa? Falei bobagem? Comenta ai

"Ah mas fazer pelo JS é melhor" chupa minha rola então