نماذج

تتضمّن معظم المواقع الإلكترونية والتطبيقات نموذج ويب. المواقع الإلكترونية المزاح، مثل DoWebsitesأحتاجإلىالبحثتمامًاTheSameفيEveryBrowser.com، قد لا يكون له نموذج، ولكن حتى الآلةالتعلمWorkshop.com (MLW)، التي نشأت من مزحة كذبة نيسان (أبريل)، لها نموذج، وحتى لو كانت مزيفة. "عبارة الحث على اتخاذ إجراء" الرئيسية في MLW هي نموذج تسجيل للأجهزة للاشتراك في ورشة عمل. وهذا النموذج مضمَّن في عنصر <form>.

يحدّد عنصر HTML <form> علامة مرجعية للمستند تحتوي على عناصر تحكّم تفاعلية لإرسال المعلومات. يمكنك العثور على جميع عناصر التحكّم في النموذج التفاعلية (وغير التفاعلية) التي تشكّل هذا النموذج ضمن <form>.

HTML قوي. يركز هذا القسم على قوة HTML، ويتناول ما يمكن أن يفعله HTML بدون إضافة JavaScript. يتضمن استخدام بيانات النموذج من جهة العميل لتحديث واجهة المستخدم بطريقة ما CSS أو JavaScript، ولم تتم مناقشته هنا. تتوفّر دورة تعلُّم النماذج بالكامل. لن نكرر هذا القسم هنا، ولكننا سنقدم العديد من عناصر التحكم في النموذج وسمات HTML التي تمكنها.

باستخدام النماذج، يمكنك تمكين المستخدمين من التفاعل مع موقعك الإلكتروني أو تطبيقك والتحقق من صحة المعلومات التي أدخلتها وإرسال البيانات إلى خادم. يمكن أن تتيح سمات HTML مطالبة المستخدم باختيار عناصر التحكّم في النموذج أو إدخال قيمة. ويمكن لسمات HTML تحديد معايير محدّدة يجب أن تتطابق معها القيمة لتكون صالحة. عندما يحاول المستخدم إرسال النموذج، تخضع جميع قيم التحكّم في النموذج لعملية التحقّق من القيود من جهة العميل ويمكنها منع الإرسال إلى أن تتطابق البيانات مع المعايير المطلوبة، وكل ذلك بدون JavaScript. يمكنك أيضًا إيقاف هذه الميزة: يؤدي ضبط السمة novalidate على <form> أو formnovalidate في أغلب الأحيان على زر ما مع حفظ بيانات النموذج لإكمالها لاحقًا إلى منع عملية التحقّق من الصحة.

إرسال النماذج

يتم إرسال النماذج عندما يفعِّل المستخدم زر إرسال متداخلاً في النموذج. عند استخدام <input> للأزرار، تكون "القيمة" هي تسمية الزرّ وتُعرض عليها. عند استخدام <button>، يكون التصنيف هو النص الواقع بين علامتَي <button> للفتح والإغلاق. يمكن كتابة زر إرسال بإحدى الطريقتين التاليتين:

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

لإنشاء نموذج بسيط للغاية، ستحتاج إلى عنصر <form> يحتوي على بعض إدخالات النموذج وزر إرسال. ومع ذلك، هناك المزيد في إرسال نموذج.

تحدّد سمات العنصر <form> طريقة HTTP التي يتم من خلالها إرسال النموذج وعنوان URL الذي يعالج عملية إرسال النموذج. نعم، يمكن إرسال النماذج ومعالجتها وتحميل صفحة جديدة بدون أي JavaScript. العنصر <form> هو بهذه القوة.

تحدّد قيمتا السمتَين <form> action وmethod عنوان URL الذي يعالج بيانات النموذج وطريقة HTTP المستخدَمة لإرسال البيانات، على التوالي. بشكل تلقائي، يتم إرسال بيانات النموذج إلى الصفحة الحالية. ويمكنك بدلاً من ذلك ضبط السمة action على عنوان URL الذي يجب إرسال البيانات إليه.

