Post

Haz
@haz.dev

HTML forms are so broken. With every other element, you can do this: <div id="foo"> div⁠.⁠id // "foo" Forms work the same way too: <form id="bar"> form⁠.⁠id // "bar" But then: <form id="bar"> <input name="id"> form⁠.⁠id // the input element 🤡

Haz
@haz.dev

And it doesn't stop with attributes. An input named "click" breaks form⁠.⁠click(), etc.

0 reposts5 likes

Haz
@haz.dev

Now guess what happens to document.activeElement if you have this: <form name="activeElement"> Yes, it’s as bad as it gets.

Haz
@haz.dev

If you add the name attribute to the form element itself, it pollutes the document scope.

Haz
@haz.dev

At least that gives you an explicit error. The problem is silent errors like `something ${element.id}`

Haz
@haz.dev

And the document.activeElement case is even worse because it will be an element, but not the actual activeElement.

Matija Marohnić
@silvenon.com

I tried this just now in Chrome: <form> <input name="activeElement"> </form> <script> const form = document.querySelector('form') console.log(form.activeElement) // input console.log(document.activeElement) // body </script> How did you get activeElement to propagate?