تشکیل می دهد

اکثر سایت ها و برنامه ها دارای فرم وب هستند. سایت‌های جوک، مانند DoWebsites Need To Look Exactly Sie In Every Browser.com ، ممکن است فرمی نداشته باشند، اما حتی Machine Learning Workshop.com (MLW) که به عنوان یک جوک روز اول آوریل ایجاد شد، شکلی دارد، هرچند جعلی. یکی "تماس برای اقدام" اصلی MLW یک فرم ثبت نام برای ماشین ها برای ثبت نام در کارگاه است. این فرم در یک عنصر <form> موجود است.

عنصر <form> HTML یک نشانه سند حاوی کنترل های تعاملی برای ارسال اطلاعات را شناسایی می کند. تودرتو در یک <form> همه کنترل‌های فرم تعاملی (و غیرتعاملی) را خواهید یافت که آن فرم را تشکیل می‌دهند.

HTML قدرتمند است. این بخش بر قدرت HTML تمرکز می کند و آنچه را که HTML می تواند بدون افزودن جاوا اسکریپت انجام دهد را پوشش می دهد. استفاده از داده های فرم در سمت سرویس گیرنده برای به روز رسانی UI به نوعی معمولا شامل CSS یا جاوا اسکریپت است که در اینجا مورد بحث قرار نمی گیرد. یک دوره آموزشی کامل Forms وجود دارد. ما آن بخش را در اینجا کپی نمی کنیم، اما چندین کنترل فرم و ویژگی های HTML را معرفی می کنیم که به آنها قدرت می بخشد.

با استفاده از فرم ها، می توانید به کاربران اجازه دهید تا با وب سایت یا برنامه شما تعامل داشته باشند، اطلاعات وارد شده را تأیید کنند و داده ها را به سرور ارسال کنند. ویژگی‌های HTML می‌توانند به کاربر اجازه دهند تا کنترل‌های فرم را انتخاب کند یا مقداری را وارد کند. ویژگی های HTML می توانند معیارهای خاصی را تعریف کنند که مقدار باید مطابقت داشته باشد تا معتبر باشد. هنگامی که کاربر سعی می کند فرم را ارسال کند، تمام مقادیر کنترل فرم از طریق اعتبار سنجی محدودیت سمت سرویس گیرنده می گذرد و تا زمانی که داده ها با معیارهای مورد نیاز مطابقت نداشته باشند، می توانند از ارسال جلوگیری کنند. همه بدون جاوا اسکریپت همچنین می‌توانید این ویژگی را غیرفعال کنید: تنظیم ویژگی novalidate در <form> یا اغلب، formnovalidate در یک دکمه، ذخیره داده‌های فرم برای تکمیل بعدی، از تأیید اعتبار جلوگیری می‌کند.

ارسال فرم ها

فرم ها زمانی ارسال می شوند که کاربر یک دکمه ارسال را که در داخل فرم قرار دارد فعال کند. هنگام استفاده از <input> برای دکمه ها، "مقدار" برچسب دکمه است و در دکمه نمایش داده می شود. هنگامی که از <button> استفاده می کنید، برچسب متنی است بین تگ های باز و بسته شدن <button> . دکمه ارسال را می توان به دو روش نوشت:

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

برای یک فرم بسیار ساده، به یک عنصر <form> ، با تعدادی ورودی فرم در داخل، و یک دکمه ارسال نیاز دارید. با این حال، ارسال یک فرم بیشتر از آن است.

ویژگی های عنصر <form> روش HTTP را که توسط آن فرم ارسال می شود و URL که ارسال فرم را پردازش می کند تنظیم می کند. بله، فرم ها را می توان ارسال کرد، پردازش کرد، و یک صفحه جدید را می توان بدون جاوا اسکریپت بارگیری کرد. عنصر <form> آنقدر قدرتمند است.

مقادیر action و method عنصر <form> به ترتیب نشانی اینترنتی را که داده های فرم را پردازش می کند و روش HTTP مورد استفاده برای ارسال داده ها را مشخص می کند. به طور پیش فرض، داده های فرم به صفحه فعلی ارسال می شود. در غیر این صورت، ویژگی action را روی URL جایی که داده ها باید ارسال شوند، تنظیم کنید.

داده های ارسالی از جفت نام/مقدار کنترل های فرم مختلف فرم تشکیل شده است. به طور پیش‌فرض، این شامل تمام کنترل‌های فرم تو در تو در فرم است که دارای name هستند. با این حال، با ویژگی form ، می‌توان کنترل‌های فرم را خارج از <form> درج کرد و کنترل‌های فرم را که در داخل <form> قرار دارند حذف کرد. ویژگی form که در کنترل‌های فرم و <fieldset> پشتیبانی می‌شود، id فرم کنترلی که با آن مرتبط است را به عنوان مقدار می‌گیرد، نه لزوماً شکلی که در آن تودرتو است. این بدان معناست که کنترل‌های فرم نیازی به تودرتوی فیزیکی ندارند. یک <form> .

ویژگی method پروتکل HTTP درخواست را تعریف می کند: به طور کلی GET یا POST . با GET ، داده‌های فرم به‌عنوان یک رشته پارامتر از جفت‌های name=value ارسال می‌شود که به URL action اضافه می‌شود.

با POST ، داده ها به بدنه درخواست HTTP اضافه می شوند. هنگام ارسال داده های ایمن، مانند رمزهای عبور و اطلاعات کارت اعتباری، همیشه از POST استفاده کنید.

روش DIALOG نیز وجود دارد. اگر یک <form method="dialog"> در یک <dialog> باشد، با ارسال فرم، گفتگو بسته می شود. یک رویداد ارسال وجود دارد اگرچه داده ها نه پاک شده و نه ارسال شده است. باز هم بدون جاوا اسکریپت. این در بخش گفتگو مورد بحث قرار گرفته است. فقط توجه داشته باشید، چون این فرم را ارسال نمی کند، احتمالاً می خواهید هم formmethod="dialog" و هم formnovalidate در دکمه ارسال قرار دهید.

دکمه‌های فرم می‌توانند بیش از ویژگی‌هایی که در ابتدای این بخش توضیح داده شد، داشته باشند. اگر این دکمه شامل formaction ، formenctype ، formmethod ، formnovalidate یا ویژگی formtarget باشد، مقادیر تنظیم شده روی دکمه فعال‌کننده ارسال فرم بر action ، enctype ، method و target در <form> اولویت دارند. اعتبار سنجی محدودیت قبل از ارسال فرم انجام می شود، اما تنها در صورتی که نه formnovalidate بر روی دکمه ارسال فعال شده وجود داشته باشد و نه در <form> novalidate داشته باشد.

برای اینکه بفهمید از کدام دکمه برای ارسال فرم استفاده شده است، به دکمه یک name بدهید. دکمه‌های بدون نام یا ارزش همراه با داده‌های فرم هنگام ارسال فرم ارسال نمی‌شوند.

پس از ارسال فرم

هنگامی که کاربر یک فرم آنلاین تکمیل شده را ارسال می کند، نام و مقادیر کنترل های فرم مربوطه ارسال می شود. نام مقدار مشخصه name است. مقادیر از محتویات ویژگی value یا مقدار وارد شده یا انتخاب شده توسط کاربر می آیند. مقدار یک <textarea> متن درونی آن است. مقدار یک <select> value <option> انتخاب شده است یا، اگر <option> دارای ویژگی value نباشد، مقدار متن داخلی گزینه انتخاب شده است.

<form method="GET">
  <label for="student">Pick a student:</label>
  <select name="student" id="student">
    <option value="hoover">Hoover Sukhdeep</option>
    <option>Blendan Smooth</option>
    <option value="toasty">Toasty McToastface</option>
  </select>
  <input type="submit" value="Submit Form">
</form>

با انتخاب "Hoover Sukhdeep" (یا انجام هیچ کاری، همانطور که مرورگر نشان می دهد و بنابراین به طور پیش فرض مقدار گزینه اول را انتخاب می کند) و سپس کلیک کردن روی دکمه ارسال، این صفحه را مجددا بارگیری می کند و URL را روی:

https://web.dev/learn/html/forms?student=hoover

از آنجایی که گزینه دوم دارای ویژگی value نیست، متن داخلی به عنوان مقدار ارسال می شود. با انتخاب «Blendan Smooth» و کلیک بر روی دکمه ارسال، این صفحه مجدداً بارگیری می‌شود و نشانی اینترنتی روی آن تنظیم می‌شود:

https://web.dev/learn/html/forms?student=Blendan+Smooth

هنگامی که یک فرم ارسال می‌شود، اطلاعات ارسالی شامل نام‌ها و مقادیر همه کنترل‌های فرم نام‌گذاری‌شده است که دارای name هستند به جز چک باکس‌های انتخاب‌نشده، دکمه‌های رادیویی انتخاب‌نشده، و نام‌ها و مقادیر هر دکمه‌ای غیر از دکمه‌ای که ارسال کرده است. فرم. برای سایر کنترل‌های فرم، اگر کنترل فرم دارای نام باشد، اما هیچ مقداری وارد یا پیش‌فرض نشده باشد، name کنترل فرم با یک مقدار خالی ارسال می‌شود.

22 نوع ورودی وجود دارد، بنابراین ما نمی توانیم همه آنها را پوشش دهیم. فقط توجه داشته باشید که وقتی می خواهید کاربر اطلاعات را وارد کند، گنجاندن یک مقدار اختیاری است و اغلب ایده بدی است. برای عناصر <input> که کاربر نمی‌تواند مقدار را ویرایش کند، همیشه باید یک مقدار، از جمله برای عناصر ورودی با یک نوع hidden ، radio ، checkbox ، submit ، button و reset وارد کنید.

استفاده از name منحصر به فرد برای کنترل‌های فرم، پردازش داده‌های سمت سرور را ساده‌تر می‌کند و توصیه می‌شود، چک باکس‌ها و دکمه‌های رادیویی از این قاعده مستثنی هستند.

دکمه های رادیویی

اگر تا به حال متوجه شده اید که وقتی یک دکمه رادیویی را در یک گروه از دکمه های رادیویی انتخاب می کنید، هر بار فقط یک دکمه رادیویی می تواند انتخاب شود، این به دلیل ویژگی name است. این افکت تنها یک می تواند انتخاب شود با دادن name یکسان به هر دکمه رادیویی در یک گروه ایجاد می شود.

یک name باید برای گروه منحصر به فرد باشد: اگر به طور تصادفی از یک name برای دو گروه جداگانه استفاده کنید، انتخاب یک دکمه رادیویی در گروه دوم، هر انتخابی را که در گروه اول با همان name انجام شده است، لغو می‌کند.

name به همراه value دکمه رادیویی انتخاب شده همراه با فرم ارسال می شود. مطمئن شوید که هر دکمه رادیویی دارای یک value مرتبط (و معمولاً منحصر به فرد) است. مقادیر دکمه های رادیویی انتخاب نشده ارسال نمی شوند.

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

اگر می‌خواهید صفحه را با یکی از دکمه‌های رادیویی در گروهی با نام انتخاب شده بارگیری کنید، ویژگی checked را وارد کنید. این دکمه رادیویی با کلاس شبه CSS :default مطابقت دارد، حتی اگر کاربر رادیوی دیگری را انتخاب کند. دکمه رادیویی انتخاب شده در حال حاضر با شبه کلاس :checked مطابقت دارد.

اگر کاربر باید یک رادیو کنترل را از یک گروه از دکمه‌های رادیویی انتخاب کند، ویژگی required را حداقل به یکی از کنترل‌ها اضافه کنید. درج required در یک دکمه رادیویی در یک گروه، انتخابی را برای ارسال فرم ضروری می‌سازد، اما لازم نیست که رادیویی با ویژگی انتخاب شده باشد تا معتبر باشد. همچنین، به وضوح در <legend> نشان دهید که کنترل فرم مورد نیاز است . برچسب‌گذاری گروه‌های دکمه‌های رادیویی به همراه هر دکمه جداگانه در ادامه توضیح داده می‌شود.

چک باکس ها

این برای همه چک باکس های یک گروه معتبر است که name یکسانی داشته باشند. فقط چک باکس های انتخاب شده name و value آنها همراه با فرم ارسال می شود. اگر چندین چک باکس با یک نام انتخاب کرده باشید، همان نام با مقادیر (امیدواریم) متفاوت ارسال می‌شود. اگر چندین کنترل فرم با یک نام داشته باشید، حتی اگر همه آنها چک باکس نباشند، همه آنها ارسال می شوند و با حروف علامت از هم جدا می شوند.

اگر value روی یک چک باکس وارد نکنید، مقدار چک باکس‌های انتخاب‌شده به‌طور پیش‌فرض روی on خواهد بود، که احتمالاً مفید نیست. اگر سه چک باکس به نام chk داشته باشید و همه آنها علامت زده شده باشند، فرم ارسالی قابل رمزگشایی نخواهد بود:

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

برای اینکه یک چک باکس مورد نیاز باشد، ویژگی required را اضافه کنید. همیشه به کاربر اطلاع دهید که یک چک باکس باید علامت زده شود، یا زمانی که هر گونه کنترل فرم مورد نیاز است. اضافه کردن required به یک چک باکس فقط آن چک باکس را ضروری می کند. این بر چک باکس های دیگر با همین نام تأثیر نمی گذارد.

برچسب ها و مجموعه فیلدها

برای اینکه کاربران بدانند چگونه یک فرم را پر کنند، فرم باید در دسترس باشد. هر کنترل فرم باید دارای یک برچسب باشد. همچنین می‌خواهید گروه‌هایی از کنترل‌های فرم را برچسب‌گذاری کنید. در حالی که نواحی ورودی، انتخاب و متن جداگانه با <label> برچسب‌گذاری می‌شوند، گروه‌های کنترل‌های فرم با محتوای <legend> از <fieldset> که آنها را گروه‌بندی می‌کند برچسب‌گذاری می‌شوند.

در مثال های قبلی، ممکن است متوجه شده باشید که هر کنترل فرم به جز دکمه ارسال دارای یک <label> است. برچسب ها کنترل های فرم را با نام های قابل دسترس ارائه می دهند. دکمه ها نام قابل دسترس خود را از محتوا یا ارزش خود دریافت می کنند. همه کنترل‌های فرم دیگر به یک <label> مرتبط نیاز دارند. اگر هیچ برچسب مرتبطی وجود نداشته باشد، مرورگر همچنان کنترل‌های فرم شما را ارائه می‌کند، اما کاربران نمی‌دانند چه اطلاعاتی مورد انتظار است.

برای ارتباط صریح یک کنترل فرم با یک <label> ، ویژگی for را در <label> وارد کنید: مقدار، id کنترل فرم است که با آن مرتبط است.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">

اسم شما

مرتبط کردن برچسب‌ها با کنترل‌های فرم دارای چندین مزیت است. برچسب‌ها با ارائه یک نام قابل دسترسی، کنترل‌های فرم را برای کاربران صفحه‌خوان در دسترس قرار می‌دهند. برچسب ها نیز "مناطق ضربه" هستند. آنها با افزایش مساحت سایت را برای کاربرانی که مشکل مهارت دارند قابل استفاده تر می کنند. اگر از ماوس استفاده می کنید، سعی کنید روی برچسب "نام شما" روی هر جایی کلیک کنید. انجام این کار باعث تمرکز ورودی می شود.

برای ارائه برچسب های ضمنی، کنترل فرم را بین تگ های باز و بسته <label> قرار دهید. این به همان اندازه از منظر نمایشگر و دستگاه اشاره گر قابل دسترسی است، اما قلاب یک ظاهر طراحی شده مانند برچسب صریح را ارائه نمی دهد.

<label>Your name
  <input type="text" name="name">
</label>

اسم شما

از آنجایی که برچسب‌ها «مناطق ضربه‌خورده» هستند، عناصر تعاملی را در یک برچسب صریح یا هیچ مؤلفه تعاملی دیگری غیر از کنترل فرم برچسب‌گذاری شده در یک برچسب ضمنی وارد نکنید. به عنوان مثال، اگر یک پیوند را در یک برچسب قرار دهید، در حالی که مرورگر HTML را رندر می کند، کاربران شما اگر روی برچسب کلیک کنند تا کنترل فرم را وارد کنند اما به صفحه جدیدی هدایت شوند، سردرگم خواهند شد.

به طور کلی، <label> قبل از کنترل فرم قرار می گیرد به جز در مورد دکمه های رادیویی و چک باکس ها. این مورد نیاز نیست این فقط الگوی UX رایج است. مجموعه Learn Forms اطلاعاتی در مورد طراحی فرم دارد.

برای گروه‌های دکمه‌های رادیویی و چک‌باکس‌ها، برچسب نام قابل دسترسی برای کنترل فرمی که با آن مرتبط است را ارائه می‌کند. اما گروه کنترل ها و برچسب های آنها نیز به یک برچسب نیاز دارند. برای برچسب گذاری گروه، همه عناصر را در یک <fieldset> گروه بندی کنید، با <legend> برچسب را برای گروه ارائه می دهد.

<fieldset>
  <legend>Who is your favorite student?</legend>
  <ul>
    <li>
      <label>
        <input type="radio" value="blendan" name="machine"> Blendan Smooth
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="toasty" name="machine"> Toasty McToastface
      </label>
    </li>
  </ul>
</fieldset>

در این مثال، <label> ضمنی هر یک دکمه رادیویی را نشان می دهد و <legend> برچسب گروه دکمه های رادیویی را ارائه می دهد. تودرتو کردن یک <fieldset> در داخل <fieldset> دیگر یک روش استاندارد است. به عنوان مثال، اگر یک فرم نظرسنجی از بسیاری از سؤالات است که به گروه‌هایی از سؤالات مرتبط تقسیم شده است، «دانش‌آموز مورد علاقه» <fieldset> ممکن است در <fieldset> دیگری با عنوان "مورد علاقه‌های شما" قرار گیرد:

<fieldset>
  <legend>Your favorites:</legend>
  <ul start="6">
    <li>
      <fieldset>
        <legend>Who is your favorite student?</legend>
        <ul>
          <li>
            <!-- the rest of the code here -->

ظاهر پیش فرض این عناصر منجر به استفاده کم از آنها شده است، اما <legend> و <fieldset> می توان با CSS استایل بندی کرد . علاوه بر تمام ویژگی‌های سراسری، <fieldset> از ویژگی‌های name ، disabled و form نیز پشتیبانی می‌کند. وقتی یک مجموعه فیلد را غیرفعال می‌کنید، همه کنترل‌های فرم تودرتو غیرفعال می‌شوند. نه صفات name و نه form کاربرد زیادی در <fieldset> ندارند. از name می‌توان برای دسترسی به مجموعه فیلدها با جاوا اسکریپت استفاده کرد، اما خود مجموعه فیلدها در داده‌های ارسالی گنجانده نشده است (کنترل‌های فرم نام‌گذاری شده تو در تو گنجانده شده‌اند).

انواع ورودی و صفحه کلید پویا

همانطور که قبلا ذکر شد، 22 نوع مختلف ورودی وجود دارد. در برخی موارد، هنگامی که کاربر روی دستگاهی با صفحه کلید پویا است که فقط در صورت نیاز نمایش داده می شود، مانند تلفن، نوع ورودی استفاده شده، نوع صفحه کلید نمایش داده شده را تعیین می کند. صفحه کلید پیش فرض نشان داده شده را می توان برای نوع ورودی مورد نیاز بهینه کرد. به عنوان مثال، نوع tel صفحه کلیدی را نشان می دهد که برای وارد کردن شماره تلفن بهینه شده است. email شامل @ و . ; و صفحه کلید پویا برای url شامل دو نقطه و علامت اسلش است. متأسفانه، آیفون هنوز : را در صفحه کلید پویا پیش فرض برای انواع ورودی url درج نمی کند.

