طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

آموزش تگ form در HTML

ذهن انسان محدودتی ندارد

تگ form فرمی را در یک صفحه ساخت. تگ form همراه با عناصر مرتبط با فرم استفاده می شود. برای ایجاد یک فرم ، شما عناصر مربوط به فرم را به طور معمول درون تگ های form باز / بسته استفاده کنید. همچنین می توانید از ویژگی فرم در آن عناصر برای مرجع کردن شناسه فرم مورد استفاده استفاده کنید.

نحوه نشوتن یک فرم در HTML

نحو تگ form با هر تعداد عنصر مربوط به فرم که بین برچسب های شروع و پایان قرار دارند ، به صورت <form> </form> نوشته می شود. تگ form معمولاً یک ویژگی اقدام مشخص شده است (که صفحه ای را که فرم را پردازش می کند مشخص می کند). همچنین می تواند صفات دیگری نیز داشته باشد. برای مشاهده لیستی از ویژگی هایی که می توانند با تگ form استفاده شوند.

مثل

<form action="2050c.com" method="get">
	Form-associated elements here...
</form>

در اینجا مثالی آورده شده است که شامل سه تگ input و دو تگ label است:

<form action="2050c.com" method="get">
	<label>First Name: <input name="first_name"></label>
	<label>Last Name: <input name="last_name"></label>
	<input type="submit" value="Submit">
</form>

مثال های فرم

یک مثال ساده از تگ form

در اینجا فرمی وجود دارد که برای جمع آوری مشخصات نام کاربر استفاده می شود

<form action="2050c.com" target="_blank" method="get">
    <p><label>First name: <input type="text" name="first_name" maxlength="100" style="width:120px;"></label></p>
    <p><label>Last name: <input type="text" name="last_name" maxlength="100" style="width:120px;"></label></p>
    <input type="submit" value="Submit">
</form>

با استفاده از ویژگی های فرم

یک عنصر با استفاده از ویژگی های آن عنصر می توان یک عنصر را با یک فرم مرتبط کرد. عناصر مرتبط با فرم دارای این ویژگی هستند که به شما امکان می دهد به صراحت مشخص کنید کدام فرم برای آن تگ استفاده شود. اگر از ویژگی فرم یک عنصر استفاده می کنید ، باید شناسه شکلی را که می خواهید عنصر را با آن مرتبط کنید مشخص کنید. در مثال زیر ، تمام عناصر مربوط به فرم را خارج از تگ form قرار داده ام. اما من عمداً فقط دو عنصر را با فرم مرتبط کردم (برای نشان دادن تأثیر ویژگی فرم). نام اول با یک فرم مرتبط شده است اما نام خانوادگی آن را ندارد. بنابراین ، نام خانوادگی همراه با فرم ارسال نمی شود و صفحه اقدام نام خانوادگی کاربران را تأیید نمی کند.

<form action="2050c.com" target="_blank" method="get" id="customer_name"></form>
<p>
    <label>First name: <input form="customer_name" type="text" name="first_name" maxlength="100"style="width:120px;"></label>
</p>
<p>
    <label>Last name: <input type="text" name="last_name" maxlength="100" style="width:120px;"></label>
</p>
<input form="customer_name" type="submit" value="Submit">

عناصر مرتبط با فرم

در اینجا عناصر مرتبط با تگ form (به عنوان مثال عناصری که می توانند صاحب فرم داشته باشند) وجود دارد.

  1. <button>
  2. <fieldset>
  3. <input>
  4. <keygen>
  5. <label>
  6. <object>
  7. <output>
  8. <select>
  9. <textarea>
  10. <img>

ویژگی های تگ form

ویژگی ها را می توان به عنصر HTML اضافه کرد تا اطلاعات بیشتری درباره نحوه ظاهر یا رفتار آن عنصر ارائه دهد.

تگ form ویژگی های زیر را می پذیرد.

ویژگی توضیحات
accept-charsetلیستی از کدگذاری نویسه ها را که فضا از هم جدا می کند ، مشخص می کند که سرور می پذیرد. در نسخه های قبلی HTML ، رمزگذاری کاراکترها نیز می توانند با کاما محدود شوند.
actionURI / URL صفحه را مشخص می کند که فرم را پردازش می کند.
autocompleteمشخص می کند که آیا قسمتهای فرم باید به طور خودکار براساس سابقه کاربر تکمیل شوند (یعنی براساس فرمهای قبلی که کاربر تکمیل کرده است). این کاربر را از وارد کردن مجدد داده های فرم که می تواند به راحتی از تاریخچه فرم قبلی دوباره جمع آوری شود (مانند اطلاعات آدرس) ، راحت می کند. ویژگی تکمیل خودکار یک ویژگی برشمرده شده است که دارای دو حالت است. “روشن و خاموش”. مقدار پیش فرض “روشن” است. توجه داشته باشید که آیا می توان تکمیل خودکار فرم را بر روی یک مقدار تنظیم کرد ، سپس مقدار متفاوتی را در مقابل فیلدهای خاص در آن فرم تعیین کنید.
enctypeنوع محتوای مورد استفاده برای رمزگذاری مجموعه داده های فرم را هنگام ارسال به سرور مشخص می کند. مقادیر احتمالی: application / x-www-form-urlencoded (مقدار پیش فرض) multipart / form-data (هنگام بارگذاری پرونده ها از این مورد استفاده کنید.) متن / ساده (از این موارد هنگام بارگذاری پرونده ها استفاده کنید.)
methodروش HTTP را برای استفاده هنگام ارسال فرم مشخص می کند. مقادیر احتمالی: دریافت (داده های فرم هنگام ارسال به URL اضافه می شود. این مقدار پیش فرض است.) گفتگو (داده های فرم به URL اضافه نمی شود.) گفتگو ( در صورت وجود کادر گفتگویی را که فرم در آن قرار دارد می بندد و در غیر این صورت ارسال نمی شود.)
nameنامی را به فرم اختصاص می دهد. این مورد هنگام ارجاع فرم با صفحه های سبک یا اسکریپت ها استفاده می شود. اگر چندین فرم وجود داشته باشد ، نام هر فرم باید منحصر به فرد باشد.
novalidateمشخص می کند که فرم نباید در هنگام ارسال تأیید شود. این یک ویژگی بولین است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری است که با نام متعارف صفت ، بدون هیچ فضای خالی پیشرو یا انتهایی ، مطابق با کوچکترین حالت ASCII باشد (یعنی novalidate یا novalidate = “novalidate”). ممکن است مقادیر: [رشته خالی] نامعتبر است
targetزمینه مرور را برای بارگذاری مقصد مشخص شده در ویژگی action مشخص می کند. مقادیر احتمالی: _blank_ self_top_parent
relexternal: نشان می دهد که سند ارجاع شده بخشی از همان سایت سند فعلی نیست.
help : پیوندی به راهنمای حساس به متن ارائه می دهد.
license : نشان می دهد که محتوای اصلی سند کنونی تحت پوشش مجوز حق چاپ است که توسط سند ارجاع شده توصیف می شود.
next : نشان می دهد که سند فعلی بخشی از یک مجموعه است و سند بعدی این مجموعه سند ارجاع شده است.
nofollow : نشان می دهد که نویسنده یا ناشر اصلی سند فعلی سند ارجاع شده را تأیید نمی کند. این ویژگی غالباً برای اعلام پیوندهای پولی به موتورهای جستجو مانند Google استفاده می شود ، که از مسئولان وب درخواست می کنند تمام پیوندهای پولی (مثلاً تبلیغات) را به این روش اعلام کنند.
noopener : اگر hyperlink یکی از موارد ایجاد شده برای شروع را ایجاد کند (به عنوان مثال دارای یک ویژگی صفت مناسب است) یک زمینه مرور سطح بالا ایجاد می کند که یک زمینه کمکی برای مرور نیست.
noreferrer : در صورت پیروی از لینک اینترنتی ، نماینده کاربر هدر HTTP Referrer (sic) را ارسال نمی کند.
opener : در صورتی که با لینک اضافی یک زمینه مرور سطح بالا ایجاد شود که یک زمینه مرور کمکی نیست (به عنوان مثال دارای “_blank” به عنوان مقدار ویژگی هدف) یک زمینه کمکی مرور ایجاد می کند.
prev : نشان می دهد که سند فعلی بخشی از یک مجموعه است و سند قبلی این مجموعه سند ارجاع شده است.
search : به منبعی پیوند می دهد که می تواند برای جستجوی سند فعلی و صفحات مربوط به آن استفاده شود.

دیدگاه‌های نوشته

Share via
ارسال این به یک دوست