٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش فرم ورودی HTML ویژگی ها

این فصل form*خصوصیات مختلف <input>عنصر HTML را توصیف می کند. فرم Attribute formویژگی ورودی ، شکلی است که <input>عنصر به آن تعلق دارد. مقدار این صفت باید برابر با مشخصه id عنصر <form> متعلق به آن باشد. مثال یک قسمت ورودی که خارج از فرم HTML قرار دارد…

محمد یوسفی

1 جولای 2021

این فصل form*خصوصیات مختلف <input>عنصر HTML را توصیف می کند.


فرم Attribute

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

صفت شکل گیری

formactionویژگی input URL پرونده را مشخص می کند که هنگام ارسال فرم پردازش ورودی را انجام می دهد.

توجه: این ویژگی actionویژگی <form>عنصر را نادیده می گیرد .

formactionآثار صفت با انواع ورودی زیر: ارائه و تصویر.

مثال

یک فرم HTML با دو دکمه ارسال ، با عملکردهای مختلف:

<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 ویژگی ورودی نحوه رمزگذاری داده ها را هنگام ارسال ارسال می کند (فقط برای فرم های دارای روش = “ارسال”).

توجه: این ویژگی صفت enctype <form>عنصر را نادیده می گیرد .

formenctypeآثار صفت با انواع ورودی زیر: ارائه و تصویر.

مثال

فرم با دو دکمه ارسال. اولی داده ها را با رمزگذاری پیش فرض می فرستد ، دومی داده های فرم را با کد “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 اقدام تعریف می کند.

توجه: این ویژگی ویژگی متد را از بین <form>می برد.

formmethodآثار صفت با انواع ورودی زیر: ارائه و تصویر.

داده های فرم را می توان به عنوان متغیرهای URL (روش = “دریافت”) یا به عنوان یک معامله پست HTTP (روش = “ارسال”) ارسال کرد.

یادداشت های مربوط به روش “دریافت”:

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

یادداشت های مربوط به روش “ارسال”:

  • این روش داده ها را به عنوان یک معامله پست HTTP ارسال می کند
  • موارد ارسالی فرم با روش “ارسال” را نمی توان نشانه گذاری کرد
  • روش “ارسال” نسبت به “دریافت” قوی تر و ایمن تر است و “پست” محدودیت اندازه ندارد

مثال

فرم با دو دکمه ارسال. اولی فرم-داده را با روش = “دریافت” ارسال می کند. مورد دوم فرم-داده را با روش = “ارسال” ارسال می کند:

<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ویژگی ورودی یک نام یا یک کلمه کلیدی را مشخص می کند که نشان می دهد پاسخی که پس از ارسال فرم دریافت می شود ، در کجا نمایش داده شود.

توجه: این ویژگی صفت هدف را از بین <form>می برد.

formtargetآثار صفت با انواع ورودی زیر: ارائه و تصویر.

مثال

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

<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> هنگام ارسال تأیید نشود.

توجه: این ویژگی صفت novalidate <form> عنصر را نادیده می گیرد .

formnovalidateآثار صفت با انواع ورودی زیر: ارسال کنید.

مثال

فرم با دو دکمه ارسال (با و بدون اعتبار):

<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ویژگی یک است <form>ویژگی.

در صورت وجود ، novalidate مشخص می کند که کلیه داده ها هنگام ارسال نباید تأیید شوند.

مثال

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

<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 و عناصر ورودی

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها