عنصر <form>
فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:
هر فرم HTML ای دارای عناصر فرم (form elements) است و به خودی خود هیچ کاری را نمی تواند انجام دهد. این عناصر فرم در واقع انواع مختلف دریافت داده ها هستند؛ به طور مثال text field (مانند فیلد دریافت نام و نام خانوادگی کاربر)، checkbox (فیلد هایی که کاربر آن ها را تیک می زند) و … . ما می خواهیم با این عناصر به صورت خلاصه آشنا شویم.
عنصر <input>
عنصر <input>
مهم ترین و شناخته شده ترین عنصر یک فرم است. ظاهر این تگ بر اساس attribute ای به نام type تغییر می کند و بستگی دارد که ما به این attribute چه مقداری داده باشیم:
Type | توضیحات |
<input type=”text”> | یک فیلد متنی خالی به ما می دهد |
<input type=”radio”> | یک radio button به ما می دهد (انتخاب یک گزینه بین چند گزینه) |
<input type=”submit”> | یک submit button به ما می دهد (برای ثبت نهایی و ارسال فرم) |
حالت <"input type="text>
نوع text یک فیلد متنی خالی به ما می دهد:
حالت <"input type="radio>
این نوع از type یک radio button را تعریف می کند. این نوع دکمه ها به کاربر اجازه می دهند که از بین چند گزینه تنها یک گزینه را انتخاب کند. در مثال زیر از کاربر خواسته ایم که جنسیت خود را به ما بگوید:
حالت <"input type="submit>
در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:
پیامی که پس از ثبت فرم به شما نشان داده می شود توسط سرور و پس از بررسی داده ها تولید شده است.
وظیفه ی action
attribute ای به نام action
در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action
کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.
در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و …) است:
action
را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود!وظیفه ی target
target
تعیین می کند که پس از ارسال فرم، پاسخ در یک سربرگ جدید در مرورگر باز شود، در یک frame دیگر باز شود، در همان صفحه باز شود و الی آخر. مقدار پیش فرض آن self_
است که می گوید فرم در همین پنجره ارسال شود اما اگر می خواهید در یک پنجره ی جدید باز شود باید از blank_
استفاده کنید.
مثال:
مقادیر مجاز دیگر parent_
و top_
و یا نام یک iframe هستند.
وظیفه ی method
در فرم ها یک attribute بسیار مهم دیگری به نام method
(به معنی «روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.
مثالی از متد GET:
مثالی از متد POST:
تفاوت GET و POST چیست؟
حالت پیش فرض مرورگر برای ارسال اطلاعات حالت GET است اما زمانی که از GET استفاده می شود تمام اطلاعات ثبت شده در نوار آدرس مرورگر نمایان خواهند بود (رجوع کنید به دو مثال بالا):
نکاتی در مورد GET:
- داده های فرم را به صورت جفت های name/value در URL قرار می دهد
- طول این URL محدود است (حدود 3000 کاراکتر)
- هیچ گاه برای ارسال اطلاعات حساس مانند رمز عبور از GET استفاده نکنید چرا که در نوار آدرس مرورگر قابل مشاهده خواهد بود
- مناسب برای کاربرانی که می خواهند نتایج را Bookmark کنند
- GET معمولا مناسب موقعیت هایی است که هیچ اطلاعات حساسی در آن رد و بدل نمی شود، مانند query string های گوگل زمانی که چیزی را در آن سرچ می کنید
اما اگر داده های شما حاوی اطلاعات مهم، شخصی، حساس و … است حتما باید از POST استفاده کنید. این متد داده های شما را در نوار آدرس نشان نمی دهد
نکاتی در مورد POST:
- POST هیچ محدودیت اندازه ای ندارد و می توانید از طریق آن حجم بزرگی از داده ها را ارسال کنید
- نتایجی که با POST ارسال شوند قابل bookmark شدن نخواهند بود
وظیفه ی name
هر فیلد ورودی (input) باید یک name
داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.
در مثال زیر می توانید ببینید که تنها Last name ثبت و ارسال می شود:
جمع کردن داده در فرم ها
عنصر <fieldset>
داده های مرتبط با هم را در یک گروه جمع می کند. تگ <legend>
نیز توضیحی درباره ی <fieldset>
ارائه می کند. به مثال زیر دقت کنید:
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو