Содержание (скрыть) Содержание (показать)

Навигация по формам

Для форм есть дополнительные свойства DOM, которые упрощают навигацию и поиск элементов.

Форма

Элементы FORM можно получить по имени или номеру, используя свойство document.forms[name/index].

Например:

document.forms.my -- форма с именем 'my'
document.forms[0] -- первая форма в документе

Любой элемент формы form можно получить аналогичным образом, используя свойство form.elements.

Например:

<body>
<form name="my">
  <input name="one" value="1">
  <input name="two" value="2">
</form>

<script>
var form = document.forms.my; // можно document.forms[0]

var elem = form.elements.one;  // можно form.elements[0]

alert(elem.value); // "один"
</script>
</body>

Может быть несколько элементов с одинаковым именем. В таком случае form.elements[name] вернет коллекцию элементов, например:

<body>
<form>
  <input type="radio" name="*!*age*/!*" value="10">
  <input type="radio" name="*!*age*/!*" value="20">
</form>

<script>
var form = document.forms[0];

var elems = form.elements.age;

alert(elems[0].value); // 10, первый input
</script>
</body>

Эти ссылки не зависят от окружающих тегов. Элемент может быть зарыт где-то глубоко в форме, но он всё равно доступен через form.elements.

Спецификация: HTMLFormElement.

form.name тоже работает, но с ошибками

Получить доступ к элементам формы можно не только через form.elements[name/index], но и проще: form[index/name].

Этот способ — нестандартный. Он работает во всех браузерах, но в Firefox с ошибками. Когда вы удалите элемент, он все равно будет доступен как form[name]:

<form name="f"> <input name="text"> </form>

<script>
var form = document.forms.f;

form.removeChild(form.text); // удаляем этот input

alert(form.elements.text); // undefined (правильно, т.к. удалён)
*!*
alert(form.text); // в Firefox возвращает элемент!
*/!*
</script>

В этом примере элемент удален, но form[name] все равно ссылается на него. Чтобы не наступать на эти грабли, пользуйтесь синтаксисом form.elements[name].

От элементов к форме

По элементу можно получить его форму, используя свойство element.form.

Пример:

<body>
<form>
  <input type="text" name="*!*surname*/!*">
</form>

<script>
var form = document.forms[0];

var elem = form.elements.surname;

*!*
alert(elem.form == form); // true
*/!*
</script>
</body>

Посмотрите также спецификацию о HTMLInputElement и других типах элементов.

Итого

FORM: Форму можно получить как document.forms[name/index].
Элементы: Элементы в форме: form.elements[name/index]. Каждый элемент имеет ссылку на форму в свойстве form.

Навигация по этим свойствам дополняет стандартные методы поиска в DOM, и в ряде случаев существенно более удобна.

06.02.2011

Илья Кантор

Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
Комментарии без смысла, с рекламой или не о статье вообще - удаляются.

Наверх

Содержание

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!