اذهب إلى المحتوى
  • 0

كيف أستطيع إلزام المستخدِم على تعبئة جميع الحقول بإستخدام HTML فقط؟

mphone

السؤال

اقوم بتصميم موقع و أريد إلزام المستخدم على ملء جميع الحقول الموجودة بالنموذج المطلوب تعبئته.
هل هذا ممكن باستخدام لغة HTML فقط ام اﻷمر يتطلب لغة برمجه معينه؟
شكراً لكم جميعاً.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 2

اﻵن تستطيع فعل كل ما يخطر ببالك باستخدام HTML5.
ما تسأل عنهُ هو سمه required التي تعني (مطلوب). 
أتت مع إصدار HTML5 وهذه تُستخدم فقط مع الحقول INPUT 
وهذه السمه تقوم بعمل عظيم. كيف؟!
عندما يتم الضغط على زر submit المسئول عن إرسال متحتويات النموذج وقد ترك المُستخدم حقل فارغ تظهر له رسالة تنبيه بشكل جميل بأن لا يُمكن ترك هذا الحقل فارغ.
لنرى مثال على ذلك:

<form action="/login">
  Username: <input type="text" name="user" required>
  Password: <input type="password" name="pass" required>
  <input type="submit">
</form>

كما تُشاهد في هذا المثال قمت بانشاء نموذج مكون من ثلاث عناصر.
اﻷول ﻷسم المستخدم من نوع نص text وله تعريف باسم user وفي نهايته استخدمنا سمة required لضرورة ملء الحقل.
الثاني لكلمة المرور من نوع كلمة مرور password باسم pass وايضاً بهِ required للضرورة.
الثالث لإرسال البيانات من نوع إرسال submit.

إذا ترك المستخدم حقل اسم المستخدم فارغ وضغط على إرسال ستظهر له رسالة تنبيه بضرورة ملء بيانات هذا الحقل وكذلك مع حقل كلمة المرور.
وهذا يتم حسب ترتيب الحقول المتروكه فارغة, بمعنى إذا كان هناك اكثر من حقل وكان على سبيل المثال الحقل الثالث تم تركه فارغ وكذلك ما يليه مباشرةً فارغ ايضاً سيتم التنبيه عن ضرورة ملء الحقل الثالث اولاً وهكذا.

لمشاهده مثال حي على هذا المثال من هـنـا.
المصدر
ملحوظه هامه: هذهِ السمه required غير مدعومه في المتصفحات القديمة التي لا تدعم HTML5.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...