نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی
  • خانه
  • خطاها
  • توضیحات فرم ایجاد و کار با فرم ها در html

توضیحات فرم ایجاد و کار با فرم ها در html

05.11.2019 خطاها

تگ های HTML که فرم های HTML را در سایت تعریف می کنند

ما وب سایت ها و صفحات فردی را در اینترنت ایجاد می کنیمبرای ارتباط با بازدیدکنندگان

فرم های HTMLبرای ثبت نام بازدیدکنندگان در سایت، نظرسنجی های تعاملی و رای گیری، امکان ارسال پیام، خرید و غیره استفاده می شود. HTMLاین فرم برای یک هدف ایجاد شده است: جمع آوری و متعاقباً انتقال اطلاعات برای پردازش توسط یک اسکریپت نرم افزاری یا از طریق ایمیل.

نمونه فرم HTML | وارد سایت شوید

برچسب ها، ویژگی ها و ارزش ها

  • - شکل را تعیین کنید.
  • name="" - نام فرم را مشخص می کند.
  • method="" - روش ارسال داده ها را از فرم تعریف می کند. مقادیر: "get" (پیش فرض) و "post". روش "پست" اغلب مورد استفاده قرار می گیرد، زیرا امکان انتقال حجم زیادی از داده ها را فراهم می کند.
  • action="" - نشانی اینترنتی که داده ها برای پردازش در آن ارسال می شوند را مشخص می کند. در مورد ما - enter_data.php ..
  • - عناصر فرم را مانند دکمه ها، سوئیچ ها، فیلدهای متنی برای ورود داده ها تعریف کنید.
  • type="text" - یک فیلد متنی برای ورود داده ها تعریف می کند.
  • type="password" - فیلدی را برای وارد کردن رمز عبور تعریف می کند که متن آن به شکل ستاره یا دایره نمایش داده می شود.
  • type="checkbox" - یک دکمه رادیویی را تعریف می کند.
  • type="hidden" - یک عنصر فرم پنهان را تعریف می کند - برای انتقال اطلاعات اضافی به سرور استفاده می شود.
  • size="25" - طول فیلد متن به کاراکتر.
  • maxlength="30" - حداکثر تعداد مجاز کاراکترهای وارد شده.
  • value="" - مقداری را تعریف می کند که برای پردازش ارسال می شود اگر برای دکمه های رادیویی یا سوئیچ ها اعمال شود. مقدار این ویژگی به عنوان بخشی از یک فیلد متنی یا دکمه به عنوان مثال، Vasya یا Login در مثال بالا نشان داده خواهد شد.

نمونه فرم HTML | نظرات در سایت

نمونه فرم HTML




نام



ایمیل

برچسب ها، ویژگی ها و ارزش ها

  • action="http://site/comments.php" - نشانی اینترنتی را که داده های فرم به آن ارسال می شود را مشخص می کند.
  • id="" - نام و شناسه عنصر فرم را تعریف می کند.
  • name="" - نام عنصر فرم را مشخص می کند.
  • - یک فیلد متنی را به عنوان بخشی از فرم تعریف کنید.
  • cols="" - تعداد ستون های فیلد متن فرم را تعیین می کند.
  • rows="" - تعداد ردیف های فیلد متن فرم را مشخص می کند.

اگر بین متن را جای دهید، در داخل فیلد به عنوان نمونه نشان داده می شود که به راحتی قابل حذف است.

نمونه فرم HTML | لیست کشویی

فرم های HTML

برچسب ها، ویژگی ها و ارزش ها

  • - لیستی با موقعیت هایی برای انتخاب تعریف کنید.
  • size="" - تعداد موقعیت های قابل مشاهده لیست را تعیین می کند. اگر مقدار 1 باشد، با یک لیست کشویی روبرو هستیم.
  • - تعیین موقعیت (اقلام) لیست.
  • value="" - حاوی مقداری است که توسط فرم برای پردازش به url مشخص شده ارسال می شود.
  • select="selected" - یک آیتم لیست را به عنوان نمونه برجسته می کند.

نمونه فرم HTML | فهرست با نوار پیمایش

با افزایش مقدار مشخصه size=""، لیستی با نوار اسکرول دریافت می کنیم:

مقام اول مقام دوم مقام سوم مقام چهارم

فرم های HTML

