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

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

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

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

با این حال، در بیشتر موارد زمانی که داده‌های کاربران را ذخیره یا پردازش می‌کنید، باید از عنصر <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> را بررسی می کند. داده ها به عنوان یک درخواست GET یا POST مطابق با ویژگی method ارسال می شوند. اگر هیچ ویژگی method وجود نداشته باشد، یک درخواست GET به URL صفحه فعلی ارسال می شود.

چگونه می توانید به داده های فرم دسترسی داشته باشید و آنها را پردازش کنید؟ داده های ارسال شده را می توان با جاوا اسکریپت در فرانت اند با استفاده از یک درخواست GET ، یا توسط کد در پشتیبان با استفاده از درخواست 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" توصیه نمی شود.

کاربران را قادر به ارسال فایل کنید

از <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 فرم
• بهترین شیوه های دکمه ارسال