فرم‌ها در HTML برای جمع‌آوری اطلاعات کاربر استفاده می‌شوند و با جاوااسکریپت می‌توان داده‌های فرم را مدیریت، اعتبارسنجی و ارسال کرد.
DOM امکانات متعددی برای تعامل با فرم‌ها فراهم می‌کند.

🔹 1. دسترسی به فرم‌ها

با document.forms

• تمام فرم‌های صفحه را برمی‌گرداند

console.log(document.forms.length); // تعداد فرم‌ها
let myForm = document.forms["myForm"];

با getElementById

let form = document.getElementById("myForm");

🔹 2. دسترسی به عناصر فرم

• با نام یا ایندکس عنصر داخل فرم

let username = myForm["username"]; // یا myForm.elements["username"]
let password = myForm.elements[1]; // دسترسی بر اساس ایندکس

• مقادیر عناصر:

console.log(username.value);
console.log(password.value);

🔹 3. تغییر مقادیر فرم

username.value = "Ali";
password.value = "";

🔹 4. مدیریت Attributes فرم

username.setAttribute("placeholder", "Enter your username");
username.removeAttribute("readonly");

🔹 5. مدیریت رویدادها

ارسال فرم

• جلوگیری از ارسال پیش‌فرض با event.preventDefault()

myForm.addEventListener("submit", function(event){
  event.preventDefault();
  alert("Form submitted!");
});

تغییر مقدار عنصر

username.addEventListener("input", function(){
  console.log("Username:", this.value);
});

🔹 6. اعتبارسنجی فرم

• اعتبارسنجی ساده با جاوااسکریپت

myForm.addEventListener("submit", function(event){
  if(username.value === ""){
    alert("Username is required");
    event.preventDefault();
  }
});

• استفاده از ویژگی‌های HTML5: required, pattern, minlength, maxlength

<input type="text" name="username" required pattern="[A-Za-z]{3,}">

🔹 7. فعال/غیرفعال کردن دکمه‌ها

let submitBtn = document.getElementById("submitBtn");
submitBtn.disabled = true; // غیرفعال کردن
submitBtn.disabled = false; // فعال کردن

🔹 8. کار با فرم‌های چندتکه

• Radio Button

let gender = myForm.elements["gender"];
console.log(gender.value);

• Checkbox

let terms = myForm.elements["terms"];
console.log(terms.checked); // true یا false

• Select

let country = myForm.elements["country"];
console.log(country.value); // مقدار انتخاب شده

✅ خلاصه

• Forms → جمع‌آوری اطلاعات کاربر و مدیریت آن با JavaScript

• دسترسی: document.forms, getElementById, elements

• خواندن/تغییر مقدار: value, checked, selected

• مدیریت Attributes و رویدادها: setAttribute, removeAttribute, addEventListener("submit")

• اعتبارسنجی → با JS و HTML5

• فعال/غیرفعال کردن دکمه‌ها و مدیریت عناصر چندتکه