Я давно использовал коллекцию формы elements для доступа к данным формы, и я всегда тщательно обдумываю имена элементов формы. До сих пор мне не приходило в голову попробовать этот маленький эксперимент:
var form=document.querySelector('form#test');
form.elements['doit'].onclick=function(event) {
event.preventDefault();
alert(form.id);
alert(form.elements['id']);
alert(form.elements);
alert(form.elements['elements']);
};
<form id="test">
<input id="test-elements" name="elements" value="Test Elements">
<input id="test-id" name="id" value="Test id">
<button name="doit">Doit</button>
</form>
У меня, по-дурацки, похоже, назван первый вход elements, а второй id. Когда вы запустите фрагмент, он сразу же потерпит неудачу, потому что name="elements" мешает коллекции elements формы.
Когда вы изменяете это на что-то вроде name="not-elements", оно работает, но затем вы получаете проблема с form.id, которая предполагает, что вы ссылаетесь на элемент с именем id, а не на атрибут id формы.
Я знаю, что коллекция elements не всегда была доступна, и что оригинальный метод доступа к элементам формы был в виде имен свойств, поэтому этого следует ожидать.
Однако, это настоящая боль в шее, если вы пишете что-то для серверной части, которая не знаете эти правила, и вы сами не знаете, кто они.
Кто-нибудь знает, где задокументировано избегание этих и других дурных имен, и есть ли обходной путь, если не использовать эти имена?