فرمهای HTML

فرمهای HTML

مثالی از یک فرم HTML

نام:

نام خانوادگی:



عنصر <form>

عنصر <form> فرمی را برای جمع آوری اطلاعات از کاربر تعریف می کند. قالب این عنصر به صورت زیر است:

<form>
.
عناصر فرم
.
</form>
 

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

عنصر <input>

عنصر <input> مهمترین عنصر از عناصر فرم است. این عنصر با توجه به صفت type خود به صورت های مختلفی نمایش داده می شود. در جدول زیر تعدادی از این انواع آمده است:

نوع توضیحات
<input type=”text”> ناحیه ورود متن تک خطی ایجاد می کند.
<input type=”radio”> برای تعریف یک دکمه رادیویی به کار می رود (در حالتی که نیاز به انتخاب یک گزینه از میان چند گزینه باشد.)
<input type=”submit”> یک دکمه ارسال به منظور ارسال اطلاعات ورود توسط کاربر تعریف می کند.

وارد کردن متن

<input type=”text> یک ناحیه ورود متن تک خطی برای ورود اطلاعات متنی کوتاه توسط کاربرایجاد می کند.

<form>
  نام:<br>
  <input type="text" name="firstname"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname">
</form>
 


مثال بالا به شکل زیر در مرورگر نمایش داده می شود:

نام:

نام خانوادگی:

نکته: خود فرم در صفحه قابل مشاهده نیست. همچنین مقدار پیشفرض برای پهنای ناحیه متن برابر 20 کاراکتر است.

دکمه رادیویی

<input type=”radio> برای تعریف یک دکمه رادیویی به کار می رود. دکمه رادیویی هنگامی به کار می روند که نیاز باشد کاربر ازمیان چند گزینه یکی را انتخاب کند.

<form>
  <input type="radio" name="gender" value="male" checked> مرد<br>
  <input type="radio" name="gender" value="female"> زن<br>
  <input type="radio" name="gender" value="other"> مایل به انتخاب نیستم
</form>
 


کد بالا به صورت زیر در مرورگر نشان داده می شود:

مرد
زن
مایل به انتخاب نیستم

دکمه ارسال اطلاعات:

<input type=”submit> یک دکمه جهت ارسال اطلاعات به صفحه بررسی کننده اطلاعات ایجاد می کند. صفحه بررسی کننده اطلاعات با صفت action در عنصر form مشخص می شود.

<form action="/action_page.php">
  نام:<br>
  <input type="text" name="firstname" value="علی"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname" value="بهزادی"><br><br>
  <input type="submit" value="ارسال">
</form>
 

مثال بالا به شکل زیر در مرورگر نمایش داده می شود:

نام:

نام خانوادگی:


صفت action

صفت actionتعنیین کننده نحوه عملکرد صفحه در هنگام ارسال اطلاعات فرم می باشد. در حالت معمول، هنگامی که کاربر روی دکمه ارسال اطلاعات کلیک کند، اطلاعات فرم به یک صفحه وب روی سرور فرستاده می شود. در مثال بالا، اطلاعات فرم به صفحه با نام و مسیر “/action_page.php فرستاده می شود. این صفحه شامل کدهای سمت سرور است که اطلاعات ارسالی را بررسی می کند.

<form action="/action_page.php">
 


در صورتی که صفت action حذف یا مقدار آن برابر “” در نظر گرفته شود، اطلاعات به صفحه جاری ارسال می شود.

صفت target

صفت target تعریف می کند که صفحه مقصد در کجا (در تب جدید در مرورگر، در یک قاب یا در صفحه جاری) باز شود. مقدار پیشفرض این صفت برابر با _self است و به این معنی است که در صورت نادیده گرفتن این صفت، صفحه مقصد در صفحه جاری باز خواهد شد. برای باز شدن صفحه مقصد در تب جدید مقدار این صفت می بایست برابر با _blank قرار داده شود.

<form action="/action_page.php" target="_blank">
 


دیگر مقادیر عبارتند از _parent, _top و یا نام یک قاب مشخص در صفحه.

صفت method

صفت method برای تعریف نوع ارسال اطلاعات به کار می رود.

<form action=”/action_page.php” method=”get”>
 


یا

<form action="/action_page.php" method="post">
 


چه هنگامی از Get استفاده می کنیم؟

مقدار پیشفرض برای صفت method است. هنگامی که از این متد برای ارسال اطلاعات استفاده کنیم، اطلاعات ارسالی در ناحیه نوار آدرس قابل مشاهده هستند. مانند زیر:

/action_page.php?firstname=علی&lastname=بهزادی
 

در مورد متد Get به نکات زیر توجه کنید:

  • اطلاعات به صورت جفت های مقدار/نام در نوار آدرس اضافه می شوند.
  • طول آدرس محدود است (تقریبا 3000 کاراکتر)
  • هرگزاز این متد برای ارسال اطلاعات حساس استفاده نکنید (به دلیل قابل مشاهده بودن)
  • برای هنگامی که کاربر بخواهد نتیجه را نشانه گذاری (بوکمارک) کند مفید است.
  • این متد برای داده های غیر امنیتی و غیر حساس مانند رشته جستجو در گوگل مناسب است.

چه هنگامی از Post استفاده می کنیم؟

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

در مورد متد Post به نکات زیر توجه کنید:

  • این متد در خصوص حجم داده های ارسالی محدودیتی نداشته و می تواند برای ارسال حجم زیادی از اطلاعات به کار رود.
  • اطلاعات ارسالی توسط این متد قابل نشانه گذاری (بوکمارک) نیستند.

صفت name

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

در مثال زیر، تنها اطلاعات عنصر “نام خانوادگی” ارسال می شود.

<form action="/action_page.php">
  نام:<br>
  <input type="text" value="علی"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname" value="بهزادی"><br><br>
  <input type="submit" value="ارسال">
</form>
 


گروه بندی عناصر فرم با <fieldset>

عنصر<fieldset> برای گروه بندی عناصر مرتبط در فرم به کار می رود. عنصر <legend> برای ایجاد یک راهنما برای هر گروه به کار می رود. به مثال زیر توجه کنید:

<form action="/action_page.php">
  <fieldset>
    <legend>اطلاعات شخصی:</legend>
    نام:<br>
    <input type="text" name="firstname" value="علی"><br>
    نام خانوادگی:<br>
    <input type="text" name="lastname" value="بهزادی"><br><br>
    <input type="submit" value="ارسال">
  </fieldset>
</form>
 


مثال بالا به شکل زیر در مرورگر نمایش داده می شود

اطلاعات شخصی:

نام:

نام خانوادگی:


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *