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

با این مقدمه بر عنصر فرم، اصول استفاده از فرم را در وب بیاموزید.

تصور کنید می خواهید از مردم در وب سایت خود در مورد حیوان مورد علاقه شان سوال کنید. به عنوان اولین قدم، شما به راهی برای جمع آوری داده ها نیاز دارید.

چگونه این کار را با HTML انجام می دهید؟

در HTML، می‌توانید این را با استفاده از عنصر فرم ( <form> )، یک <input> با <label> و یک <button> ارسال کنید.

عنصر فرم چیست؟

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

عنصر فرم از تگ شروع <form> ، ویژگی های اختیاری تعریف شده در تگ شروع و یک تگ پایان </form> تشکیل شده است.

بین تگ شروع و پایان، می توانید عناصر فرم مانند <input> و <textarea> را برای انواع مختلف ورودی کاربر قرار دهید. در ماژول بعدی در مورد عناصر فرم بیشتر خواهید آموخت.

داده ها کجا پردازش می شوند؟

هنگامی که یک فرم ارسال می شود (به عنوان مثال، زمانی که کاربر روی دکمه ارسال کلیک می کند)، مرورگر درخواستی را ارائه می دهد. یک اسکریپت می تواند به آن درخواست پاسخ دهد و داده ها را پردازش کند.

به طور پیش فرض، درخواست به صفحه ای که فرم در آن نشان داده می شود، ارسال می شود.

فرض کنید می خواهید یک اسکریپت در https://web.dev اجرا شود تا داده های فرم را پردازش کند—چگونه این کار را انجام می دهید؟ آن را امتحان کنید !

<form action="https://example.com/animals">
...
</form>

مثال قبل از https://example.com/animals درخواست می کند. یک اسکریپت در باطن example.com می‌تواند درخواست‌ها به /animals را رسیدگی کند و داده‌های فرم را پردازش کند.

اطلاعات چگونه منتقل می شود؟

به‌طور پیش‌فرض، داده‌های فرم به‌عنوان یک درخواست GET ارسال می‌شوند و داده‌های ارسالی به URL ضمیمه می‌شوند. اگر کاربری در مثال بالا «قورباغه» را ارسال کند، مرورگر درخواستی را به URL زیر ارسال می کند:

https://example.com/animals?animal=frog

در این حالت، می‌توانید با دریافت داده‌ها از URL به داده‌های فرانت‌اند یا باطن دسترسی پیدا کنید.

در صورت تمایل می توانید با تغییر ویژگی متد به فرم دستور دهید که از درخواست POST استفاده کند.

<form method="post">
...
</form>

با استفاده از POST ، داده ها در بدنه درخواست گنجانده می شوند.

داده ها در URL قابل مشاهده نخواهند بود و فقط از طریق یک اسکریپت جلویی یا باطنی قابل دسترسی هستند.

از چه روشی باید استفاده کرد؟

موارد استفاده برای هر دو روش وجود دارد.

برای فرم هایی که داده های حساس را پردازش می کنند از روش POST استفاده کنید. داده ها رمزگذاری شده است (اگر از HTTPS استفاده می کنید) و فقط توسط اسکریپت پشتیبان که درخواست را پردازش می کند قابل دسترسی است. داده ها در URL قابل مشاهده نیستند. یک مثال رایج یک فرم ورود به سیستم است.

اگر داده ها قابل اشتراک گذاری هستند، می توانید از روش GET استفاده کنید. به این ترتیب داده ها همانطور که در URL موجود است به تاریخچه مرورگر شما اضافه می شود. فرم های جستجو اغلب از این استفاده می کنند. به این ترتیب می توانید صفحه نتیجه جستجو را نشانه گذاری کنید.

اکنون که با خود عنصر فرم آشنا شدید، زمان آن فرا رسیده است که با فیلدهای فرم آشنا شوید تا فرم های خود را تعاملی کنید.

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

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

منابع

عنصر <form> .