‫أ‪ .

‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫‪HTML Semantic tags‬‬

‫هناك وسوم خاصة بـ ‪ html5‬لتقسيم الصفحة بدال من استخدام الـ ‪ div‬وإعطائها معرف ‪ .id‬وهي‪:‬‬

‫‪Header ‬‬
‫‪ Nav ‬يكتب مرة واحدة في الموقع‪.‬‬
‫‪Section ‬‬
‫‪Article ‬‬
‫‪Figure ‬‬
‫‪ Aside ‬يكتب مرة واحدة في الموقع‪.‬‬
‫‪Footer ‬‬
 ‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫‪-‬كل وسم من الوسوم السابقة قد يحتوي عدة وسوم بداخله‪.‬‬

‫مالحظة‪ :‬استخدام ‪ Semantic tags‬الخاصة بلغة ‪ html5‬ال يمنع من استخدام الخصائص العامة مثل‬
‫‪ id‬و ‪ class‬سواء كانت للوسم نفسه أو لوسوم ضمن الوسم نفسه‪.‬‬
‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬
‫ً‬
‫مثال‪ :‬لكتابة هذه الصفحة بلغة ‪ html‬فيمكننا استخدام الـ ‪ div‬في تقسيم الصفحة وأيضا‬
‫بإمكاننا استخدام ‪ Semantic tags‬وهو األفضل‪.‬‬
‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫استخدام الـ ‪ div‬في تقسيم الصفحة‪:‬‬

‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫استخدام ‪ Semantic tags‬في تقسيم الصفحة‪:‬‬

 ‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫النماذج ‪:Forms‬‬
‫‪-‬تمكننا النماذج من إدخال البيانات لتخزينها في قاعدة البيانات أو عرضها أو معالجتها‪.‬‬

‫‪-‬إلنشاء نموذج نستخدم الوسم‪:‬‬

‫>‪<form> ….. </form‬‬

‫‪-‬خصائص النماذج‪:‬‬

‫‪Action ‬‬
‫‪-‬يحدد فيها اسم الملف البرمجي الذي سترسل له البيانات ليعالجها وهذا الملف يكتب بإحدى لغات‬
‫البرمجة من طرف الخادم ‪ server side‬مثل‪php :‬‬

‫‪Method ‬‬
‫‪-‬يحدد فيها طريقة إرسال البيانات إلى الملف البرمجي وهذه الطرق هي‪:‬‬
‫‪GET .1‬‬
‫نالحظ ظهور البيانات المرسلة في عنوان الـ ‪URL‬‬
‫‪POST .2‬‬
‫نالحظ عدم ظهور البيانات المرسلة في عنوان الـ ‪URL‬‬

‫لكن كالهما يظهر في الـ ‪.query string‬‬

‫‪ :Novalidate ‬خاصية تكتب لرفع القيود عن النموذج‪.‬‬

‫‪ :Target ‬تعطى القيمة "‪ "_blank‬لفتح النموذج في صفحة جديدة بعد إرسال الطلب‪.‬‬
 ‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫‪-‬يحتوي النموذج على مجموعة من العناصر‪:‬‬

‫خصائص الوسم‬ ‫الشرح‬ ‫اسم الوسم‬

‫لوضع النص المسبق بالحقل‬ ‫>‪<lable> </lable‬‬
‫حقل إدخال‬ ‫>‪<input> </input‬‬
‫‪:Multiple‬تسمح باختيار أكثر‬
‫قائمة منسدلة‬ ‫<‪>select< >/select‬‬
‫من قيمة‬
‫توضع داخل وسم ‪select‬‬
‫‪:Label‬لتحديد اسم المجموعة‬ ‫>‪<optgroup> </optgroup‬‬
‫لتقسيم محتوى القائمة لمجموعات‬
‫‪ :Selected‬عنصر محدد‬ ‫توضع داخل وسم ‪select‬‬
‫>‪<option> </option‬‬
‫افتراضيا‬ ‫لتحديد عناصر القائمة المنسدلة‪.‬‬
‫‪ :Cols‬عدد األعمدة‬
‫إلدخال قيمة نصية متعددة األسطر‬ ‫>‪<textarea> </textarea‬‬
‫‪ :Rows‬عدد األسطر‬

‫‪-‬يحتوي حقل اإلدخال ‪input‬على مجموعة من األنواع ‪:type‬‬

‫خصائص كل نوع‬ ‫الشرح‬ ‫النوع‬

