در ماژول قبلی، نحوه استفاده از عنصر <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
ارسال کرد.
درک خود را بررسی کنید
دانش خود را از عنصر فرم تست کنید
برای ارسال فایل ها چه مقداری برای enctype
لازم است؟
multipart/form-files
multipart/form-data
form-files
form-data
آیا امکان ارسال اطلاعات کاربر بدون <form>
وجود دارد؟
چگونه می توانید یک <form>
ارسال کنید؟
Enter
فشار دهید.<input type="image">
کلیک کنید.<button>
کلیک کنید.