تتألف البيانات المُرسَلة من أزواج الاسم/القيمة لعناصر التحكم المختلفة في النموذج. يتضمن ذلك تلقائيًا جميع عناصر التحكم في النموذج المضمّنة في النموذج الذي يحتوي على name. ومع ذلك، باستخدام السمة form، يمكن تضمين عناصر تحكّم النموذج من خارج <form> وحذف عناصر التحكّم في النموذج المدمجة داخل <form>. متاح في عناصر التحكم في النموذج و<fieldset>، تأخذ السمة form قيمتها id للنموذج المرتبط بها، وليس بالضرورة إلى النموذج الذي تم تضمينها فيه. ويعني ذلك أنّه لا حاجة إلى تضمين عناصر التحكّم في النموذج فعليًا في <form>.

تحدّد السمة method بروتوكول HTTP الخاص بالطلب: GET أو POST بشكل عام. مع GET، يتم إرسال بيانات النموذج كسلسلة معلَمة من أزواج name=value، يتم إلحاقها بعنوان URL الخاص بـ action.

مع POST، يتم إلحاق البيانات بنص طلب HTTP. عند إرسال بيانات آمنة، مثل كلمات المرور ومعلومات بطاقة الائتمان، استخدِم دائمًا POST.

هناك أيضًا طريقة DIALOG. إذا كان <form method="dialog"> داخل <dialog>، سيؤدي إرسال النموذج إلى إغلاق مربّع الحوار، وهناك حدث إرسال على الرغم من أنه لم يتم محو البيانات أو إرسالها. مرة أخرى، بدون JavaScript. وقد تمت مناقشة ذلك في قسم الحوار. ملاحظة: بما أنّ هذا الإجراء لا يؤدي إلى إرسال النموذج، ننصحك بتضمين كل من formmethod="dialog" وformnovalidate على زر الإرسال.

يمكن أن تحتوي أزرار النموذج على أكثر من السمات الموضحة في بداية هذا القسم. إذا كان الزر يتضمّن السمة formaction أو formenctype أو formmethod أو formnovalidate أو formtarget، سيكون للقيم التي تم ضبطها على الزر الذي يفعِّل إرسال النموذج الأولوية على action وenctype وmethod وtarget التي تم ضبطها في <form>. يتم التحقّق من القيود قبل إرسال النموذج، ولكن فقط في حال عدم توفّر formnovalidate على زر الإرسال المفعَّل أو novalidate على <form>.

لتحديد الزر الذي تم استخدامه لإرسال نموذج، امنح الزر 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>

اختيار طالب: هوفر سوخديب Blendan Smooth محمود ماكتويستفيس

يؤدي تحديد "Hoover Sukhdeep" (أو عدم اتخاذ أي إجراء، كما يعرض المتصفح، وبالتالي تحديد قيمة الخيار الأولى بشكل افتراضي) ثم النقر على الزر "إرسال" إلى إعادة تحميل هذه الصفحة، مع تعيين عنوان URL على:

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

بما أنّ الخيار الثاني لا يتضمّن السمة value، يتم إرسال النص الداخلي كقيمة. سيؤدي تحديد "Blendan Smooth" والنقر على الزر "إرسال" إلى إعادة تحميل هذه الصفحة، وتعيين عنوان URL على:

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. سيتطابق زر الاختيار هذا مع الفئة الزائفة في :default CSS، حتى إذا اختار المستخدم زر اختيار مختلفًا. يتطابق زر الاختيار المحدّد حاليًا مع الفئة الزائفة :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> قبل عنصر التحكّم في النموذج، باستثناء حالات أزرار الاختيار ومربّعات الاختيار. هذا الإجراء غير مطلوب. إنه فقط نمط تجربة المستخدم الشائع. تتضمن سلسلة "نماذج التعلُّم" معلومات عن تصميم النماذج.

