عنصر فرم در عمق

در ماژول قبلی، نحوه استفاده از عنصر <form> را یاد گرفتید. در این ماژول، نحوه کار یک فرم و زمان استفاده از آن را یاد می‌گیرید.

آیا باید از عنصر <form> استفاده کنید؟

همیشه لازم نیست کنترل‌های فرم را در یک عنصر <form> قرار دهید. برای مثال، ممکن است یک عنصر <select> برای کاربران فراهم کنید تا یک دسته محصول را انتخاب کنند. در اینجا به عنصر <form> نیازی ندارید، زیرا داده‌ها را در backend خود ذخیره یا پردازش نمی‌کنید.

با این حال، در بیشتر موارد، هنگام ذخیره یا پردازش داده‌ها از کاربران، باید از عنصر <form> استفاده کنید. همانطور که در این ماژول یاد می‌گیرید، استفاده از <form> قابلیت‌های داخلی زیادی را از مرورگرها در اختیار شما قرار می‌دهد که در غیر این صورت باید خودتان آنها را بسازید. <form> همچنین دارای ویژگی‌های دسترسی زیادی است که به طور پیش‌فرض در آن تعبیه شده است. اگر می‌خواهید از بارگذاری مجدد صفحه هنگام ارسال فرم توسط کاربر جلوگیری کنید، همچنان می‌توانید از عنصر <form> استفاده کنید، اما آن را با جاوا اسکریپت بهبود بخشید.

<form> چگونه کار می‌کند؟

شما یاد گرفتید که <form> بهترین راه برای مدیریت داده‌های کاربر است. حالا ممکن است از خود بپرسید که یک فرم چگونه کار می‌کند؟

<form> یک ظرف برای کنترل‌های فرم تعاملی است.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

ارسال فرم چگونه کار می‌کند؟

وقتی یک <form> ارسال می‌کنید، مرورگر ویژگی‌های <form> را بررسی می‌کند. داده‌ها بر اساس ویژگی method به صورت درخواست GET یا POST ارسال می‌شوند. اگر هیچ ویژگی method وجود نداشته باشد، یک درخواست GET به آدرس URL صفحه فعلی ارسال می‌شود.

چگونه می‌توانید به داده‌های فرم دسترسی پیدا کرده و آنها را پردازش کنید؟ داده‌های ارسالی می‌توانند توسط جاوا اسکریپت در سمت کاربر (frontend) با یک درخواست GET یا توسط کد در سمت کاربر (backend) با یک درخواست GET یا POST مدیریت شوند. درباره انواع درخواست‌ها و انتقال داده‌های فرم بیشتر بدانید.

وقتی فرم ارسال می‌شود، مرورگر درخواستی به URL ای که مقدار ویژگی action است، ارسال می‌کند. علاوه بر این، مرورگر بررسی می‌کند که آیا دکمه ارسال دارای ویژگی formaction است یا خیر. در این صورت، URL تعریف شده در آنجا استفاده می‌شود.

علاوه بر این، مرورگر به دنبال ویژگی‌های اضافی در عنصر <form> می‌گردد، برای مثال، برای تصمیم‌گیری در مورد اینکه آیا فرم باید اعتبارسنجی شود ( novalidate )، آیا باید از تکمیل خودکار استفاده شود ( autocomplete="off" ) یا اینکه از چه کدگذاری باید استفاده شود ( accept-charset ).

سعی کنید فرمی بسازید که کاربران بتوانند رنگ مورد علاقه خود را ارسال کنند. داده‌ها باید به صورت درخواست POST ارسال شوند و URL که داده‌ها در آن پردازش می‌شوند باید /color باشد.

<form method="post" action="/color">
    <label for="color">What is your favorite color?</label>
    <input type="text" name="color" id="color">
    <button>Save</button>
</form>

مطمئن شوید که کاربران می‌توانند فرم شما را ارسال کنند

دو راه برای ارسال فرم وجود دارد. می‌توانید هنگام استفاده از هر کنترل فرم، روی دکمه ارسال کلیک کنید یا Enter فشار دهید.

همیشه هنگام ایجاد دکمه ارسال، از زبان قابل اجرا استفاده کنید. برای مثال، «به پرداخت ادامه دهید» یا «تغییرات را ذخیره کنید ». این به کاربران شما کمک می‌کند مراحل بعدی فرم شما را درک کنند.

شما می‌توانید به روش‌های مختلفی یک دکمه ارسال اضافه کنید. یک گزینه این است که از عنصر <button> درون فرم خود استفاده کنید. تا زمانی که type="button" استفاده نکنید، به عنوان یک دکمه ارسال عمل می‌کند. گزینه دیگر استفاده <input type="submit" value="Submit"> است.

گزینه سوم استفاده از <input type="image" alt="Submit" src="submit.png"> برای ایجاد یک دکمه ارسال گرافیکی است. با این حال، اکنون که می‌توانید دکمه‌های گرافیکی را با CSS ایجاد کنید، استفاده type="image" توصیه نمی‌شود.

در نهایت، از اضافه کردن زمان‌های انتظار (timeout) خودداری کنید. به کاربران هر چقدر که می‌خواهند برای ارسال فرم زمان بدهید. زمان‌های انتظار باعث از دست رفتن داده‌ها و ناامید شدن کاربران شما می‌شوند. دستورالعمل‌های زمان انتظار فرم W3C را مطالعه کنید.

فعال کردن امکان ارسال فایل توسط کاربران

<input type="file"> برای فعال کردن امکان آپلود و ارسال فایل‌ها در صورت لزوم استفاده کنید.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

ابتدا، یک عنصر <input> با type="file" به فرم خود اضافه کنید. اگر کاربران باید بتوانند چندین فایل را آپلود کنند، ویژگی multiple را اضافه کنید.

برای اطمینان از اینکه کاربران می‌توانند فایل آپلود کنند، یک تغییر دیگر لازم است - ویژگی enctype را در فرم خود تنظیم کنید. مقدار پیش‌فرض application/x-www-form-urlencoded است.

<form method="post" enctype="multipart/form-data">
...
</form>

برای اطمینان از اینکه فایل‌ها می‌توانند ارسال شوند، آن را به multipart/form-data تغییر دهید. بدون این کدگذاری، فایل‌ها نمی‌توانند با درخواست POST ارسال شوند.

درک خود را بررسی کنید

دانش خود را در مورد عنصر فرم آزمایش کنید

منابع

• عنصر فرم در HTML
• بهترین شیوه‌های دکمه ارسال