مقدمه
ال HTML5 كمان نعلم صمم خصيصا ليقلل الاكواد المستخدمه ويسهل احتياحتنا كمصممين و مستخدمين لاكواد ال HTML عموا
ورغم انه كان بالسابق ليس مفعلا على كتير من المتصفحات او ال bowers لكنه الان شئيا فشيئا يحتل اهميه اكبر وانتشار اقوى بين المتصفحات حيت انه اصبح يدعم فى النسخ الاخيره من هذه المتصفحات حتى ال IE بدا الان يستخدمه فى ال IE 10 الذى يعمل على انظمة التشغيل Windows 7 server pack2 وايضا على Windows 8 . فى هذا المقال سوف نتحدث عن احد هذه الامكانيات التى توفر علينا الكتير من الجهد الا وهى ال Required Attribute وهى عباره عن ميزه او attribute يكتب داخل اى input نريد ان يصبح required او مطلوب فنحن نرى الكتير من الصفحات التى يكون فيها text او المكان المخصص لكتابة النص مطلوب ولا يمكن ان يترك فارغا والا هيقوم المتصفح بطلب منك اتمام املاءه قبل ان تسطيع ان تضغط على سبيل المثال على زر الدخول او التسجيل مثل بينات كلمة السر او اسم المستخدم التى نراها فى اغلب المواقع الالكترونيه.
التجربه العمليه
لقد قمت بالبحث عن امثله لهذا ووجت انه هناك المئاب بل الالاف من هذه الامثله , هذه بعض الصور للنتائج بعد استخدام ال Required Attribute
هذا سيكون النتيجه على ال FireFox , Chrom , Opera :-
أستخدام الكود
طريقة الكود هى بسيطه وسهله جدا وهذا مثال :-
<form> <label for="movie">What is your favorite movie : </label> <input name="movie" type="text" required /> <input type="submit" value="Submit"/> </form>
سنجد فى هذا الكود اننا اولا استخدمنا ال form وهى ضروريه والا لن يتم تفعيل ال Required وسنجد فى ال input name="movie اننا استخدمنا ال Required attribute وهو معناه ان هذا الحقل لا يمكن ان يترك فارغا والا سيظهر رسالة التحذير كما فى الصوره
المشاكل مع هذه الطريقه
تحتوى هذه الطريقه على بعض المشاكل التى قد تواجه من يستخدمها :-
- انك لا تسطتيع التحكم فى شكل الرساله التحذيريه كما ان شكلها يختلف من متصفح لاخر
- هذه الطريقه تعتمد اعتمادا كليا على ال HTML5 لذا فانها لن تعمل على IE9 فاقل تعمل فقط على IE10
- فى هذه الطريقه انت لا تستطيع التحكم فى محتوى الرساله التحذيريه فلا تستطيع مثلا ان تعطى للمستخدم المزيد من التفاصيل عن النص المناسب الذى من المفترض ان يستخدمه مثل ان هذا المحتوى للارقام فقط او ان لايزيد عدد الاحرف عن 7 حروف
- اذا اردت التغلب على هذه المشاكل فيجب استخدام ال Jquery
ملف الديمو
يمكنك تحميل ملف الديمو من الرابط التالى :-
