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

راه‌های دسترسی به عناصر فرم در جاوااسکریپت

فرم‌ها یکی از پرکاربردترین بخش‌های تعامل کاربر با صفحات وب هستند و کنترل آن‌ها با جاوااسکریپت نیازمند شناخت دقیق روش‌های دسترسی به عناصر فرم و مقادیر آن‌هاست. برخلاف عناصر معمولی DOM که معمولاً با querySelector یا getElementById انتخاب می‌شوند، فرم و عناصر داخل آن، ویژگی‌های اختصاصی و کوتاه‌تری هم در اختیار قرار می‌دهند که کار با آن‌ها را ساده‌تر می‌کند.

دسترسی به خود فرم

هر عنصر form در سند، یک مدخل در مجموعه‌ی سراسری document.forms ایجاد می‌کند. این مجموعه هم با اندیس عددی و هم با نام (attribute name) فرم قابل دسترسی است:

// <form id="loginForm" name="login">...</form>

const formById = document.getElementById("loginForm");
const formByName = document.forms["login"];
const formByIndex = document.forms[0];

console.log(formById === formByName); // true

در پروژه‌های امروزی، استفاده از getElementById یا querySelector به دلیل صراحت بیشتر، رایج‌تر از document.forms است؛ اما شناخت این مجموعه برای خواندن کدهای قدیمی‌تر همچنان لازم است.

مجموعه‌ی elements برای دسترسی به فیلدها

هر عنصر فرم، یک ویژگی به نام elements دارد که شامل تمام فیلدهای داخل آن فرم است، بدون توجه به عمق تودرتویی آن‌ها در ساختار HTML:

// <form id="loginForm">
//   <input name="username">
//   <input name="password" type="password">
// </form>

const form = document.getElementById("loginForm");

console.log(form.elements["username"]); // عنصر input نام‌کاربری
console.log(form.elements.length);       // 2

نکته‌ی مهم این است که فیلدها را می‌توان هم با اندیس عددی و هم مستقیماً با مقدار name از elements خواند؛ دسترسی با name معمولاً خواناتر و پایدارتر است، چون به ترتیب قرارگیری فیلدها در HTML وابسته نیست.

دسترسی مستقیم به مقدار فیلدها با ویژگی value

برای خواندن یا تغییر محتوای واردشده در یک فیلد، ویژگی value استفاده می‌شود:

// HTML فرضی:
// <form id="loginForm">
//   <input name="username" value="ali">
//   <input name="password" type="password">
// </form>

const form = document.getElementById("loginForm");

console.log(form.elements.username.value); // "ali"

form.elements.username.value = "sara";
console.log(form.elements.username.value); // "sara"

این ویژگی برای اکثر فیلدهای ورودی مثل text، password، email و textarea به همین شکل کار می‌کند. اما برای عناصر خاصی مثل چک‌باکس‌ها و رادیو باتن‌ها، رفتار value کمی متفاوت است که در درس‌های بعدی به‌طور مجزا بررسی می‌شود.

جدول مقایسه‌ی روش‌های دسترسی به فیلدهای فرم

روش	مثال	مناسب برای
querySelector	document.querySelector('input[name="username"]')	انتخاب دقیق و مستقل از ساختار فرم
form.elements	form.elements.username	کار هم‌زمان با چند فیلد داخل یک فرم مشخص
document.forms	document.forms["login"]	خواندن کدهای قدیمی‌تر یا فرم‌های بدون id

نکات کلیدی

• مجموعه‌ی document.forms امکان دسترسی به فرم‌ها با نام یا اندیس را فراهم می‌کند.
• ویژگی elements در هر فرم، تمام فیلدهای آن را در اختیار قرار می‌دهد.
• فیلدها را می‌توان هم با اندیس و هم با مقدار name از elements خواند؛ روش دوم خواناتر است.
• ویژگی value برای خواندن و تغییر مقدار اکثر فیلدهای متنی استفاده می‌شود، اما رفتار آن در چک‌باکس و رادیو باتن متفاوت است.

جمع‌بندی

دسترسی به عناصر فرم در جاوااسکریپت از چند مسیر ممکن است: انتخابگرهای عمومی DOM مثل querySelector، یا ویژگی‌های اختصاصی فرم مثل elements و document.forms. در پروژه‌های مدرن، ترکیب querySelector برای انتخاب فرم و elements برای دسترسی سریع به فیلدهای داخل آن، رایج‌ترین و خواناترین روش است. مبنای این دسترسی، ویژگی value است که در درس بعدی با جزئیات بیشتری درباره‌ی انواع فیلدها بررسی خواهد شد.