بالنسبة إلى مجموعات أزرار الاختيار ومربّعات الاختيار، يوفّر التصنيف الاسم الذي يمكن الوصول إليه لعنصر التحكّم في النموذج المرتبط به. ولكن تحتاج أيضًا مجموعة عناصر التحكّم وتصنيفاتها إلى تصنيف. لتسمية المجموعة، عليك تجميع كل العناصر في <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 للوصول إلى مجموعة الحقول باستخدام JavaScript، ولكن لا يتم تضمين مجموعة الحقول نفسها في البيانات المرسَلة (يتم تضمين عناصر التحكّم في النموذج المُسَمّاة المضمّنة).

أنواع الإدخال ولوحة المفاتيح الديناميكية

كما أشرنا سابقًا، هناك 22 نوعًا مختلفًا من الإدخالات. في بعض الحالات، عندما يكون المستخدم على جهاز مزوّد بلوحة مفاتيح ديناميكية يتم عرضها عند الحاجة، مثل الهاتف، يحدّد نوع الإدخال المستخدَم نوع لوحة المفاتيح المعروضة. يمكن تحسين لوحة المفاتيح التلقائية المعروضة لنوع الإدخال المطلوب. على سبيل المثال، سيعرض النوع tel لوحة مفاتيح محسَّنة لإدخال أرقام الهواتف، وتشتمل email على @ و.، بينما تتضمّن لوحة المفاتيح الديناميكية لـ url النقطتين ورمز الشرطة المائلة. للأسف، لا يزال هاتف iPhone لا يتضمن : في لوحة المفاتيح الديناميكية التلقائية لأنواع الإدخال url.

لوحات مفاتيح <input type="tel"> على هاتف iPhone وهاتفَي Android مختلفَين:

لوحات مفاتيح <input type="email"> على هاتف iPhone وهاتفَي Android مختلفَين:

الوصول إلى الميكروفون والكاميرا

يتيح نوع إدخال الملف <input type="file"> تحميل الملفات عبر النماذج. يمكن أن تكون الملفات من أي نوع، معرَّفة ومحدودة من خلال السمة accept. يمكن أن تكون قائمة أنواع الملفات المقبولة قائمة بامتدادات الملفات مفصولة بفواصل أو نوعًا عموميًا أو مزيجًا من الأنواع والامتدادات الشاملة. على سبيل المثال، يقبل accept="video/*, .gif" أي ملفات فيديو أو صور 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">

التحقق المضمَّن

ونذكر مرة أخرى، أنه بدون تضمين أي محتوى JavaScript، يمكن أن يمنع HTML إرسال النماذج التي تحتوي على قيم غير صالحة.

هناك بعض أدوات اختيار لغة CSS التي تتطابق مع عناصر التحكّم في النموذج استنادًا إلى توفّر سمات HTML، بما في ذلك :required و:optional إذا تم ضبط required المنطقية أم لا، و: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 هذا مضاد للنمط. على الرغم من أنّ واجهة المستخدم قد تبدو بسيطة وواضحة، إلا أنّ العديد من المستخدمين يحاولون إرسال نموذج لتفعيل رسائل الخطأ. إن جعل زر الإرسال يظهر معطلاً بهذه الطريقة لا يسمح بالتحقق من القيود، وهي ميزة يعتمد عليها العديد من المستخدمين.

يتم تحديث CSS المطبَّقة بشكل مستمر استنادًا إلى الحالة الحالية لواجهة المستخدم. على سبيل المثال، عند تضمين أنواع إدخالات مع قيود، مثل email وnumber وurl وأنواع التاريخ، إذا كانت القيمة غير فارغة (غير فارغة) ولم تكن القيمة الحالية بريدًا إلكترونيًا أو رقمًا أو عنوان URL أو تاريخًا أو وقتًا صالحًا، ستكون فئة CSS الزائفة لـ :invalid مطابقة. يختلف هذا التحديث المستمر عن التحقق من صحة قيود 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 عند محاولة إرسال النموذج. إذا كانت القيمة خارج الخطوة بالنسبة إلى القيمة step، سواء تم ضبطها بشكل صريح أو مضبوطة تلقائيًا على 1، سيكون عنصر التحكّم :out-of-range (و:invalid) وسيظهر الخطأ validityState.stepMismatch. يظهر الخطأ كفقاعة تفسيرية، ويوفّر تلقائيًا معلومات مفيدة حول كيفية تصحيح الخطأ.

هناك سمات مشابهة لطول القيم: ستنبّه السمتان minlength وmaxlength المستخدم بحدوث خطأ في السمة validityState.tooLong أو validityState.tooShort عند الإرسال. تمنع علامة maxlength أيضًا المستخدم من إدخال عدد كبير جدًا من الأحرف.

يمكن أن يؤدي استخدام السمة maxlength إلى ترك انطباع سيئ لدى المستخدم. بوجهٍ عام، تقدّم تجربة أفضل تسمح للمستخدم بإدخال عدد أكبر من طول الأحرف المسموح به مع توفير عدّاد، ويمكنك اختيار ذلك في شكل عنصر <output> لا يتم إرساله مع النموذج، ما يمكّنه من تعديل النص إلى أن تعرض المخرجات عدم تجاوز الحد الأقصى المسموح به للطول. يمكن تضمين maxlength في HTML، تمامًا مثل كل ما ناقشناه، فهو يعمل بدون JavaScript. بعد ذلك، عند التحميل، يمكن استخدام قيمة سمة maxlength لإنشاء عدّاد الأحرف هذا في JavaScript.

يبدو أن بعض أنواع الإدخالات تحتوي على قيود تلقائية، ولكنها لا تحتوي عليها. على سبيل المثال، يوفّر نوع الإدخال tel لوحة مفاتيح رقمية على الأجهزة المزوّدة بلوحات مفاتيح ديناميكية، ولكنه لا يحدّ من القيم الصالحة. بالنسبة إلى هذا النوع من الإدخال وأنواع الإدخال الأخرى، تتوفّر السمة pattern. يمكنك تحديد تعبير عادي يجب أن تتطابق القيمة معه حتى تُعتبر صالحة. وإذا كانت القيمة هي السلسلة الفارغة، والقيمة غير مطلوبة، لن تتسبب في حدوث خطأ validityState.patternMismatch. إذا كان الحقل مطلوبًا وكان فارغًا، سيتم عرض رسالة الخطأ التلقائية الخاصة بـ validityState.valueMissing للمستخدم بدلاً من patternMismatch.

بالنسبة إلى الرسائل الإلكترونية، من المحتمل أن يكون validityState.typeMismatch مناسبًا جدًا لاحتياجاتك. ستحتاج على الأرجح إلى تضمين السمة pattern حتى لا يتم قبول عناوين البريد الإلكتروني على الشبكة الداخلية التي لا تتضمّن TLD على أنّها صالحة. تعمل سمة النمط على تمكين تقديم تعبير عادي يجب أن تتطابق معه القيمة. عند طلب مطابقة النمط، تأكد من وضوح ما هو متوقع للمستخدم.

يمكن تنفيذ كل ذلك بدون سطر واحد من JavaScript، ولكن كونك واجهة برمجة تطبيقات HTML، يمكنك استخدام JavaScript لتضمين رسائل مخصّصة أثناء التحقّق من صحة القيود. يمكنك أيضًا استخدام JavaScript لتحديث عدد الأحرف المتبقية أو عرض شريط تقدم لمدى قوة كلمة المرور، أو أي عدد آخر من الطرق لتحسين الإكمال ديناميكيًا.

مثال

يتضمّن هذا المثال نموذجًا ضمن <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 أو JavaScript.

التحقّق من استيعابك

اختبر معلوماتك عن النماذج.