صفحه کلید برای <input type="tel"> در iPhone و دو گوشی Android مختلف:

صفحه‌کلیدهای <input type="email"> در iPhone و دو تلفن Android مختلف:

دسترسی به میکروفون و دوربین

نوع ورودی فایل <input type="file"> آپلود فایل ها از طریق فرم ها را امکان پذیر می کند. فایل‌ها می‌توانند از هر نوع باشند، با ویژگی accept تعریف و محدود شوند. فهرست انواع فایل های قابل قبول می تواند فهرستی از پسوندهای فایل جدا شده با کاما، نوع سراسری یا ترکیبی از انواع و پسوندهای جهانی باشد. برای مثال، accept="video/*, .gif" هر گونه فایل ویدئویی یا گیف متحرک را می پذیرد. از " audio/* " برای فایل های صوتی، " video/* " برای فایل های ویدئویی و " image/* " برای فایل های تصویری استفاده کنید.

اگر قرار است فایل رسانه ای جدیدی با استفاده از دوربین یا میکروفون کاربر ایجاد شود، ویژگی capture شمارش شده، که در مشخصات ضبط رسانه تعریف شده است، قابل استفاده است. می‌توانید مقدار user را برای دستگاه‌های ورودی رو به کاربر یا environment دوربین پشتی تلفن یا میکروفون تنظیم کنید. به طور کلی، استفاده از capture ، بدون مقدار، کار می کند زیرا کاربر قرار است دستگاه ورودی را که می خواهد استفاده کند، انتخاب کند.

<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

اعتبار سنجی داخلی

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

برخی از انتخابگرهای CSS وجود دارند که کنترل‌های فرم را بر اساس required ویژگی‌های HTML از جمله :required و :optional مطابقت می‌دهند. :default اگر checked سخت کد شده است. و :enabled یا :disabled بسته به اینکه عنصر تعاملی باشد و ویژگی disabled وجود داشته باشد یا خیر. شبه کلاس :read-write عناصر را با مجموعه contenteditable و کنترل‌های فرم که به طور پیش‌فرض قابل ویرایش هستند، مانند number ، password ، و انواع ورودی text (اما نه چک باکس، دکمه‌های رادیویی، یا نوع hidden و غیره) مطابقت می‌دهد. اگر یک عنصر به طور معمول قابل نوشتن دارای مجموعه ویژگی readonly باشد، در عوض با :read-only مطابقت دارد.

همانطور که کاربر اطلاعات را در کنترل‌های فرم وارد می‌کند، انتخابگرهای رابط کاربری CSS، از جمله :valid ، :invalid ، :in-range ، و :out-of-range بسته به وضعیت، روشن و خاموش می‌شوند. وقتی کاربر از کنترل فرم خارج می شود، کلاس شبه :user-invalid یا :user-valid هنوز به طور کامل پشتیبانی نشده است مطابقت دارد.

می‌توانید از CSS برای ارائه نشانه‌هایی در مورد اینکه آیا کنترل‌های فرم در تعامل کاربر با فرم مورد نیاز و معتبر هستند، استفاده کنید. حتی می‌توانید از CSS برای جلوگیری از کلیک کردن روی دکمه ارسال تا زمانی که فرم معتبر باشد، استفاده کنید:

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

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

CSS کاربردی به طور مداوم بر اساس وضعیت فعلی UI به روز می شود. به عنوان مثال، هنگامی که انواع ورودی را با محدودیت ها وارد می کنید، مانند انواع email ، number ، url و تاریخ، اگر مقدار غیر تهی باشد (خالی نیست) و مقدار فعلی یک ایمیل، شماره، url، تاریخ یا زمان معتبر نیست. ، شبه کلاس :invalid CSS مطابقت خواهد داشت. این به روز رسانی ثابت با اعتبارسنجی محدودیت داخلی HTML متفاوت است، که تنها زمانی رخ می دهد که کاربر تلاش می کند فرم را ارسال کند.

