برچسب <form> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
فرم HTML را برای ورودی کاربر تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:display: block; ,margin-top: 0em;

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک فرم اچ‌تی‌ام‌ال با دو فیلد ورودی و یک دکمهٔ ارسال:

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


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

تعریف و کاربرد

برچسب <form> برای ایجاد فرم اچ‌تی‌ام‌ال به‌منظور ورودی کاربر استفاده می‌شود.[۱]

یک عنصر <form> می‌تواند حاوی یک یا چند مورد از عنصرهای فرم زیر باشد:

پشتیبانی مرورگر

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<form> بله بله بله بله بله

ویژگی‌ها

ویژگی مقدار شرح
accept-charset character_set رمزگذاری کاراکتر که قرار است برای ارسال فرم استفاده شود را مشخص می‌کند
action URL مشخص می‌کند که هنگام ارسال فرم، داده‌های فرم به کجا فرستاده شود
autocomplete on

off

مشخص می‌کند که آیا تکمیل خودکار (autocomplete) برای فرم باید روشن باشد یا خاموش
enctype application/x-www-form-urlencoded

multipart/form-data

text/plain

مشخص می‌کند که داده‌های فرم، وقتی که برای سرور ارسال می‌شوند، باید چگونه رمزگذاری شوند (فقط برای method="post")
method get

post

مشخص می‌کند که از متد HTTP هنگام فرستادن داده‌های فرم استفاده شود
name text نام یک فرم را مشخص می‌کند
novalidate novalidate مشخص می‌کند که فرم نباید هنگام ارسال، تأیید اعتبار شود
target _blank

_self

_parent

_top

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

ویژگی‌های سراسری

همچنین برچسب <form> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <form> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

مثال‌های بیشتر

مثال

یک فرم اچ‌تی‌ام‌ال با کادر انتخاب (checkboxes):

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>


مثال

یک فرم اچ‌تی‌ام‌ال با دکمه‌های رادیویی (radiobuttons):

<form action="/action_page.php" method="get">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female" checked="checked">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br><br>
  <input type="submit" value="Submit">
</form>


صفحات مرتبط

آموزش HTML: فرم‌ها و ورودی اچ‌تی‌ام‌ال (HTML Forms and Input)

مرجع DOM اچ‌تی‌ام‌ال: شیء Form (Form Object)

آموزش CSS: سبک‌دهی به فرم‌ها (Styling Forms)

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها، عنصر <form> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

مثال

form {
  display: block;
  margin-top: 0em;
}


منابع آموزشی