document.forms — колекція форм сторінки в JavaScript

Загальний опис

Властивість forms в об'єкті Document відіграє важливу роль у взаємодії з формами на веб-сторінці. Ця властивість надає доступ до колекції всіх форм (<form> елементів), що знаходяться у поточному документі. Використання forms є надзвичайно корисним для розробників, які бажають отримати доступ, модифікувати або валідувати дані форми, виконувати дії на основі відправлення форми чи обробляти вхідні дані користувача.

Основна суть та корисність

Document.forms дозволяє легко взаємодіяти з формами без потреби використовувати складні селектори CSS чи методи обходу DOM для пошуку елементів форми. Це значно спрощує роботу з формами, особливо на сторінках, де присутня велика кількість форм. З її допомогою можна ефективно управляти процесами валідації, відправлення та обробки форм на клієнтській стороні.

Застосування на практиці

Отримання доступу до форм

Для початку, ви можете просто перебрати всі форми на сторінці та вивести їх ідентифікатори в консоль:

for (let i = 0; i < document.forms.length; i++) {
    console.log(document.forms[i].id);
}

Цей фрагмент коду проходить через колекцію форм і виводить ідентифікатор кожної форми.

Взаємодія з конкретною формою

Можна легко отримати доступ до конкретної форми за її іменем або ідентифікатором:

let form = document.forms['formName']; // або document.forms.formName
// Взаємодія з елементами форми
form.elements['inputName'].value = 'Нове значення';

Цей код отримує доступ до форми за ім'ям та змінює значення одного з її полів вводу.

Валідація форми перед відправленням

Використання forms також є корисним для валідації даних форми на клієнтській стороні перед її відправленням:

document.forms['formName'].onsubmit = function() {
    let input = this.elements['inputName'];
    if (input.value.length === 0) { // Перевірка на заповненість
        alert('Будь ласка, заповніть поле.');
        return false; // Зупиняє відправлення форми
    }
    return true; // Дозволяє відправлення форми
};

Цей приклад показує, як перешкодити відправленню форми, якщо поле вводу залишено пустим.

правити

Порада

Використання document.forms для ітерації по всім формам на сторінці може бути корисним при застосуванні загальних операцій, таких як встановлення обробників подій для валідації або відправлення, на кожну форму. Це дозволяє стандартизувати обробку форм на вашому сайті, забезпечуючи консистентність взаємодії користувача.

автор: Bond правити

Порада

Для того, щоб працювати з конкретною формою, ви можете використовувати індекс або ім'я форми у колекції, яку повертає document.forms. Це особливо корисно, коли потрібно швидко отримати доступ до певної форми для зчитування або зміни її даних без необхідності проходження через весь DOM-документ.

let form = document.forms[0]; // Доступ за індексом
let loginForm = document.forms["login"]; // Доступ за ім'ям

автор: Bond правити

Порада

Щоб підвищити безпеку та валідність даних, відправлених через форми, скористайтеся document.forms для додавання валідації на стороні клієнта. Застосування валідації до кожної форми перед її відправленням може допомогти запобігти відправленню некоректних або малінформативних даних на сервер, тим самим підвищуючи якість обробки даних та забезпечуючи кращий досвід користувача.

Array.from(document.forms).forEach(form => {
    form.addEventListener('submit', function(e) {
        // Тут виконується валідація
        if (!isValidForm(this)) {
            e.preventDefault(); // Запобігаємо відправленню форми
        }
    });
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.forms

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	61	4	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	61	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">document.forms</h2>
  <p class="description">Повертає колекцію всіх форм (form) документа.</p>
</header>
<main>
  <div class="data">
    <form action="">
      <input type="text" name="login" placeholder="Логін" value="admin">
      <input type="passwird" name="pass" placeholder="Пароль">
      <input type="submit" value="OK">
    </form>
    <br>
  </div>
  <div class="result">
    <button id="showForms">Показати інформацію про форми</button>
    <div id="formsInfo"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-bottom: 10px;
}

#formsInfo {
  margin-top: 20px;
}

document.getElementById('showForms').addEventListener('click', function () {
  const formsInfoContainer = document.getElementById('formsInfo');
  formsInfoContainer.innerHTML = ''; // Очищення контейнера перед відображенням нових даних

  Array.from(document.forms).forEach((form, index) => {
    const formInfo = document.createElement('div');
    formInfo.innerHTML = `<strong>Форма ${index + 1}:</strong> <br> ID: ${form.id || 'Немає'} <br> Action: ${form.action} <br>`;
    const fieldsInfo = document.createElement('ul');

    Array.from(form.elements).forEach(element => {
      const li = document.createElement('li');
      li.textContent = `Поле: ${element.name || element.id || 'Без імені'}, Тип: ${element.type}, Значення: ${element.value}`;
      fieldsInfo.appendChild(li);
    });

    formInfo.appendChild(fieldsInfo);
    formsInfoContainer.appendChild(formInfo);
  });

  if (document.forms.length === 0) {
    formsInfoContainer.innerHTML = 'На сторінці немає форм.';
  }
});
//# sourceURL=pen.js

// Виведення кількості форм на сторінці
console.log('Кількість форм на сторінці: ' + document.forms.length);

// Функція для валідації форми
function validateForm(form) {
  // Припустимо, ми перевіряємо, чи всі поля форми заповнені
  for (let i = 0; i < form.elements.length; i++) {
    if (form.elements[i].value === '') {
      alert('Будь ласка, заповніть усі поля у формі.');
      return false;
    }
  }
  return true;
}

// Перехоплення події відправки для усіх форм
for (let form of document.forms) {
  form.addEventListener('submit', function(event) {
    // Перевірка форми на валідність
    if (!validateForm(form)) {
      event.preventDefault(); // Запобігання відправки форми
    }
  });
}