برای این گزینه از پرچم multiple="multiple" استفاده کنید که امکان انتخاب چندین موقعیت را فراهم می کند. عدم وجود آن به شما امکان می دهد فقط یک مورد را انتخاب کنید.

  • type="submit" - یک دکمه را تعریف می کند.
  • type="reset" - یک دکمه تنظیم مجدد را تعریف می کند.
  • value="" - برچسب روی دکمه را مشخص می کند.

    • به ادامه مطلب مراجعه کنید:

    شرح

    برچسب بزنید

    یک فرم را در یک صفحه وب نصب می کند. این فرم برای تبادل داده بین کاربر و سرور در نظر گرفته شده است. دامنه کاربرد فرم ها به ارسال داده ها به سرور محدود نمی شود، با استفاده از اسکریپت های کلاینت می توانید به هر عنصر فرم دسترسی داشته باشید، آن را تغییر دهید و بنا به صلاحدید خود اعمال کنید.

    یک سند می تواند حاوی هر تعداد فرم باشد، اما تنها یک فرم می تواند در هر زمان به سرور ارسال شود. به همین دلیل، داده های فرم باید مستقل از یکدیگر باشند.

    برای ارسال فرم به سرور، از دکمه ارسال استفاده کنید، همین کار را می توان با فشار دادن کلید Enter درون فرم انجام داد. اگر دکمه ارسال در فرم وجود نداشته باشد، کلید Enter استفاده از آن را شبیه سازی می کند.

    هنگامی که فرم به سرور ارسال می شود، کنترل داده ها به برنامه مشخص شده توسط ویژگی عمل تگ منتقل می شود. . مرورگر ابتدا اطلاعات را در قالب یک جفت "name=value" آماده می‌کند، جایی که نام با ویژگی نام تگ تعیین می‌شود. ، و مقدار توسط کاربر وارد می شود یا روی فیلد فرم پیش فرض تنظیم می شود. اگر از روش GET برای ارسال داده استفاده می شود، نوار آدرس می تواند به شکل زیر باشد.

    http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

    پارامترها بعد از علامت سوال مشخص شده بعد از آدرس برنامه CGI لیست شده و با یک کاراکتر آمپر (&) از هم جدا می شوند. کاراکترهای غیر لاتین به نمایش هگزا دسیمال تبدیل می شوند (به شکل %HH، که در آن HH کد هگزا دسیمال برای مقدار کاراکتر ASCII است)، و فاصله با علامت مثبت (+) جایگزین می شود.

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

    نحو

    ...

    ویژگی های

    کدگذاری را تنظیم می کند که در آن سرور می تواند داده ها را دریافت و پردازش کند. آدرس برنامه یا سندی که داده های فرم را پردازش می کند. پر کردن خودکار فیلدهای فرم را فعال می کند. روش کدگذاری داده های فرم روش پروتکل HTTP نام فرم بررسی داخلی داده‌های فرم را برای صحت ورودی لغو می‌کند. نام پنجره یا قاب جایی که کنترل کننده نتیجه برگشتی را بارگیری می کند.

    برچسب بسته شدن

    ضروری.

    HTML5 IE Cr Op Sa Fx

    تگ FORM

    به نظر شما مخفف "OS" چگونه مخفف است؟

    افسران
    سیستم عامل
    مگس راه راه عالی

    نتیجه این مثال در شکل نشان داده شده است. 1.

    برنج. 1. مشاهده عناصر فرم در پنجره مرورگر

    ... محتویات فرم ...

  • فقط در داخل عنصر فرم باید کنترل هایی وجود داشته باشد که می تواند به تعداد دلخواه وجود داشته باشد.

    • ویژگی های فرم:

    • ویژگی action یک فایل سرور با یک اسکریپت مسئول پردازش اصلی داده های ارسال شده از فرم را مشخص می کند. به طور معمول، کد این فایل در یک زبان برنامه نویسی سمت سرور نوشته می شود، به عنوان مثال، در phpیا پرل.
    • مشخصه enctype نوع اطلاعات ارسال شده به سرور را نشان می دهد، اگر فقط داده متنی باشد - text/plain، اگر فایل ها با فرم ارسال می شوند، باید multipart/form-data را مشخص کنید.
    • ویژگی متد شکل انتقال داده را مشخص و تعریف می کند. در این مورد به تفصیل نمی پردازیم، اما باید گفت که برای انتقال مطمئن تر، باید روش پست مشخص شود.

    عناصر فرم HTML

      <نوع ورودی = "متن" نام = "ورود" اندازه = "20" مقدار = "Login" maxlength = "25" > !}

      نتیجه:

      • مقدار ویژگی type - text - نشان می دهد که این یک فیلد متنی است
      • اندازه - اندازه فیلد متن به کاراکتر
      • maxlength - حداکثر تعداد کاراکترهایی که می توانند در فیلد قرار بگیرند
      • مقدار - متن اولیه در قسمت متن
      • نام - نام عنصر، برای پردازش داده ها در فایل کنترل کننده لازم است

      نتیجه:


      به جای متن، یک ماسک در قسمت نمایش داده می شود - ستاره ها یا دایره ها

      <نوع ورودی = مقدار "ارسال" = "ارسال داده ها">

      نتیجه:

      دکمه ارسال تمامی داده های فرم وارد شده توسط کاربر را جمع آوری کرده و به آدرس مشخص شده در ویژگی action فرم ارسال می کند.

      <نوع ورودی = "تنظیم مجدد" مقدار = "فرم را پاک کنید" > !}

      نتیجه:

      دکمه وضعیت همه کنترل ها را به حالت اولیه باز می گرداند (فرم را پاک می کند)

      <نوع ورودی = "چک باکس" نام = "asp" مقدار = " بله" > !} A.S.P.<br> <نوع ورودی = "چک باکس" نام = "js" مقدار = " بله" checked = "checked" > !}جاوا اسکریپت<br> <نوع ورودی = "چک باکس" نام = "php" مقدار = " بله" > !} PHP<br> <نوع ورودی = "چک باکس" نام = "html" مقدار = " بله" checked = "checked" > !} HTML<br>

      A.S.P.
      جاوا اسکریپت
      PHP
      HTML


      نتیجه:

      A.S.P.
      جاوا اسکریپت
      PHP
      HTML

      در html، یک چک باکس برای سازماندهی چندین انتخاب استفاده می شود، به عنوان مثال. در مواقعی که انتخاب چندین گزینه پاسخ ضروری و امکان پذیر است

      <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "asp" > !} A.S.P.<br> <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "js" > !}جاوا اسکریپت<br> <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "php" > !} PHP<br> <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "html" checked = "checked" > !} HTML<br>

      A.S.P.
      جاوا اسکریپت
      PHP
      HTML

      نتیجه:

      A.S.P.
      جاوا اسکریپت
      PHP
      HTML

      دکمه رادیویی html برای یک انتخاب واحد از چندین گزینه استفاده می شود

      ویژگی checked بلافاصله عنصر را علامت زده می کند

    مهم:برای عناصر رادیولازم است که مقدار ویژگی نامهمه عناصر در گروه یکسان بودند: در این حالت، عناصر به هم پیوسته کار می کنند، زمانی که یک عنصر روشن است، بقیه خاموش می شوند.

    لیست کشویی HTML

    بیایید به مثالی از افزودن یک لیست کشویی نگاه کنیم:

    1 2 3 4 5 6 <نام = "کتاب" اندازه = "1" > را انتخاب کنید <مقدار گزینه = "asp" > !} A.S.P.</option> <مقدار گزینه = "js" > !}جاوا اسکریپت</option> <مقدار گزینه = "php" > !} PHP</option> <مقدار گزینه = "html" selected = "selected" > !} HTML</option> </انتخاب>

    نتیجه:

    • لیست کشویی شامل یک تگ اصلی - انتخاب - است که دارای یک جفت بسته است و هر آیتم لیست یک تگ گزینه است که متن مورد در داخل آن نمایش داده می شود.
    • ویژگی اندازه با مقدار "1"نشان می دهد که لیست جمع شده یک مورد را نشان می دهد، بقیه با کلیک بر روی فلش منو باز می شوند
    • ویژگی انتخاب شده یک آیتم (گزینه) نشان می دهد که این مورد خاص در ابتدا قابل مشاهده خواهد بود و موارد باقی مانده "جمع شده" هستند.

    برای لیست های بزرگ و پیچیده یک گزینه وجود دارد عنوان های فرعی را اضافه کنید- تگ optgroup با ویژگی برچسب:

    1 2 3 4 5 6 7 8 9 10 11 12 <نام = "کتاب" اندازه = "1" > را انتخاب کنید <optgroup label = "انگلیسی" > <مقدار گزینه = "asp" > !} A.S.P.</option> <مقدار گزینه = "js" > !}جاوا اسکریپت</option> <مقدار گزینه = "php" > !} PHP</option> <مقدار گزینه = "html" selected = "selected" > !} HTML</option> </optgroup> <optgroup label = "روس ها" > <مقدار گزینه = "asp_rus" > !} ASP در روسی</option> <مقدار گزینه = "js_rus" > !}جاوا اسکریپت به زبان روسی</option> </optgroup> </انتخاب>


    تا فرصت را فراهم کند انتخاب چندین مورد به طور همزمانشما باید ویژگی چندگانه را اضافه کنید. اما در این مورد، ویژگی size نیز باید روی مقداری بیشتر از 1 تنظیم شود:

    نتیجه:

    • عرض عنصر به ویژگی cols بستگی دارد، که مشخص می کند چند کاراکتر به صورت افقی قرار می گیرند
    • ویژگی rows تعداد ردیف های یک عنصر را مشخص می کند

    عناصر دیگر

    عناصر و ویژگی های اضافی

    • برای کنترل ها رادیوو چک باکساستفاده از عناصر اضافی راحت است که اولاً متن را به رادیو یا خود عنصر چک باکس متصل می کند و ثانیاً هنگام کلیک کردن یک ضربه اضافه می کند:
      • <نوع ورودی = "چک باکس" id = "book1" > <label for = "book1" > A.S.P.</label>

      در مثال، یک کتیبه (برچسب برچسب) برای عنصر چک باکس ایجاد شده است. اتصال از طریق ویژگی id انجام می شود که مقدار آن در ویژگی for برچسب مشخص شده است.

      نتیجه:

    • ویژگی غیرفعال به شما امکان می دهد یک عنصر را قفل کنید و کاربر آن را غیرقابل تغییر کند:
      • <نوع ورودی = "متن" نام = "ورود" اندازه = "20" مقدار = "Login" maxlength = "25" disabled = "disabled" >!}
      <نوع ورودی = "چک باکس" نام = "asp" مقدار = " بله" > !} A.S.P.<br> <نوع ورودی = "چک باکس" نام = "js" مقدار = " بله" checked = "checked" disabled = "disabled" > !}جاوا اسکریپت<br>


      A.S.P.
      جاوا اسکریپت

    فرم های HTMLکنترل هایی هستند که برای جمع آوری اطلاعات از بازدیدکنندگان وب سایت استفاده می شوند.

    فرم های وب شامل مجموعه ای از فیلدهای متنی، دکمه ها، لیست ها و سایر کنترل ها هستند که با کلیک ماوس فعال می شوند. از نظر فنی، فرم ها داده ها را از کاربر به یک سرور راه دور منتقل می کنند.

    برای دریافت و پردازش داده های فرم، زبان های برنامه نویسی وب مانند PHP, پرل.

    قبل از ظهور HTML5، فرم های وب مجموعه ای از چندین عنصر بودند , با یک دکمه تمام می شود . تلاش زیادی برای استایل دادن به فرم ها در مرورگرهای مختلف انجام شد. علاوه بر این، فرم‌ها به جاوا اسکریپت برای اعتبارسنجی ورودی نیاز داشتند و فاقد انواع فیلد ورودی خاص برای تعیین اطلاعات روزمره مانند تاریخ‌ها، آدرس‌های ایمیل و آدرس‌های اینترنتی بودند.

    فرم های HTML5بسیاری از این مشکلات رایج را با وجود ویژگی های جدید حل کرد و توانایی تغییر ظاهر عناصر فرم را فراهم کرد CSS3.

    برنج. 1. بهبود فرم های وب با HTML5

    ایجاد فرم HTML5

    1. عنصر

    اساس هر شکلی عنصر است .... به هیچ ورودی نیاز ندارد زیرا یک ظرف است و همه کنترل های فرم را با هم نگه می دارد - زمینه های. ویژگی های این عنصر حاوی اطلاعاتی است که در همه فیلدهای فرم مشترک است، بنابراین فیلدهایی که به طور منطقی ترکیب می شوند باید در یک فرم گنجانده شوند.

    جدول 1. ویژگی های برچسب
    صفت معنی/توضیح
    پذیرش-مجموعه حروف مقدار مشخصه یک فضای جدا شده است لیست رمزگذاری کاراکترها، که برای ارسال فرم استفاده می شود، به عنوان مثال، .
    عمل ویژگی مورد نیاز، که نشانی اینترنتی راهنمای فرم را در سروری که داده ها به آن ارسال می شود، مشخص می کند. این یک فایل (به عنوان مثال، action.php) است که توصیف می کند که چه کاری باید با داده های فرم انجام شود. اگر مقدار مشخصه مشخص نشده باشد، پس از بارگذاری مجدد صفحه، عناصر فرم مقادیر پیش فرض خود را خواهند گرفت.
    اگر تمام کارها در سمت کلاینت توسط اسکریپت های جاوا اسکریپت انجام می شود، می توانید مقدار # را برای ویژگی action مشخص کنید.
    همچنین می توانید ترتیبی دهید که فرم پر شده توسط بازدیدکننده از طریق ایمیل برای شما ارسال شود. برای این کار باید ورودی زیر را وارد کنید:
    تکمیل خودکار

    تایپ کردن برای نشان دادن استفاده می شود MIME-نوع داده ارسال شده همراه با فرم، به عنوان مثال، enctype="multipart/form-data" . فقط در مورد روش = "پست" مشخص شده است.
    application/x-www-form-urlencoded نوع محتوای پیش‌فرض است که نشان می‌دهد داده‌های ارسال شده فهرستی از متغیرهای فرم کد شده با URL را نشان می‌دهد. کاراکترهای فضایی (ASCII 32) به صورت + و یک کاراکتر خاص مانند ! در هگزادسیمال به صورت % 21 کدگذاری خواهد شد.
    multipart/form-data - برای ارسال فرم‌های حاوی فایل‌ها، داده‌های غیرASCII و داده‌های باینری استفاده می‌شود، از چندین بخش تشکیل شده است که هر کدام محتوای یک عنصر فرم جداگانه را نشان می‌دهد.
    text/plain - نشان می دهد که متن ساده (نه html) در حال انتقال است.
    روش نحوه ارسال داده های فرم را مشخص می کند.
    متد دریافت اطلاعات را از طریق نوار آدرس مرورگر به سرور ارسال می کند. هنگام ایجاد یک درخواست برای سرور، همه متغیرها و مقادیر آنها دنباله ای مانند www.anysite.ru/form.php?var1=1&var2=2 تشکیل می دهند. آیا نام و مقادیر متغیرها پس از علامت به آدرس سرور اضافه می شود؟ و با & از هم جدا می شوند. همه کاراکترهای خاص و حروف غیر لاتین با فرمت %nn کدگذاری می‌شوند، فاصله با + جایگزین می‌شود. اگر حجم زیادی از اطلاعات را منتقل نمی کنید، باید از این روش استفاده کنید. اگر قرار باشد فایلی را به همراه فرم ارسال کنید، این روش جواب نمی دهد.
    روش پست برای ارسال مقادیر زیادی داده و همچنین اطلاعات محرمانه و رمز عبور استفاده می شود. داده های ارسال شده با استفاده از این روش در هدر URL قابل مشاهده نیست زیرا در متن پیام موجود است.
    نام مجموعه ها نام فرم، که برای دسترسی به عناصر فرم از طریق اسکریپت هایی مانند name="opros" استفاده می شود.
    اعتبار بخشیدن تأیید اعتبار در دکمه ارسال فرم را غیرفعال می کند. ویژگی بدون تعیین مقدار استفاده می شود
    هدف پنجره ای را که اطلاعات به آن ارسال می شود را مشخص می کند:
    _blank - پنجره جدید
    _خود - همان قاب
    _parent - فریم والد (اگر وجود دارد، اگر نه، پس به فریم فعلی)
    _top پنجره سطح بالایی نسبت به این قاب است. اگر تماس از فریم فرزند نمی آید، به همان فریم.

    2. گروه بندی عناصر فرم

    عنصر

    ...
    طراحی شده برای گروه بندی عناصر مرتبط با یکدیگر، بنابراین فرم را به قطعات منطقی تقسیم می کند.

    هر گروه از عناصر را می توان با استفاده از عنصر نامگذاری کرد ، که بلافاصله بعد از تگ می آید

    . نام گروه در حاشیه بالایی سمت چپ ظاهر می شود
    . به عنوان مثال، اگر در یک عنصر
    اطلاعات تماس ذخیره می شود:

    اطلاعات تماس


    برنج. 2. گروه بندی عناصر فرم با استفاده از

    جدول 2. ویژگی های برچسب
    صفت معنی/توضیح
    معلول اگر مشخصه وجود داشته باشد، گروهی از عناصر فرم مرتبط در داخل ظرف قرار دارند
    ، برای پر کردن و ویرایش غیرفعال است. برای محدود کردن دسترسی به فیلدهای فرم خاص حاوی داده‌های وارد شده قبلی استفاده می‌شود. ویژگی بدون تعیین مقدار استفاده می شود -
    .
    فرم
    در همان سند یک یا چند شکل را نشان می دهد که این گروه از عناصر به آنها تعلق دارند. این ویژگی در حال حاضر توسط هیچ مرورگری پشتیبانی نمی شود.
    نام تعریف می کند نام، که برای ارجاع عناصر در جاوا اسکریپت یا برای ارجاع به داده های فرم پس از تکمیل و ارسال فرم استفاده می شود. این مشابه با ویژگی id است.

    3. فیلدهای فرم را ایجاد کنید

    عنصر بیشتر فیلدهای فرم را ایجاد می کند. ویژگی های یک عنصر بسته به نوع فیلدی که عنصر برای ایجاد آن استفاده می شود متفاوت است.

    با استفاده از سبک‌های CSS می‌توانید اندازه فونت، نوع فونت، رنگ و سایر ویژگی‌های متن را تغییر دهید و همچنین حاشیه‌ها، رنگ پس‌زمینه و تصویر پس‌زمینه را اضافه کنید. عرض فیلد با ویژگی width مشخص می شود.

    جدول 3. ویژگی های برچسب
    صفت معنی/توضیح
    تایید کنید نوع فایل مجاز برای ارسال به سرور را تعیین می کند. فقط برای . مقادیر ممکن:
    file_extension - اجازه دانلود فایل‌ها با پسوند مشخص شده را می‌دهد، به عنوان مثال، accept=".gif" , accept=".pdf" , accept=".doc"
    audio/* - اجازه دانلود فایل های صوتی را می دهد
    ویدئو/* - امکان دانلود فایل های ویدئویی را فراهم می کند
    image/* - اجازه بارگذاری تصاویر را می دهد
    media_type - نوع رسانه فایل های دانلود شده را نشان می دهد.
    alt تعریف می کند متن جایگزینبرای تصاویر، فقط برای نشان داده شده است .
    تکمیل خودکار مسئول به خاطر سپردن مقادیر وارد شده در قسمت متن و جایگزینی خودکار آنها در دفعه بعد که آنها را وارد می کنید:
    on - به این معنی است که فیلد محافظت نشده است و مقدار آن قابل ذخیره و بازیابی است.
    خاموش - تکمیل خودکار فیلدهای فرم را غیرفعال می کند.
    فوکوس خودکار به شما امکان می دهد مطمئن شوید که در فرم بارگذاری شده، یک یا آن فیلد ورودی قبلاً فوکوس دارد (انتخاب شده است) و آماده وارد کردن یک مقدار است.
    بررسی شد این ویژگی بررسی می‌کند که آیا چک باکس پیش‌فرض هنگام بارگیری صفحه برای فیلدی‌هایی مانند type="checkbox" و type="radio" علامت‌گذاری شده است یا خیر.
    معلول
    فرم مقدار مشخصه باید برابر با ویژگی id عنصر باشد در همان سند یک یا چند فرم را که این فیلد فرم به آنها تعلق دارد، مشخص می کند.
    شکل گیری نشانی اینترنتی فایلی را مشخص می کند که هنگام ارسال فرم، داده های وارد شده در فیلدها را پردازش می کند. فقط برای فیلدهای type="submit" و type="image" تنظیم کنید. این ویژگی ارزش ویژگی عمل خود فرم را نادیده می گیرد.
    شکل شکل نحوه کدگذاری داده های فیلد فرم هنگام ارسال به سرور را تعیین می کند. مقدار ویژگی enctype فرم را لغو می کند. فقط برای فیلدهای type="submit" و type="image" تنظیم کنید. گزینه ها:
    application/-x-www-form-urlencoded مقدار پیش فرض است. همه کاراکترها قبل از ارسال کدگذاری می شوند (فضاها با کاراکتر + جایگزین می شوند، کاراکترهای ویژه به مقادیر ASCII HEX تبدیل می شوند)
    چند بخشی/فرم-داده - کاراکترها کدگذاری نمی شوند
    text/plain - فاصله ها با علامت + جایگزین می شوند و کاراکترهای ویژه کدگذاری نمی شوند.
    روش فرم ویژگی روشی را که مرورگر برای ارسال داده‌های فرم به سرور استفاده می‌کند، مشخص می‌کند. فقط برای فیلدهای type="submit" و type="image" تنظیم کنید. مقدار ویژگی متد فرم را لغو می کند. گزینه ها:
    get مقدار پیش فرض است. داده های فرم (جفت نام/مقدار) به url اضافه شده و به سرور ارسال می شود: URL?name=value&name=value
    داده های پست فرم به عنوان یک درخواست http ارسال می شود.
    formnovalidate مشخص می کند که هنگام ارسال فرم، داده های فیلد فرم نباید تأیید شوند. مقدار ویژگی novalidate فرم را لغو می کند. بدون تعیین مقدار مشخصه قابل استفاده است.
    قالب هدف محل نمایش پاسخ دریافتی پس از ارسال فرم را تعیین می کند. فقط برای فیلدهای type="submit" و type="image" تنظیم کنید. مقدار مشخصه هدف فرم را لغو می کند.


    _parent – ​​پاسخ را در فریم والد بارگذاری می کند
    _top - پاسخ را در تمام صفحه بارگیری می کند
    Framename - پاسخ را در یک فریم با نام مشخص شده بارگذاری می کند.
    ارتفاع مقدار مشخصه شامل تعداد پیکسل ها بدون تعیین واحد اندازه گیری است. ارتفاع یک فیلد فرم از نوع "تصویر" را تنظیم می کند، برای مثال، . توصیه می شود ارتفاع و عرض میدان را همزمان تنظیم کنید.
    فهرست ارجاع به یک عنصر است به شما امکان می دهد تا زمانی که کاربر شروع به وارد کردن یک مقدار در فیلد مربوطه می کند، چندین گزینه را برای انتخاب انتخاب کنید.
    حداکثر به شما امکان می‌دهد ورودی مجاز داده‌های عددی را به حداکثر مقدار محدود کنید؛ مقدار مشخصه می‌تواند شامل یک عدد صحیح یا کسری باشد. توصیه می شود از این ویژگی همراه با ویژگی min استفاده کنید. با انواع فیلدهای زیر کار می کند: شماره، محدوده، تاریخ، تاریخ، تاریخ-محلی، ماه، زمان و هفته.
    بیشترین طول ویژگی حداکثر تعداد کاراکترهای وارد شده در فیلد را مشخص می کند. مقدار پیش فرض 524288 کاراکتر است.
    دقیقه به شما امکان می دهد ورودی عددی مجاز را به حداقل مقدار محدود کنید.
    چندگانه به کاربر اجازه می دهد چندین مقدار مشخصه را وارد کند که با کاما از هم جدا شده اند. برای فایل ها و آدرس های ایمیل اعمال می شود. بدون مقدار مشخصه مشخص شده است.
    نام نامی را مشخص می کند که برای دسترسی به عنصر استفاده می شود به عنوان مثال، در شیوه نامه های css. این مشابه با ویژگی id است.
    الگو به شما امکان می دهد استفاده را تعیین کنید عبارت منظمسینتکس داده هایی که باید اجازه داده شود در یک فیلد خاص وارد شوند. به عنوان مثال، الگو = "(3)-(3)" - براکت های مربع محدوده کاراکترهای قابل قبول را تنظیم می کنند، در این مورد - هر حروف کوچک، تعداد در پرانتزهای فرفری نشان می دهد که سه حرف کوچک و به دنبال آن یک خط تیره لازم است. سپس سه رقم در محدوده 0 تا 9.
    نگهدارنده مکان حاوی متنی است که قبل از پر شدن در قسمت ورودی نمایش داده می شود (اغلب این یک راهنمای ابزار است).
    فقط خواندنی به کاربر اجازه نمی دهد مقادیر عناصر فرم را تغییر دهد؛ انتخاب و کپی متن همچنان در دسترس است. بدون مقدار مشخصه مشخص شده است.
    ضروری پیامی را نشان می دهد که نشان می دهد این فیلد مورد نیاز است. در صورتی که کاربر بدون وارد کردن مقدار مورد نیاز در این قسمت اقدام به ارسال فرم کند، یک پیام هشدار بر روی صفحه نمایش داده می شود. بدون مقدار مشخصه مشخص شده است.
    اندازه پهنای قابل مشاهده فیلد را بر حسب کاراکتر تنظیم می کند. مقدار پیش فرض 20 است. با انواع فیلد زیر کار می کند: متن، جستجو، تلفن، آدرس اینترنتی، ایمیل و رمز عبور.
    src نشانی اینترنتی تصویر مورد استفاده به عنوان دکمه ارسال فرم را مشخص می کند. فقط برای میدان نشان داده شده است .
    گام استفاده برای عناصری که نیاز به ورودی مقادیر عددی دارند، میزان افزایش یا کاهش مقادیر را در طی فرآیند تنظیم محدوده (مرحله) نشان می دهد.
    نوع دکمه - یک دکمه ایجاد می کند.
    چک باکس - یک فیلد ورودی را به یک چک باکس تبدیل می کند که می تواند بررسی یا پاک شود، به عنوان مثال.
    من یک ماشین دارم
    رنگ - پالت های رنگی را در مرورگرهای پشتیبانی ایجاد می کند و به کاربران امکان می دهد مقادیر رنگ را در قالب هگزادسیمال انتخاب کنند.
    تاریخ - به شما امکان می دهد تاریخ را با فرمت dd.mm.yyyy وارد کنید.
    روز تولد:
    datetime-local - به شما امکان می دهد با استفاده از الگوی dd.mm.yyyy hh:mm تاریخ و ساعتی را وارد کنید که با یک حرف بزرگ انگلیسی T از هم جدا شده اند.
    روز تولد - روز و ساعت:
    ایمیل - مرورگرهایی که از این ویژگی پشتیبانی می کنند، از کاربر انتظار دارند که داده هایی را وارد کند که با نحو آدرس های ایمیل مطابقت دارد.
    پست الکترونیک:
    file - به شما امکان می دهد فایل ها را از رایانه کاربر دانلود کنید.
    انتخاب فایل:
    hidden - کنترلی را پنهان می کند که توسط مرورگر نمایش داده نمی شود و کاربر را از تغییر مقادیر پیش فرض جلوگیری می کند.
    تصویر - یک دکمه ایجاد می کند که به شما امکان می دهد یک تصویر را به جای متن روی دکمه درج کنید.
    ماه - به کاربر امکان می دهد با استفاده از الگوی yyyy-mm عدد سال و ماه را وارد کند.
    عدد - برای وارد کردن مقادیر صحیح در نظر گرفته شده است. ویژگی‌های min، max و step آن به ترتیب حد بالا، پایین و گام بین مقادیر را مشخص می‌کنند. این ویژگی ها برای همه عناصری که دارای شاخص های عددی هستند در نظر گرفته شده است. مقادیر پیش فرض آنها به نوع عنصر بستگی دارد.
    لطفا مقدار را ذکر کنید (از 1 تا 5):
    رمز عبور - فیلدهای متنی را در فرم ایجاد می کند، در حالی که کاراکترهای وارد شده توسط کاربر با ستاره ها، گلوله ها یا سایر نمادهای نصب شده توسط مرورگر جایگزین می شوند.
    رمز عبور را وارد کنید:
    رادیو - یک سوئیچ ایجاد می کند - یک کنترل به شکل یک دایره کوچک که می تواند روشن یا خاموش شود.
    گیاه خواری:
    محدوده - به شما امکان می دهد یک عنصر رابط مانند یک نوار لغزنده، حداقل / حداکثر ایجاد کنید - به شما امکان می دهد محدوده انتخاب را تنظیم کنید.
    تنظیم مجدد - دکمه ای ایجاد می کند که فیلدهای فرم را از داده های وارد شده توسط کاربر پاک می کند.
    جستجو - یک فیلد جستجو را نشان می دهد، به طور پیش فرض فیلد ورودی به شکل مستطیل است.
    جستجو کردن:
    ارسال - یک دکمه استاندارد ایجاد می کند که با کلیک ماوس فعال می شود. این دکمه اطلاعات را از فرم جمع آوری کرده و برای پردازش ارسال می کند.
    text - فیلدهای متنی را در فرم ایجاد می کند و یک فیلد متنی تک خطی برای ورودی متن خروجی می دهد.
    زمان - به شما امکان می دهد با استفاده از الگوی hh:mm زمان را در قالب 24 ساعته وارد کنید. در مرورگرهای پشتیبانی کننده، به عنوان یک کنترل فیلد ورودی عددی با مقدار قابل ویرایش توسط ماوس ظاهر می شود و فقط اجازه می دهد تا مقادیر زمانی را وارد کنید.
    زمان را مشخص کنید:
    url - این فیلد برای تعیین URL ها در نظر گرفته شده است.
    صفحه نخست:
    هفته - ابزار اشاره گر مربوطه به کاربر این امکان را می دهد که یک هفته از سال را انتخاب کند و پس از آن ورود داده ها را در قالب nn-yyyy ارائه می دهد. بسته به سال، تعداد هفته ها می تواند 52 یا 53 باشد.
    هفته را مشخص کنید:
    ارزش متنی را که روی یک دکمه، در یک فیلد یا در متن مرتبط ظاهر می شود، تعیین می کند. برای فیلدهای نوع فایل مشخص نشده است.
    عرض مقدار مشخصه شامل تعداد پیکسل است. به شما امکان می دهد عرض فیلدهای فرم را تنظیم کنید.

    4. فیلدهای ورودی متن

    عنصر به جای عنصر استفاده می شود زمانی که نیاز به ایجاد فیلدهای متنی بزرگ دارید. متن نمایش داده شده به عنوان مقدار اصلی در داخل تگ قرار می گیرد. ابعاد فیلد با استفاده از ویژگی های cols - ابعاد افقی، ردیف ها - ابعاد عمودی تنظیم می شود. ارتفاع میدان را می توان با استفاده از ویژگی height تنظیم کرد. همه اندازه ها بر اساس اندازه یک کاراکتر در فونت monospace محاسبه می شوند.

    جدول 4. ویژگی های برچسب

    7. دکمه ها

    عنصر دکمه های قابل کلیک ایجاد می کند. بر خلاف دکمه های ایجاد شده ( , , , )، در داخل عنصر .

    دکمه‌ها به کاربران اجازه می‌دهند داده‌ها را به فرم ارسال کنند، محتوای فرم را پاک کنند یا اقدام دیگری انجام دهند. می توانید حاشیه ایجاد کنید، پس زمینه را تغییر دهید، و متن را روی یک دکمه تراز کنید.

    جدول 9. ویژگی های برچسب
    صفت معنی/توضیح
    فوکوس خودکار هنگام بارگیری صفحه، فوکوس را روی دکمه تنظیم می کند.
    معلول دکمه را غیرفعال می کند و غیرقابل کلیک می کند.
    فرم یک یا چند فرم را نشان می دهد که این دکمه به آنها تعلق دارد. مقدار ویژگی، شناسه فرم مربوطه است.
    شکل گیری مقدار مشخصه حاوی URL مربوط به مدیریت داده فرم است که با کلیک روی دکمه ارسال می شود. فقط برای نوع دکمه = "submit" . مقدار مشخصه action مشخص شده برای عنصر را لغو می کند .
    شکل شکل نوع رمزگذاری داده‌های فرم را قبل از ارسال به سرور هنگام کلیک روی دکمه‌هایی مانند type="submit" تنظیم می‌کند. مقدار مشخصه enctype مشخص شده برای عنصر را لغو می کند . مقادیر ممکن:
    application/x-www-form-urlencoded مقدار پیش فرض است. همه کاراکترها قبل از ارسال کدگذاری می شوند.
    چند بخشی/فرم-داده - کاراکترها کدگذاری نمی شوند. هنگامی که فایل ها با استفاده از فرم آپلود می شوند استفاده می شود.
    متن / ساده - کاراکترها کدگذاری نمی شوند و فاصله ها با علامت + جایگزین می شوند.
    روش فرم مشخصه روشی را که مرورگر برای ارسال فرم استفاده می کند مشخص می کند. مقدار ویژگی متد تعیین شده برای عنصر را لغو می کند . فقط برای دکمه هایی از نوع "ارسال" مشخص شده است. مقادیر ممکن:
    get - داده های فرم (جفت نام/مقدار) به آدرس اینترنتی اضافه شده و به سرور ارسال می شود. این روش دارای محدودیت هایی در اندازه داده های ارسالی است و برای ارسال رمز عبور و اطلاعات محرمانه مناسب نیست.
    داده های پست از فرم به عنوان یک درخواست http اضافه می شود. این روش قابل اعتمادتر و امن تر از get است و هیچ محدودیتی در اندازه ندارد.
    formnovalidate ویژگی مشخص می‌کند که داده‌های فرم نباید پس از ارسال تأیید شوند. فقط برای دکمه هایی از نوع "ارسال" مشخص شده است.
    قالب هدف ویژگی مشخص می کند که پس از ارسال فرم، نتیجه در کدام پنجره نمایش داده شود. فقط برای دکمه هایی از نوع "ارسال" مشخص شده است. مقدار مشخصه هدف تعیین شده برای عنصر را لغو می کند .
    _blank - پاسخ را در یک پنجره/برگه جدید بارگذاری می کند
    _self - پاسخ را در همان پنجره بارگیری می کند (پیش فرض)
    _parent - پاسخ را در فریم والد بارگذاری می کند
    _top - پاسخ را در تمام صفحه بارگیری می کند
    Framename - پاسخ را در یک فریم با نام مشخص شده بارگذاری می کند.
    نام نام دکمه را تنظیم می کند، مقدار مشخصه متن است. برای پیوند دادن به داده های فرم پس از ارسال فرم، یا پیوند دادن به دکمه(های) معین در جاوا اسکریپت استفاده می شود.
    نوع نوع دکمه را مشخص می کند. مقادیر ممکن:
    دکمه - دکمه قابل کلیک
    تنظیم مجدد - دکمه تنظیم مجدد، مقدار اصلی را برمی گرداند
    ارسال - دکمه برای ارسال داده های فرم.
    ارزش مقدار پیش فرض ارسال شده را با کلیک روی دکمه تنظیم می کند.

    8. چک باکس ها و دکمه های رادیویی در فرم ها

    چک باکس ها در فرم ها با استفاده از ساختار تنظیم می شوند و سوئیچ - با استفاده از .

    چک باکس ها، بر خلاف دکمه های رادیویی، می توانند در یک شکل روی چند تنظیم شوند. اگر مشخصه علامت زده برای چک باکس ها مشخص شده باشد، پس از بارگیری صفحه، کادرهای چک در فیلدهای فرم مربوطه از قبل انتخاب خواهند شد.

    عنصر

    در حین پیمایش در وب سایت ها، کاربر بیشتر فقط روی آن کلیک می کند پیوندهابرای پیمایش صفحات وب

    اما واضح است که کاربر گاهی نیاز به ارائه خود دارد فیلدهای ورودی. این نوع تعاملات عبارتند از:

    • ثبت نام و ورود در وب سایت ها؛
    • وارد کردن اطلاعات شخصی (نام، آدرس، اطلاعات کارت اعتباری و غیره)؛
    • فیلتر کردن محتوا (با استفاده از لیست های کشویی، چک باکس ها و غیره)؛
    • انجام جستجو؛
    • دانلود فایل ها

    برای برآوردن این نیازها، HTML تعاملی ارائه می دهد کنترل هاتشکیل می دهد:

    • فیلدهای متنی (برای یک یا چند خط)؛
    • سوئیچ ها؛
    • چک باکس ها؛
    • لیست های کشویی؛
    • ابزارک برای دانلود؛
    • دکمه های ارسال

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

    عنصر

    یک عنصر بلوکی است که تعریف می کند در ارتباط بودنبخشی از یک صفحه وب در نتیجه تمام کنترل ها (مانند ,