100% کامل شده تا

ویژگی ورودی form* در اچ‌تی‌ام‌ال (HTML Input form* Attributes)

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


این فصل ویژگی‌های مختلف form*[توضیحات ۱]، برای عنصر <input> در HTML را توصیف می‌کند.


ویژگی form

ویژگی form، ورودی فرمی را مشخص می‌کند که یک عنصر <input> به آن تعلق دارد.[۱]

مقدار این ویژگی باید برابر با ویژگی id عنصر <form> ای باشد که به آن تعلق دارد.

مثال

یک فیلد ورودی خارج از فرم HTML قرار گرفته‌است (اما همچنان بخشی از فرم است):

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

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

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

<h1>The input form attribute</h1>

<p>The form attribute specifies the form an input element belongs to.</p>

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

<p>The "Last name" field below is outside the form element, but still part of the form.</p>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

</body>
</html>

Responsive demo.svg



ویژگی formaction

ویژگی formaction آدرس URL فایلی که کنترل ورودی را هنگام submit فرم پردازش خواهد کرد مشخص می‌کند.

نکته: این ویژگی، ویژگی action عنصر <form> را باطل می‌کند.

ویژگی <form> با انواع ورودی زیر کار می‌کند: submit و image.

مثال

یک فرم HTML با دو کلید submit و عمل‌های متفاوت:

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

Responsive demo.svg



ویژگی formenctype

ویژگی formenctype نحوه کدگذاری داده‌های فرم را هنگام submit مشخص می‌کند (فقط زمانی‌که method="post" باشد).

نکته: این ویژگی، ویژگی enctype عنصر <form> را باطل می‌کند.

ویژگی formenctype با انواع ورودی زیر کار می‌کند:submit و image.

مثال

فرمی با دو کلید submit. اولین کلید داده‌های فرم را با کدگذاری پیش‌فرض ارسال می‌کند و فایل دوم داده‌های فرم را بعنوان "multipart/form-data" کدگذاری می‌کند:

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Responsive demo.svg



ویژگی formmethod

ویژگی formmethod متد HTTP برای ارسال داده‌های فرم به action URL را مشخص می‌کند.

نکته: این ویژگی، ویژگی method عنصر <form> را باطل می‌کند.

ویژگی formmethod با انواع ورودی زیر کار می‌کند: submit و image.

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

نکاتی در مورد متد "get"

  • داده‌های فرم را به URL، در جفت نام/مقدار اضافه می‌کند
  • برای ارسال فرم‌هایی که کاربر می‌خواهد نتیجه را نشانک (bookmark ) کند مفید است
  • میزان اطلاعاتی که می‌توان در یک URL قرار داد محدود است (در مرورگرهای مختلف متفاوت است)، بنابراین، نمی‌توانید مطمئن باشید که همه داده‌های فرم به‌طور صحیح انتقال داده می‌شوند
  • هرگز از متد "get" برای ارسال اطلاعات حساس استفاده نکنید! (کلمه عبور یا اطلاعات حساس دیگر در بخش آدرس مرورگر قابل رویت خواهند بود)

نکاتی در مورد متد "post"

  • این متد داده‌های فرم را بعنوان یک تراکنش HTTP post انتقال می‌دهد
  • ارسال‌های فرم با POST نمی‌توانند نشانه گذاری (bookmarked ) شوند
  • متد "post" قوی‌تر و امن‌تر از get" است و همچنین "post" محدودیت اندازه ندارد

مثال

فرمی با دو کلید submit. کلید اول داده‌های فرم را با method="get" ارسال می‌کند. کلید دوم داده‌های فرم را با method="post" ارسال می‌کند:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Responsive demo.svg



ویژگی formtarget

ویژگی formtarget یک نام یا کلمه کلیدی تعیین می‌کند که نشان می‌دهد پاسخ دریافت شده بعد از submit شدن فرم کجا نمایش داده شود.

نکته: این ویژگی، ویژگی target عنصر <form> را باطل می‌کند.

ویژگی formtarget با انواع ورودی زیر کار می‌کند:submit و image.

مثال

فرمی با دو کلید submit، با پنجره‌های هدف متفاوت:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

Responsive demo.svg



ویژگی formnovalidate

ویژگی formnovalidate مشخص می‌کند که یک عنصر <input> نباید در هنگام ارسال تأیید اعتبار شود.

توجه: این ویژگی، ویژگی novalidate عنصر <form> را باطل می‌کند.

ویژگی formnovalidate با انواع ورودی زیر کار می‌کند:submit و image.

مثال

فرمی با دو کلید submit (با تأیید و بدون تأیید اعتبار):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

Responsive demo.svg



ویژگی novalidate

ویژگی novalidate یک ویژگی <form> است.

در صورت وجود، novalidate مشخص می‌کند که داده‌های فرم هنگام submit نباید تأیید اعتبار شوند.

مثال

تعیین می‌کند که داده‌های فرم نباید هنگام submit تأیید اعتبار شوند:

<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" value="Submit">
</form>

Responsive demo.svg



عناصر form و input در HTML


توضیحات

  1. این فصل راجع به ویژگی‌های form, formaction, formnovalidate, formmethod, formtarget, formenctype و novalidate اشاره دارد.

منابع آموزشی




به‌روزرسانی شده: ۲۹ روز پیش