Документ: свойство forms

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Чтение только свойство forms интерфейса Document возвращает HTMLCollection, содержащий все элементы <form> в документе.

Примечание: Аналогично, вы можете получить список элементов ввода компонентов формы с помощью свойства HTMLFormElement.elements.

Значение

Объект HTMLCollection, содержащий список всех форм документа. Каждый элемент в коллекции представляет собой HTMLFormElement элемент, представляющий отдельный элемент <form>.

Если в документе нет форм, возвращаемая коллекция пуста, с длиной ноль.

Примеры

Получение информации о форме

<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
        type="button"
        onclick="alert(document.forms[0].id);"
        value="robby's form" />
    </form>

    <form id="dave">
      <input
        type="button"
        onclick="alert(document.forms[1].id);"
        value="dave's form" />
    </form>

    <form id="paul">
      <input
        type="button"
        onclick="alert(document.forms[2].id);"
        value="paul's form" />
    </form>
  </body>
</html>

Получение элемента изнутри формы

const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];

Доступ к форме по имени

<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form name="login">
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button type="submit">Log in</button>
    </form>

    <script>
      const loginForm = document.forms.login; // Or document.forms['login']
      loginForm.elements.email.placeholder = "test@example.com";
      loginForm.elements.password.placeholder = "password";
    </script>
  </body>
</html>

Спецификации

Спецификация
HTML # dom-document-forms-dev

Совместимость браузеров

	Рабочий стол					Мобильный телефон
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`forms`	1	12	61 1–61 Поддерживается только для `HTMLDocument`, а не для всех объектов `Document`.	≤12.1	4 1–4 Поддерживается только для `HTMLDocument`, а не для всех объектов `Document`.	18	61 4–61 Поддерживается только для `HTMLDocument`, а не для всех объектов `Document`.	≤12.1	3.2 1–3.2 Поддерживается только для `HTMLDocument`, а не для всех объектов `Document`.	1.0	4.4

См. также

HTML-формы
<form> и интерфейс HTMLFormElement

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/forms