100% کامل شده تا

ویژگی‌های فرم در اچ‌تی‌ام‌ال (HTML Form Attributes)

از موتو کد، دانشنامهٔ برنامه‌نویسی


این فصل ویژگی‌های مختلف عنصر <form> در HTML را توضیح می‌دهد.


ویژگی Action

ویژگی action، عملی را که هنگام ارسال فرم انجام می‌شود، تعریف می‌کند.[۱]

معمولاً هنگامی که کاربر روی دکمه ارسال کلیک می‌کند، داده‌های فرم به یک فایل روی سرور ارسال می‌شود.

در مثال زیر، داده‌های فرم به فایلی به نام "action_page.php" ارسال می‌شود. این فایل حاوی یک اسکریپت سمت سرور است که داده‌های فرم را مدیریت می‌کند:

مثال

هنگام ارسال، داده‌های فرم را به "action_page.php" ارسال کنید:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

Responsive demo.svg


نکته: اگر ویژگی action حذف شود، action روی صفحه فعلی تنظیم می‌شود.




ویژگی Target

ویژگی target مشخص می‌کند که پاسخی که پس از ارسال فرم دریافت می‌شود در کجا نمایش داده شود.

ویژگی target می‌تواند یکی از مقادیر زیر را داشته باشد:

مقدار شرح
_blank پاسخ در یک پنجره یا برگه جدید نمایش داده می‌شود
_self پاسخ در پنجره جاری نمایش داده می‌شود
_parent پاسخ در قاب والد نمایش داده می‌شود
_top پاسخ در تمام قسمت پنجره نمایش داده می‌شود
framename پاسخ در iframe نام‌گذاری شده نمایش داده می‌شود

مقدار پیش‌فرض _self است که به این معنی است که پاسخ در پنجره جاری باز می‌شود.

مثال

در اینجا، نتیجهٔ ارسال شده در برگه مرورگر جدید باز می‌شود:

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

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The form target attribute</h2>

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

<form action="/action_page.php" target="_blank">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Responsive demo.svg



ویژگی Method

ویژگی method، متد HTTP را مشخص می‌کند که هنگام ارسال داده‌های فرم مورد استفاده قرار می‌گیرد.

فرم اطلاعات را می‌توان به عنوان متغیرهای URL (با method="get") یا به عنوان تراکنش ارسال HTTP (با method="post") ارسال کرد.

روش پیش‌فرض HTTP هنگام ارسال داده‌های فرم GET است.

مثال

این مثال هنگام ارسال داده‌های فرم از روش GET استفاده می‌کند:

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

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>

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

<form action="/action_page.php" target="_blank" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<p>After you submit, notice that the form values is visible in the address bar of the new browser tab.</p>

</body>
</html>

Responsive demo.svg


مثال

این مثال هنگام ارسال داده‌های فرم از روش POST استفاده می‌کند:

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

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the POST method:</p>

<form action="/action_page.php" target="_blank" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<p>After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab.</p>

</body>
</html>

Responsive demo.svg


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

  • داده‌های فرم را به URL، در جفت نام/مقدار اضافه می‌کند
  • هرگز از GET برای ارسال داده‌های حساس استفاده نکنید! (اطلاعات فرم ارسال شده در URL قابل مشاهده است!)
  • تعدا نویسهٔ URL محدود است (۲۰۴۸ نویسه)
  • برای ارسال فرم‌هایی که کاربر می‌خواهد نتیجه را نشانک (bookmark ) کند مفید است
  • روش GET برای داده‌های غیر ایمن، مانند رشته‌های پرس‌وجو (query strings) در Google خوب است

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

  • داده‌های فرم را در داخل بدنهٔ HTTP اضافه می‌کند (داده‌های فرم ارسال شده در URL نشان داده نمی‌شود)
  • روش POST محدودیت اندازه ندارد و می‌تواند برای ارسال مقادیر زیادی داده استفاده شود.
  • ارسال‌های فرم با POST نمی‌توانند نشانه گذاری (bookmarked ) شوند
نکته: اگر داده‌های فرم حاوی اطلاعات حساس یا شخصی است، همیشه از POST استفاده کنید!


ویژگی Autocomplete

ویژگی autocomplete مشخص می‌کند که آیا فرم برای تکمیل خودکار روشن باشد یا خاموش.

هنگامی که تکمیل خودکار (autocomplete) روشن است، مرورگر به‌طور خودکار مقادیر را بر اساس مقادیری که کاربر قبلاً وارد کرده‌است تکمیل می‌کند.

مثال

یک فرم با ویژگی تکمیل خودکار:

<form action="/action_page.php" autocomplete="on">

مثال
<!DOCTYPE html>
<html>
<body>

<h1>The form autocomplete attribute</h1>

<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>

<p>Then, try to set autocomplete to "off".</p>

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

Responsive demo.svg



ویژگی Novalidate

ویژگی novalidate یک ویژگی boolean است.

در صورت وجود، مشخص می‌کند که دادهٔ فرم (ورودی) در هنگام ارسال نباید معتبر باشد.

مثال

یک فرم با ویژگی novalidate:

<form action="/action_page.php" novalidate>

مثال
<!DOCTYPE html>
<html>
<body>

<h1>The form novalidate attribute</h1>

<p>The novalidate attribute indicates that the form input is not to be validated on submit:</p>

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit">
</form>

<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).</p>

</body>
</html>

Responsive demo.svg



لیست همهٔ ویژگی‌های <form>


منابع آموزشی




به‌روزرسانی شده: ۳۶ روز پیش