عنصر HTML: فرم

مثال

نحو

1

<form action=" method="get">

2

   <input type="search" name="q" placeholder="Search...">

3

   <input type="submit" value="Search Google...">

4

</form>

نتیجه

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

HTML <form> برچسب در تمام مرورگرهای مدرن پشتیبانی می شود. بیشتر در caniuse.com بخوانید.

ویژگی های

این <form> برچسب پشتیبانی می کند ویژگی های جهانی در HTML. مشخصه های جهانی برای همه عناصر HTML مشترک هستند و می توانند روی همه آنها استفاده شوند (اگرچه ممکن است تأثیر زیادی روی برخی از آنها نداشته باشند).

این <form> عنصر همچنین از ویژگی های زیر پشتیبانی می کند:

• action: URL مورد استفاده برای ارسال فرم
• method: روش HTTP برای استفاده برای ارسال فرم (“GET”؛ “POST”)
• enctype: نوع کدگذاری مجموعه داده فرم برای ارسال فرم ("application/x-www-form-urlencoded"; "multipart/form-data"; "text/plain")
• name: نام فرم مورد استفاده در document.forms API
• accept-charset: رمزگذاری کاراکترها برای استفاده برای ارسال فرم
• novalidate: دور زدن اعتبارسنجی کنترل فرم برای ارسال فرم
• target: زمینه مرور برای ارسال فرم.
• autocomplete: تنظیم پیش‌فرض ویژگی تکمیل خودکار برای کنترل‌های موجود در فرم

کدام روش؟

این GET و POST روش هایی برای انتقال داده ها استفاده می شود. اگرچه می‌توانیم از هر دو روش برای ارسال داده‌های فرم استفاده کنیم GET استفاده میشه برای درخواست داده در حالی که POST به عنوان راهی استفاده می شود در حال ارسال داده ها به یک وب سرور واضح ترین تفاوت بین این دو این است GET پارامتر درخواست را مانند این به URL اضافه می کند:

محتوا

در یک <form>، محتوای جریان و محتوای قابل لمس پشتیبانی می شوند.

در اینجا یک ساختار فرم معمولی با نمونه هایی از سلسله مراتب عناصر وجود دارد. متوجه خواهید شد <ul> و <li> عناصری که برای حاوی دکمه های رادیویی استفاده می شوند. <p> و <div> عناصر معمولاً برای بسته بندی سایر کنترل های فرم، و <section> برای داشتن گروه های مرتبط از ورودی های فرم کاملاً مناسب است.

1

<form>

2

    <fieldset>

3

        <legend>Preferred use of ketchup</legend>

4

        <ul>

5

            <li>

6

                <input type="radio" name="ketchup" id="ketchup_1" value="burger" />

7

                <label for="ketchup_1">Burger</label>

8

            </li>

9

            <li>

10

                <input type="radio" name="ketchup" id="ketchup_4" value="fries" />

11

                <label for="ketchup_2">Fries</label>

12

            </li>

13

            <li>

14

                <input type="radio" name="ketchup" id="ketchup_3" value="cheese sandwich" />

15

                <label for="ketchup_3">Cheese sandwich</label>

16

            </li>

17

        </ul>

18

    </fieldset>

19

    <p>

20

        <input type="submit" value="Submit answer" />

21

    </p>

22

</form>

ملاحظات دسترسی

• کنترل برچسب زدن: همه کنترل های فرم را به طور مناسب برچسب گذاری کنید. دو روش برای مرتبط کردن برچسب ها با کنترل های فرم وجود دارد:

  1. با دادن یک کنترل id، و ارجاع به آن id در for ویژگی روی برچسب
  2. با قرار دادن کنترل فرم در برچسب.

• تکمیل خودکار: در ورودی ها از autocomplete="" ویژگی برای انواع داده های رایج (مانند نام، آدرس، تاریخ تولد و غیره) بسیاری از مرورگرها جزئیات شخصی کاربر را برای ورود سریعتر فرم پیشنهاد می کنند.
• Tabbbing: برای دیکته کردن ترتیب برگه عناصر تعاملی (مانند ورودی ها) می توانید از tabindex صفت. tabindex="0"برای مثال، اولین عنصری است که هنگام ضربه زدن به آن فوکوس می‌کند Tab کلید روی صفحه کلید

بیشتر بدانید