فرم ها و پاسخگویی به رویدادهای آنها

هر فرم، بخشی از یک سند HTML است که شامل عناصری چون دگمه های رادیویی، کادرهای متنی، کادرهای انتخاب، فهرستهای بازشونده و غیره است. به عناصر فرم های HTML، شئی کنترلی نیز گفته می شود. هر عنصر یک یا چند صفت مشخصه (attribute) دارد. به عنوان مثال، از صفت مشخصه value برای تعریف یک مقدار پیش فرض (و نه مقداری که توسط کاربران وارد می شود) استفاده می شود. صفت مشخصه name یک مثال مناسب دیگر تلقی می شود، چرا که از آن برای ارجاع به یک عنصر استفاده می شود. تعدادی از صفات مشخصه دیگر عناصر نیز هنگام بررسی مثالهای این جلسه معرفی خواهند شد.

پاسخگویی به رویدادها

وقتی که فرمی بر روی نمایشگر نشان داده می شود، پردازه های جاوااسکریپت می توانند در پاسخ به رویدادهایی که رخ می دهند، اجرا شوند. رویدادها در نتیجۀ کارهایی که کاربران در فرم انجام می دهند (مثلاً کلیک کردن یک دگمه، انتخاب یک دگمه رادیویی، انتقال نشانه رو ماوس بر روی یک عنصر و یا دور کردن نشانه رو از آن، و غیره) رخ می دهند. در زمان بارگذاری یک صفحه یا خروج از یک صفحه نیز مرورگر سبب وقوع رویدادهایی می شود.

هر رویداد از طریق یک صفت مشخصه که در تگ آغازین یک عنصر تعریف می شود، با آن عنصر مرتبط می شود. نام تابعی که قرار است هنگام وقوع رویداد اجرا شود، به این صفت مشخصه تخصیص می یابد.

برای آغاز آشنایی با روش پاسخگویی به رویدادها، به مثال نخست فایل همراه این مقاله نگاه کنید. در این مثال،  از صفت مشخصه رویداد "onblur" در تگ <INPUT> استفاده شده است. وقتی که نشانه روی ماوس از کادر متنی خاص نشانی پست الکترونیکی خارج می شود، تابع ValidateEmail با بررسی وجود کاراکتر "@" در نشانی تایپ شده، مشخص می کند که نشانی تایپ شده صحیح است یا خیر. برای این منظور مقدار Email به عنوان پارامتر برای آن ارسال می شود. دقت کنید که چگونه از this برای نشان دادن عنصری که قرار است مقدار صفت مشخصه value آن به تابع ارسال شود، استفاده شده است. همچنین دقت کنید که در این مثال چگونه از تگ <INPUT> برای تعریف کادرهای متنی استفاده شده است. در مثالهای آتی خواهید دید که چگونه می توان با تغییر مقدار صفت مشخصه "type"، از این تگ برای تعریف سایر عناصر استفاده نمود.

دومین مثال فایل همراه این مقاله نشان می دهد که چگونه می توان زمانی که دگمه submit کلیک می شود، نشانی پست الکترونیکی را پیش از ارسال فرم به سمت سرور با استفاده از نام و نام خانوادگی وارده، به عنصر Email تخصیص داد. از این رویداد عموماً برای بررسی صحت اطلاعات وارد شده در فرم (پیش از ارسال به سرور) استفده می شود. اینکار با تخصیص تابعی به نام SetMail به رویداد onsubmit دگمه انجام شده است. فرم این مثال نیز مشابه فرم مثال نخست است، با این تفاوت که عنصر Email در اینجا "پنهان" است. برای "پنهان" کردن یک عنصر کافی است مقدار "hidden" به صفت مشخصه type در تگ <INPUT> تخصیص داده شود.