يوفر هتمل مجموعة متنوعة من العلامات والسمات لإنشاء النماذج التي تشمل الحقول الإلزامية. لا يسمح الحقل المطلوب للمستخدم بإرسال النموذج حتى يتم ملء الحقول المحددة. هذه وظيفة مهمة تسمح لك بالتحكم وضمان اكتمال ودقة إدخال البيانات.
لإنشاء حقل مطلوب في هتمل ، يمكننا استخدام السمة المطلوبة. يمكن إضافة هذه السمة لتشكيل العناصر على النحو التالي:
في المثال أعلاه ، يتم إنشاء حقل نصي يجب ملؤه قبل إرسال النموذج. إذا حاول المستخدم إرسال النموذج دون ملء هذا الحقل ، فسيعرض المتصفح رسالة خطأ.
ومع ذلك ، يمكن أيضا تعيين الحقل المطلوب في عناصر نموذج أخرى ، مثل و . من المهم أيضا ملاحظة أن هذه السمة مدعومة أيضا ببعض أنواع الحقول مثل البريد الإلكتروني وعنوان ورل والرقم.
- كيفية إضافة حقل مطلوب
- استخدام سمات هتمل5
- استخدام جافا سكريبت
- استخدام نماذج هتمل5
- سؤال وجواب
- كيف يمكنني جعل حقل إلزامي في أتش تي أم أل?
- هل من الممكن جعل الحقل إلزاميا دون استخدام السمة" المطلوبة"?
- ما هي السمات الأخرى التي يمكن استخدامها مع الحقل لملء أتش تي أم أل?
- كيف يمكنني التحقق من أن الحقل المطلوب قد تم ملؤه في أتش تي أم أل?
- هل من الممكن أن نمط حقل ملء في أتش تي أم أل بحيث تبرز عندما يكون فارغا?
كيفية إضافة حقل مطلوب
يحتوي هتمل على سمة خاصة مطلوبة تسمح لك بجعل الحقل إلزاميا. يكون هذا مفيدا جدا عندما تريد التأكد من قيام المستخدمين بإدخال معلومات معينة قبل إرسال نموذج.
لجعل الحقل إلزاميا ، تحتاج إلى إضافة السمة المطلوبة إلى علامة الإدخال (). على سبيل المثال:
في هذا المثال ، أضفنا السمة المطلوبة إلى حقل الإدخال المسمى"الاسم". الآن ، إذا لم يدخل المستخدم أي نص في هذا الحقل وحاول إرسال النموذج ، فسوف يتلقى رسالة خطأ.
بدلا من ذلك ، يمكنك استخدام العلامة لإضافة تسمية نصية إلى حقل الإدخال. على سبيل المثال:
الاسم:
في هذا المثال ، استخدمنا العلامة لإنشاء التسمية"الاسم:". تتطابق السمة لـ في العلامة مع سمة المعرف في حقل الإدخال لإنشاء اتصال بينهما. الآن من خلال النقر على النص " الاسم:"،سينتقل المستخدم تلقائيا إلى حقل الإدخال.
حتى الآن أنت تعرف كيفية إضافة حقل مطلوب إلى هتمل باستخدام السمة المطلوبة وكيفية استخدام العلامة لإنشاء تسمية إلى حقل الإدخال. حظا سعيدا مع الأشكال الخاصة بك!
استخدام سمات هتمل5
طريقة واحدة لجعل حقل إلزامي في هتمل هو استخدام سمات هتمل 5. تضيف سمات هتمل 5 وظائف جديدة إلى عناصر النموذج القياسية ، مما يسمح لك بتعريف حقل كما هو مطلوب.
لجعل الحقل إلزاميا ، يمكنك استخدام السمة المطلوبة. على سبيل المثال ، لإنشاء حقل نص يجب ملؤه ، استخدم الكود التالي:
في الكود أعلاه ، تحدد سمة النوع="نص" نوع الحقل كحقل نصي ، وتشير السمة المطلوبة إلى أن الحقل مطلوب.
يمكنك أيضا تطبيق السمة المطلوبة على أنواع أخرى من الحقول ، مثل البريد الإلكتروني والرقم وخانة الاختيار وما إلى ذلك. على سبيل المثال:
عندما يحاول المستخدم إرسال نموذج دون ملء الحقول المطلوبة ، سيعرض المتصفح تلقائيا رسالة خطأ ولن يسمح بإرسال النموذج.
من المهم ملاحظة أن استخدام السمة المطلوبة ليس الطريقة الوحيدة لجعل الحقل إلزاميا في هتمل. هناك طرق أخرى ، بما في ذلك استخدام جافا سكريبت أو التحقق من جانب الخادم. ومع ذلك ، توفر سمات هتمل5 طريقة بسيطة ومريحة لجعل حقل إلزامي دون الحاجة إلى رمز إضافي.
استخدام جافا سكريبت
جافا سكريبت هي لغة برمجة تسمح لك بإضافة التفاعل والوظائف إلى صفحات الويب. باستخدامه ، يمكنك إنشاء عناصر ديناميكية والتحقق من صحة بيانات الإدخال وتحسين تجربة المستخدم.
واحدة من أكثر المهام شيوعا التي يمكن تنفيذها باستخدام جافا سكريبت هي التحقق من صحة حقول النموذج. على سبيل المثال ، يمكنك جعل الحقل إلزاميا وتحذير المستخدم إذا حاول إرسال نموذج دون ملء الحقل المطلوب.
للقيام بذلك ، يمكنك استخدام طريقة أديفنتليستينر() في جافا سكريبت ، والذي يسمح لك لإضافة معالج الحدث إلى عنصر. يمكنك تعيين معالج لحدث إرسال النموذج والتحقق من قيم الحقول قبل الإرسال.
هنا هو نموذج التعليمات البرمجية التي توضح كيفية جعل الحقل إلزاميا:
- أولا ، تحتاج إلى الحصول على رابط إلى النموذج باستخدام طريقة جيتليمنتبيد() وحفظه إلى متغير.
- ثم يمكنك إضافة معالج حدث إرسال إلى النموذج.
- داخل المعالج ، يمكنك التحقق من قيم الحقول ، وإذا كان الحقل مطلوبا ، يمكنك التحقق مما إذا كان قد تم ملؤه.
- إذا لم يتم ملء الحقل ، يمكنك منع إرسال النموذج باستخدام طريقة بريفنتدفولت ().
هنا مثال رمز:
| أتش تي أم أل: | جافا سكريبت: |
الاسم: | نموذج كونست = وثيقة.جيتليمنتبيد ('ميفورم'); شكل.أدفنتليستينر ('إرسال' ، وظيفة (الحدث) { إذا (!الاسم.القيمة) { حدث.منعالافتراضي(); تنبيه ('يرجى ملء حقل "الاسم"'); } }); |
في المثال أعلاه ، إذا لم يتم ملء حقل" الاسم " ، يمنع الرمز إرسال النموذج ويعرض رسالة تحذير.
وبالتالي ، يتيح لك استخدام جافا سكريبت جعل الحقل إلزاميا وتحذير المستخدم إذا حاول إرسال النموذج دون ملء الحقل المطلوب.
استخدام نماذج هتمل5
يوفر لنا هتمل5 العديد من الفرص لإنشاء نماذج مع الحقول المطلوبة. إحدى هذه الطرق هي استخدام السمة المطلوبة. يسمح لك بجعل الحقل إلزاميا ويعرض تحذيرا إذا حاول المستخدم إرسال النموذج دون ملء الحقل المطلوب.
لنلق نظرة على مثال لاستخدام السمة المطلوبة:
- قم بإنشاء نموذج باستخدام العنصر.
- أضف حقول الإدخال باستخدام العنصر وقم بتعيين السمة المطلوبة.
- إضافة زر تقديم نموذج باستخدام العنصر.
يوجد أدناه نموذج رمز يوضح كيفية استخدام السمة المطلوبة في هتمل 5:
| كود | الوصف |
|---|---|
| يخلق نموذج | |
| ينشئ حقل إدخال نص بملء إلزامي | |
| إنشاء حقل إدخال البريد الإلكتروني مع ملء إلزامي | |
| إرسال | يخلق زر تقديم النموذج |
انقر فوق الزر" إرسال " دون ملء النموذج:
إرسال
نتيجة لذلك ، سترى رسالة خطأ تشير إلى حقول فارغة.
يعد استخدام السمة المطلوبة في هتمل 5 طريقة سهلة ومريحة لجعل الحقل إلزاميا. ويدعم هذا المعيار من قبل معظم المتصفحات الحديثة ، والذي يسمح لك لاستخدامه دون مشاكل في تطوير الشبكة.
سؤال وجواب
كيف يمكنني جعل حقل إلزامي في أتش تي أم أل?
من أجل جعل الحقل إلزاميا في هتمل ، تحتاج إلى إضافة السمة "المطلوبة" إلى العلامة.
هل من الممكن جعل الحقل إلزاميا دون استخدام السمة" المطلوبة"?
نعم ، هذا ممكن. للقيام بذلك ، تحتاج إلى استخدام جافا سكريبت. في وظيفة التحقق من صحة البيانات ، تحتاج إلى إضافة شرط يتحقق من حقل الامتلاء.
ما هي السمات الأخرى التي يمكن استخدامها مع الحقل لملء أتش تي أم أل?
مع حقل لملء هتمل ، يمكنك استخدام العديد من السمات ، على سبيل المثال: "نمط" ، "مينلنغث" ، "ماكسلنغث" ، "حجم" ، "نائب" وغيرها. أنها تسمح لك بالتحكم في بيانات الإدخال وتنسيقها.
كيف يمكنني التحقق من أن الحقل المطلوب قد تم ملؤه في أتش تي أم أل?
يمكنك استخدام جافا سكريبت للتحقق من ملء الحقل المطلوب. في وظيفة التحقق من صحة البيانات ، تحتاج إلى التحقق من قيمة الحقل بحثا عن الفراغ ، وإذا كان الحقل فارغا ، فقم بعرض رسالة خطأ أو تحذير المستخدم.
هل من الممكن أن نمط حقل ملء في أتش تي أم أل بحيث تبرز عندما يكون فارغا?
نعم ، يمكنك. للقيام بذلك ، يمكنك استخدام فئة زائفة ":غير صالح " وتعيين أنماط لهذه الحالة. على سبيل المثال ، يمكنك إضافة حد أحمر أو تغيير لون خلفية الحقل.