آشنایی با فرم ها در HTML

عنصر <form>

عنصر <form> فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:

<form>
.
عناصر مختلف فرم در این قسمت نوشته می شوند.
.
</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 یک فیلد متنی خالی به ما می دهد:

<!DOCTYPE html>
<html>
<body>

<h2>Text Input</h2>

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

<p dir='rtl'>توجه داشته باشید که خود تگ form قابل مشاهده نیست.</p>

<p>همچنین باید بدانید که عرض پیشفرض این فیلد 20 کاراکتر است</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: در مورد این فرم باید به دو مورد توجه کرد؛ اولا خود تگ form قابل مشاهده نیست و ثانیا عرض پیشفرض فیلدهای text برابر با 20 کاراکتر است.

حالت `<"input type="radio>`

این نوع از type یک radio button را تعریف می کند. این نوع دکمه ها به کاربر اجازه می دهند که از بین چند گزینه تنها یک گزینه را انتخاب کند. در مثال زیر از کاربر خواسته ایم که جنسیت خود را به ما بگوید:

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<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> 

</body>
</html>

مشاهده ی خروجی در JSBin

حالت `<"input type="submit>`

در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="https://www.w3schools.com/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p dir='rtl'>اگر بر روی دکمه ی submit کلیک کنید اطلاعات فرم به صفحه ی "https://www.w3schools.com/action_page.php" ارسال می شود</p>

</body>
</html>

مشاهده ی خروجی در JSBin

پیامی که پس از ثبت فرم به شما نشان داده می شود توسط سرور و پس از بررسی داده ها تولید شده است.

وظیفه ی action

attribute ای به نام action در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.

در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و ...) است:

<form action="/action_page.php">

نکته: اگر action را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود!

وظیفه ی target

target تعیین می کند که پس از ارسال فرم، پاسخ در یک سربرگ جدید در مرورگر باز شود، در یک frame دیگر باز شود، در همان صفحه باز شود و الی آخر. مقدار پیش فرض آن self_ است که می گوید فرم در همین پنجره ارسال شود اما اگر می خواهید در یک پنجره ی جدید باز شود باید از blank_ استفاده کنید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>
<p>When submitting this form, the result will be opened in a new browser tab:</p>

<form action="https://www.w3schools.com/action_page.php" target="_blank">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

مشاهده ی خروجی در JSBin

مقادیر مجاز دیگر parent_ و top_ و یا نام یک iframe هستند.

وظیفه ی method

در فرم ها یک attribute بسیار مهم دیگری به نام method (به معنی «روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.

مثالی از متد GET:

<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>

<form action="https://www.w3schools.com/action_page.php" target="_blank" method="GET">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. اطلاعات ثبت شده را در آنجا می بینید</p>

</body>
</html>

مشاهده خروجی در JSBin

مثالی از متد POST:

<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>

<form action="https://www.w3schools.com/action_page.php" target="_blank" method="POST">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. هیچ اطلاعاتی در آنجا دیده نمی شود</p>

</body>
</html>

مشاهده خروجی در JSBin

تفاوت GET و POST چیست؟

حالت پیش فرض مرورگر برای ارسال اطلاعات حالت GET است اما زمانی که از GET استفاده می شود تمام اطلاعات ثبت شده در نوار آدرس مرورگر نمایان خواهند بود (رجوع کنید به دو مثال بالا):

/action_page.php?firstname=Mickey&lastname=Mouse

نکاتی در مورد GET:

داده های فرم را به صورت جفت های name/value در URL قرار می دهد
طول این URL محدود است (حدود 3000 کاراکتر)
هیچ گاه برای ارسال اطلاعات حساس مانند رمز عبور از GET استفاده نکنید چرا که در نوار آدرس مرورگر قابل مشاهده خواهد بود
مناسب برای کاربرانی که می خواهند نتایج را Bookmark کنند
GET معمولا مناسب موقعیت هایی است که هیچ اطلاعات حساسی در آن رد و بدل نمی شود، مانند query string های گوگل زمانی که چیزی را در آن سرچ می کنید

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

نکاتی در مورد POST:

POST هیچ محدودیت اندازه ای ندارد و می توانید از طریق آن حجم بزرگی از داده ها را ارسال کنید
نتایجی که با POST ارسال شوند قابل bookmark شدن نخواهند بود

وظیفه ی name

هر فیلد ورودی (input) باید یک name داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.

در مثال زیر می توانید ببینید که تنها Last name ثبت و ارسال می شود:

<!DOCTYPE html>
<html>
<body>

<h2>The name Attribute</h2>

<form action="https://www.w3schools.com/action_page.php">
  First name:<br>
  <input type="text" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

جمع کردن داده در فرم ها

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

<!DOCTYPE html>
<html>
<body>

<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

</body>
</html>

مشاهده خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.