css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

JS властивість Document.forms

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

Властивість 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. Це особливо корисно, коли потрібно швидко отримати доступ до певної форми для зчитування або зміни її даних без необхідності проходження через весь DOM-документ.

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

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

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

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

Синтаксис

Document.forms

Значення

Return

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі кнопка "Показати інформацію про форми" активує функцію, яка перебирає всі форми на сторінці, використовуючи document.forms, і відображає детальну інформацію про кожну форму, включаючи її id, action та деталі всіх полів у формі. Це дозволяє користувачам веб-довідника зрозуміти, як можна використовувати document.forms для роботи з формами на сторінці, від перегляду інформації про форми до інтерактивного доступу до полів форми.

У цьому прикладі ми використовуємо властивість document.forms для виведення кількості форм на веб-сторінці. Властивість document.forms повертає HTMLCollection усіх форм (

) документа, дозволяючи легко отримати доступ до них та провести необхідні маніпуляції, наприклад, підрахунок.

// Виведення кількості форм на сторінці
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(); // Запобігання відправки форми
    }
  });
}

Документи

Зв'язок