معرفی فرم ها
فرمها یکی از اجزاء پرکاربرد در صفحات وب هستند. کاربرد اصلی فرمها در صفحات وب، دریافت اطلاعات از کاربر و ارسال آن به سرور جهت پردازش است. اما این تنها کاربرد فرمها نیست. امروزه در بسیاری از برنامههای تحت وب (Web Applications) از فرمها صرفاً برای تعامل با کاربر استفاده میشود. یعنی هیچ اطلاعاتی توسط فرمها به سرور ارسال نمیشود. مثلاً برنامهای را در نظر بگیرید که تعدادی ورودی عددی را از کاربر دریافت میکند. سپس نموداری را بر اساس این دادهها در صفحهی وب ترسیم میکند.
تذکر : در این فصل قصد داریم به معرفی امکانات جاوا اسکریپت در زمینهی تعامل با فرمها بپردازیم. لازم به ذکر است که در سراسر این فصل فرض بر این است که مخاطب با فرمها و ویژگیهای آنها در HTML آشنایی نسبتاً خوبی دارد.
آنچه در این فصل میآموزید :- روشهای دسترسی به فرمها و کنترلها
- خواندن اطلاعات فرمها و ویرایش اطلاعات فرمها
- رویدادهای مهم در رابطه با فرمها
- اعتبارسنجی فرمها
فرمها و نحوهی دسترسی به آنها
فرمها در صفحات وب با تگ <form> ایجاد میشوند. عناصر اصلی داخل فرمها با تگهایی مانند <input>، <select>، <button>، <textarea> و ... ایجاد میشوند که اصطلاحاً به این عناصر "کنترل" گفته میشود. برای انتخاب فرمها و کنترلهای داخل آنها میتوان از روشهایی که در فصل ششم در رابطه با انتخاب عناصر معرفی شدند استفاده کرد. اما روشهای دیگری نیز برای انتخاب فرمها وجود دارد که امروزه کاربرد کمتری دارند. ولی بهتر است با این روشها نیز آشنا باشید.
شئ document خاصیتی به نام forms دارد که از طریق آن میتوان به تمام فرمهای موجود در صفحهی وب دسترسی پیدا کرد. این خاصیت در واقع یک شبه آرایه یا به طور دقیقتر یک شئ از نوع HTMLCollection است و طول آن نیز برابر با تعداد فرمهای موجود در صفحهی وب است. مثلاً برای انتخاب اولین فرم از یک صفحهی وب، میتوان از دستور زیر استفاده کرد.
const myForm = document.forms[0];
این دستور معادل دستور زیر است که از متد getElementsByTagName برای انتخاب اولین فرم صفحهی وب استفاده میکند.
const myForm = document.getElementsByTagName('form')[0];
نکته : در صورتی که بیش از یک فرم در صفحهی وب وجود داشته باشد، ترتیب قرارگیری این فرمها در شبه آرایهی forms با توجه به ترتیب تعریف شدن آنها در کدهای HTML تعیین میشود. به عبارت دیگر، محل نمایش در صفحهی وب (که ممکن است توسط CSS تغییر کند)، اهمیتی در ترتیب فرمها ندارد.
همچنین میتوان به جای استفاده از اندیس عددی، از صفت name برای انتخاب یک فرم استفاده کرد. مثلاً فرض کنید یک فرم در صفحهی وب وجود دارد که مقدار صفت name آن برابر با "search" است. در این صورت میتوان از دستور زیر برای انتخاب این فرم استفاده کرد.
const myForm = document.forms.search
البته باید توجه داشته باشید که در این حالت نباید مقدار صفت name با یکی از کلمات کلیدی جاوا اسکریپت یکسان باشد. همچنین این مقدار نباید با نام یکی از خاصیتها یا متدهای شئ forms یکسان باشد. مثلاً فرمی که مقدار صفت name آن برابر با "length" باشد، با این روش قابل انتخاب نیست. زیرا شئ forms خاصیتی به همین نام دارد که طول آن (یا تعداد فرمهای صفحهی وب) را نشان میدهد..
برای انتخاب کنترلهای یک فرم نیز میتوان از صفت name آنها استفاده کرد. به عنوان مثال فرم زیر را در نظر بگیرید.
<form name="myform">
<input type="text" name="firstname" />
<button type="submit">Send</button>
</form>
اکنون برای انتخاب این فرم و همچنین فیلد متنی داخل آن میتوان از دستورات زیر استفاده کرد.
const myForm = document.forms.myform;
const input = myForm.firstname;
خاصیتهای مهم فرمها و کنترلها
هر فرم دارای تعدادی خاصیت است که برخی از آنها را میتوان در کدهای HTML با صفتهای تگ <form> مقداردهی کرد. اما برخی دیگر فقط از طریق جاوا اسکریپت قابل مقداردهی هستند. مهمترین خاصیتهای فرمها در جاوا اسکریپت عبارتند از :
- action : یک آدرس URL است که اطلاعات فرم باید به این آدرس ارسال شوند. (با صفت action میتواند مقداردهی شود)
- elements : یک شبه آرایه (از نوع HTMLFormControlsCollection) است که حاوی تمام کنترلهای داخل فرم است.
- length : تعداد کنترلهای موجود در فرم را مشخص میکند.
- method : پروتکل HTTP برای ارسال فرم را مشخص میکنند که معمولاً برابر با get یا post است. (با صفت method میتواند مقداردهی شود)
همچنین کنترلهای به کار رفته در فرمها دارای تعداد زیادی خاصیت هستند که برخی از این خاصیتها در تمام کنترلها مشترک بوده، و برخی دیگر مخصوص انواع خاصی از کنترلها هستند. مهمترین خاصیتهایی که در بین تمام انواع کنترلها مشترک هستند عبارتند از :
- disabled : فعال یا غیر فعال بودن یک کنترل را مشخص میکند. در صورتی که مقدار این خاصیت true باشد، کنترل غیر فعال میشود.
- form : به فرمی که کنترل در آن قرار دارد اشاره میکند.
- readOnly : در صورت true بودن، مقدار کنترل فقط خواندنی میشود. یعنی توسط کاربر قابل تغییر نیست، اما در جاوا اسکریپت میتوان مقدار کنترل را تغییر داد.
- required : کنترلهایی که مقدار این خاصیت در آنها true است، حتماً باید قبل از ارسال فرم مقداردهی شوند. در غیر این صورت امکان ارسال فرم وجود نخواهد داشت.
- tabIndex : معادل صفت tabindex در HTML است. یعنی ترتیب دسترسی به کنترل با کلید Tab را مشخص میکند.
- value : مقدار کنترل را مشخص میکند.
به غیر از خاصیت form، تمام خاصیتهای فوق در جاوا اسکریپت قابل خواندن و نوشتن هستند. البته خاصیت form نیز به صورت غیر مستقیم قابل تغییر است. مثلاً با جا به جا کردن کنترل مورد نظر از یک فرم به فرمی دیگر (مثلا با متد replaceChild)، این خاصیت تغییر میکند. اما به صورت مستقیم نمیتوان مقدار آن را تغییر داد.
در این بخش صرفاً به معرفی فرمها و برخی ویژگیهای آنها در جاوا اسکریپت پرداختیم. در بخشهای بعدی این فصل با جزئیات بیشتری به بررسی فرمها، رویدادهای مرتبط با آنها، اعتبارسنجی فرمها و ... میپردازیم.