اعتبار سنجی محدودیت داخلی فقط مربوط به محدودیت های تنظیم شده با ویژگی های HTML است. در حالی که می‌توانید یک عنصر را بر اساس کلاس‌های شبه :required و :valid / :invalid استایل دهید، مرورگر پیام‌های خطای ناشی از خطاهای مبتنی بر ویژگی‌های required ، pattern ، min ، max و حتی type را ارائه می‌کند که در فرم ارسال می‌شوند.

وقتی می‌خواهیم بدون انتخاب دانش‌آموز مورد علاقه، فرم را ارسال کنیم، اعتبار سنجی محدودیت‌ها به دلیل یک خطای validityState.valueMissing از ارسال فرم جلوگیری می‌کند.

اگر هر یک از ویژگی های validityState true باشد، ارسال مسدود می شود و مرورگر یک پیغام خطا را در اولین کنترل فرم نادرست نمایش می دهد و به آن فوکوس می دهد. هنگامی که کاربر ارسال فرم را فعال می کند و مقادیر نامعتبر وجود دارد، اولین کنترل فرم نامعتبر یک پیام خطا نشان می دهد و فوکوس را دریافت می کند. اگر یک کنترل مورد نیاز تنظیم مقدار نداشته باشد، اگر یک مقدار عددی خارج از محدوده باشد، یا اگر مقداری از نوع مورد نیاز ویژگی type نباشد، فرم اعتبارسنجی نمی‌شود، ارسال نمی‌شود و یک پیام خطا ظاهر می‌شود.

اگر یک number ، تاریخ یا مقدار زمان کمتر از حداقل min حداقل یا بالاتر از حداکثر مجموعه max باشد، کنترل :out-of-range (و :invalid ) خواهد بود و کاربر از valididityState.rangeUnderflow ، validityState.rangeOverflow مطلع می شود. هنگام تلاش برای ارسال فرم، خطای validityState.rangeOverflow . اگر مقدار با مقدار step خارج باشد، چه به طور صریح تنظیم شده باشد و چه به طور پیش فرض روی 1 باشد، کنترل :out-of-range (و :invalid ) خواهد بود و یک خطای validityState.stepMismatch وجود خواهد داشت. خطا به صورت حباب ظاهر می شود و به طور پیش فرض اطلاعات مفیدی در مورد نحوه اصلاح اشتباه ارائه می دهد.

ویژگی‌های مشابهی برای طول مقادیر وجود دارد: ویژگی‌های minlength و maxlength به کاربر از یک خطا با validityState.tooLong یا validityState.tooShort هنگام ارسال هشدار می‌دهند. maxlength نیز از وارد کردن کاراکترهای زیاد توسط کاربر جلوگیری می کند.

استفاده از ویژگی maxlength می تواند منجر به تجربه کاربری ضعیف شود. به طور کلی تجربه بهتری است که به کاربر اجازه دهید بیش از طول کاراکتر مجاز را وارد کند و یک شمارنده، به صورت اختیاری به شکل عنصر <output> ، که همراه با فرم ارسال نمی‌شود، به او امکان می‌دهد متن را تا زمان خروجی ویرایش کند. نشان می دهد که از حداکثر طول مجاز تجاوز نکرده است. maxlength می تواند در HTML شما گنجانده شود. مانند همه چیزهایی که بحث کردیم، بدون جاوا اسکریپت کار می کند. سپس، در بارگذاری، می توان از مقدار ویژگی maxlength برای ایجاد این شمارنده کاراکتر در جاوا اسکریپت استفاده کرد.

به نظر می رسد برخی از انواع ورودی دارای محدودیت های پیش فرض هستند، اما اینطور نیست. به عنوان مثال، نوع ورودی tel یک صفحه کلید عددی تلفن را در دستگاه هایی با صفحه کلید پویا ارائه می دهد، اما مقادیر معتبر را محدود نمی کند. برای این و سایر انواع ورودی، ویژگی pattern وجود دارد. شما می توانید یک عبارت منظم را مشخص کنید که مقدار باید مطابقت داشته باشد تا معتبر در نظر گرفته شود. اگر یک مقدار رشته خالی باشد و مقدار مورد نیاز نباشد، خطای validityState.patternMismatch ایجاد نمی کند. در صورت نیاز و خالی، پیام خطای پیش‌فرض برای validityState.valueMissing به جای patternMismatch به کاربر نشان داده می‌شود.