‫حقل خاص بالنص‬ ‫‪Text‬‬
‫حقل خاص بكلمة المرور‬ ‫‪Password‬‬
‫حقل خاص بااليميل ويجب أن‬
‫‪Email‬‬
‫يحتوي عالمة @‬
‫زر أوامر‬ ‫‪Button‬‬
‫زر إرسال الطلب‬ ‫‪Submit‬‬
‫زر إلعادة ضبط القيم االفتراضية‬
‫‪Reset‬‬
‫لعناصر اإلدخال في النموذج‬
‫إلرسال بيانات في النموذج دون‬ ‫‪Hidden‬‬
‫حقل مخفي‬
‫ظهورها للمستخدم‬
 ‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫‪Color‬‬
‫حقل يسمح بتحديد لون معين‬

‫‪:Max‬أعلى قيمة‪:Min،‬أقل قيمة‬

‫حقل خاص باألرقام‬ ‫‪Number‬‬
‫‪:Step‬خطوة االنتقال‬
‫‪:Max‬أعلى قيمة‪:Min،‬أقل قيمة‬
‫لتحديد مجال من القيم‬ ‫‪Range‬‬
‫‪:Step‬خطوة االنتقال‬
‫‪:Checked‬العنصر المحدد‬
‫عنصر اختيار فردي‬ ‫‪Radio‬‬
‫بشكل افتراضي‬
‫‪:Checked‬العنصر المحدد‬
‫بشكل افتراضي‬ ‫عنصر اختيار متعدد‬ ‫‪Checkbox‬‬
‫له نفس خصائص الـ ‪input‬‬
‫لرفع ملف على الموقع‬ ‫‪File‬‬
‫للبحث في الموقع‬ ‫‪Search‬‬
‫حقل إلدخال رابط ‪URL‬‬
‫‪URL‬‬
‫ال يقبل إال ‪URL‬‬
‫لتحديد التاري ــخ‬ ‫‪Date‬‬
‫لتحديد التاري ــخ‬ ‫‪Month‬‬
‫لتحديد الوقت‬ ‫‪Time‬‬
‫تحوي على وسمين ( ‪Datalist -‬‬ ‫قائمة عناصر (يمكننا البحث من‬
‫‪List‬‬
‫‪)option‬‬ ‫خاللها)‬
 ‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫خصائص عامة لحقول اإلدخال ‪:Input‬‬

‫الشرح‬ ‫اسم الخاصية‬

‫لتحديد نوع حقل اإلدخال‬ ‫‪Type‬‬
‫لتحديد اسم برمجي للحقل‬ ‫‪Name‬‬
‫لتحديد قيمة افتراضية للحقل‬ ‫‪Value‬‬
‫لتحديد حجم حقل البيانات‬ ‫‪Size‬‬
‫حقل مطلوب إدخال البيانات فيه (ال يمكن تركه فارغ)‬ ‫‪Required‬‬
‫ال تستطيع التعديل على الحقل (البيانات للقراءة فقط) وترسل البيانات‬
‫‪Readonly‬‬
‫في النموذج‬
‫ال تستطيع التعديل على الحقل (البيانات للقراءة فقط) وال ترسل البيانات‬
‫‪Disabled‬‬
‫في النموذج‬
‫لوضع مؤشر الكتابة في حقل معين‬ ‫‪Autofocus‬‬
‫الحد األدنى لطول الكلمة (أقل عدد محارف يمكن كتابتها في الحقل)‬ ‫‪Minlength‬‬
‫الحد األقصى لطول الكلمة (أكبر عدد محارف يمكن كتابتها في الحقل)‬ ‫‪Maxlength‬‬

‫مالحظة‪:‬‬
‫ً‬
‫لربط عنصرين مع بعضهم (مثال عند الضغط على اسم المستخدم يوضع المؤشر في الحقل الخاص باالسم)‬

‫نضع ‪ id‬معين لعنصر اإلدخال ونضع ‪ for‬بنفس اسم الـ ‪ id‬للعنصر الذي نريد الربط به‪.‬‬

‫مثال‪:‬‬
‫أ‪ .‬شيماء زقزوق‬ ‫المحاضرة الثانية نظري‬ ‫برمجيات ويب‪1‬‬

‫الوسم ‪:fieldset‬‬

‫يمكننا من تقسيم عناصر النموذج إلى مجموعات توضع كل منها في إطار مستقل وتأخذ كل مجموعة اسم‬
‫معين من خالل الوسم ‪legend‬‬

‫مثال‪:‬‬

‫يظهر بالشكل التالي‪:‬‬