نماذج

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

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

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

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

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

يتم إرسال النماذج عندما ينشط المستخدم زر إرسال مدمج في النموذج. عند استخدام <input> للأزرار، 'value' هو تسمية الزر، ويتم عرضه في الزر. عند استخدام الدالة <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>

اختيار طالب: هوفر سوخديب بليندان سموث ماكتوس توستفيس

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

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

التحقق من فهمك

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