برای ایمیل‌ها، validityState.typeMismatch احتمالاً برای نیازهای شما بسیار بخشنده است. احتمالاً می خواهید ویژگی pattern درج کنید، بنابراین آدرس های ایمیل اینترانت بدون TLD به عنوان معتبر پذیرفته نمی شوند. ویژگی الگو امکان ارائه یک عبارت منظم را فراهم می کند که مقدار باید مطابقت داشته باشد. هنگام نیاز به تطابق الگو، اطمینان حاصل کنید که برای کاربر کاملاً واضح است که چه چیزی مورد انتظار است.

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

مثال

این مثال دارای یک فرم در یک <dialog> با یک <form> تودرتو با سه کنترل فرم و دو دکمه ارسال، با برچسب‌ها و دستورالعمل‌های واضح است.

اولین دکمه ارسال کادر گفتگو را می بندد. از formmethod="dialog" برای لغو روش پیش‌فرض فرم استفاده کنید و <dialog> را بدون ارسال داده یا پاک کردن آن ببندید. شما همچنین باید formnovalidate وارد کنید، در غیر این صورت مرورگر سعی می کند تا بررسی کند که تمام فیلدهای مورد نیاز دارای یک مقدار هستند. ممکن است کاربر بخواهد دیالوگ و فرم را بدون وارد کردن داده ببندد. اعتبار سنجی از این امر جلوگیری می کند. aria-label="close" وارد کنید زیرا "X" یک نشانه بصری شناخته شده است اما یک برچسب توصیفی نیست.

کنترل‌های فرم همگی دارای برچسب‌های ضمنی هستند، بنابراین نیازی به اضافه کردن ویژگی‌های id یا for ندارید. عناصر ورودی هر دو ویژگی لازم را دارند که آنها را مورد نیاز می‌سازد. ورودی عدد دارای step است که به صراحت برای نشان دادن نحوه گنجاندن step تنظیم شده است. همانطور که step پیش فرض 1 است، این ویژگی را می توان حذف کرد.

<select> دارای یک مقدار پیش فرض است که ویژگی required را غیر ضروری می کند. به جای درج ویژگی value در هر گزینه، مقدار به طور پیش‌فرض در متن داخلی قرار می‌گیرد.

دکمه ارسال در انتها، روش فرم ها را روی POST تنظیم می کند. با کلیک کردن، اعتبار هر مقدار بررسی می شود. اگر همه مقادیر معتبر باشند، داده‌های فرم ارسال می‌شوند، گفتگو بسته می‌شود و صفحه ممکن است به thankyou.php که URL عمل است هدایت شود. اگر مقداری گم شده باشد، یا اگر مقدار عددی دارای یک عدم تطابق گام باشد یا خارج از محدوده باشد، یک پیام خطای تعریف شده از مرورگر مربوطه ظاهر می شود، فرم ارسال نمی شود و گفتگو بسته نمی شود. پیام‌های خطای پیش‌فرض را می‌توان با روش validityState.setCustomValidity('message here') سفارشی کرد. فقط توجه داشته باشید که اگر یک پیام سفارشی تنظیم کنید، زمانی که همه چیز معتبر است یا فرم ارسال نمی شود، پیام باید به صراحت روی رشته خالی تنظیم شود.

ملاحظات دیگر

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

در طراحی فرم ها ، مهم است که در نظر داشته باشید که همه مانند شما نیستند. ممکن است شخصی یک حرف به عنوان نام خانوادگی داشته باشد (یا اصلاً نام خانوادگی نداشته باشد)، ممکن است کد پستی نداشته باشد، ممکن است آدرس خیابان سه خطی داشته باشد، ممکن است نشانی خیابان نداشته باشد. آنها ممکن است نسخه ترجمه شده فرم شما را مشاهده کنند.

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

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

درک خود را بررسی کنید

دانش خود را از فرم ها تست کنید.