ویژگی های formدر عنصر inputدر HTML

ویژگی‌های *form در عنصر <input> در HTML

این فصل به توصیف ویژگی‌های مختلف form* برای عنصر <input> در HTML می‌پردازد.

ویژگی form

ویژگی form در input مشخص می‌کند که عنصر <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" />

ویژگی formaction

ویژگی formaction در input، آدرس URL فایلی را مشخص می‌کند که پس از ارسال فرم، ورودی را پردازش خواهد کرد. نکته: این ویژگی، ویژگی action عنصر <form> را لغو می‌کند (override). ویژگی formaction با انواع ورودی (input types) زیر کار می‌کند: submit و image.

مثال یک فرم HTML با دو دکمه ارسال (submit)، با actionهای متفاوت:

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

ویژگی formenctype

ویژگی formenctype در input نحوه کدگذاری (encode) داده‌های فرم (form-data) هنگام ارسال را مشخص می‌کند (فقط برای فرم‌هایی با method="post"). نکته: این ویژگی، ویژگی enctype عنصر <form> را لغو می‌کند. ویژگی formenctype با انواع ورودی زیر کار می‌کند: submit و image.

مثال یک فرم با دو دکمه ارسال. دکمه اول داده‌های فرم را با کدگذاری پیش‌فرض ارسال می‌کند، دکمه دوم داده‌های فرم را به صورت کدگذاری شده با "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>

ویژگی formmethod

ویژگی formmethod در input، متد HTTP برای ارسال داده‌های فرم به آدرس URL مشخص شده در action را تعریف می‌کند. نکته: این ویژگی، ویژگی method عنصر <form> را لغو می‌کند. ویژگی formmethod با انواع ورودی زیر کار می‌کند: submit و image. داده‌های فرم می‌توانند به صورت متغیرهای URL (با method="get") یا به عنوان یک تراکنش پست HTTP (با method="post") ارسال شوند.

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

• این متد داده‌های فرم را به صورت زوج‌های نام/مقدار (name/value pairs) به انتهای URL اضافه می‌کند.

• این متد برای ارسال فرم‌هایی مفید است که کاربر می‌خواهد نتیجه را نشانه‌گذاری (bookmark) کند.

• برای میزان داده‌ای که می‌توانید در یک URL قرار دهید، محدودیت وجود دارد (که بین مرورگرها متفاوت است)، بنابراین، نمی‌توانید مطمئن باشید که تمام داده‌های فرم به درستی منتقل می‌شوند.

• هرگز از متد "get" برای ارسال اطلاعات حساس استفاده نکنید! (رمز عبور یا سایر اطلاعات حساس در نوار آدرس مرورگر قابل مشاهده خواهد بود).

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

• این متد داده‌های فرم را به عنوان یک تراکنش پست HTTP (HTTP post transaction) ارسال می‌کند.

• فرم‌هایی که با متد "post" ارسال می‌شوند را نمی‌توان نشانه‌گذاری (bookmark) کرد.

• متد "post" قوی‌تر و امن‌تر از "get" است و محدودیت حجم ندارد.

مثال یک فرم با دو دکمه ارسال. دکمه اول داده‌های فرم را با 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>

ویژگی formtarget

ویژگی formtarget در input یک نام یا کلمه‌کلیدی را مشخص می‌کند که نشان می‌دهد پاسخی که پس از ارسال فرم دریافت می‌شود، در کجا نمایش داده شود. نکته: این ویژگی، ویژگی target عنصر <form> را لغو می‌کند. ویژگی formtarget با انواع ورودی زیر کار می‌کند: submit و image.

مثال یک فرم با دو دکمه ارسال، با پنجره‌های هدف (target windows) متفاوت:

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

ویژگی formnovalidate

ویژگی formnovalidate در input مشخص می‌کند که یک عنصر <input> هنگام ارسال نباید اعتبارسنجی (validate) شود. نکته: این ویژگی، ویژگی novalidate عنصر <form> را لغو می‌کند. ویژگی formnovalidate با نوع ورودی زیر کار می‌کند: 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>

ویژگی novalidate

ویژگی novalidate یک ویژگی برای تگ <form> است. هنگامی که این ویژگی وجود داشته باشد، مشخص می‌کند که هیچ‌کدام از داده‌های فرم هنگام ارسال نباید اعتبارسنجی شوند.

مثال مشخص کنید که هیچ‌کدام از داده‌های فرم هنگام ارسال اعتبارسنجی نشوند:

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

عناصر فرم و ورودی در HTML