Chapter9 + sheet 7

تصميم صفحات اإلنترنتInternet Pages Design

1

الفصل الثامن

لغة ترميز النصوص التشعبية

Hyper Text Markup Language( HTML )

2

نسرين الشبيلي

:النماذج

تعتبر من و هً طرق تسمح لمستخدم أو لزائر الموقع بإدخال بٌانات لهذا الموقع حٌث معظم مواقع الوٌب تكاد ال تخلو من HTMLالمواضٌع المتقدمة نوعاً ما فً لغة

:وجودها، وذلك لعدة أسباب لعل من أهمها

.إٌجاد إمكانٌة للتفاعل بٌن الموقع وصاحبه من جهة والزوار من جهة أخرى •

إمكانٌة تنظٌم البٌانات المدخلة من خاللها وسهولة وسرعة استخدامها من قبل زوار •

. الموقع

وكمثال عندما نكتب مشاركة فً المنتدى فإننا ندخل بٌانات و عندما نكتب رسالة برٌد

الكترونً فإننا ندخل بٌانات و عندما نسجل فً موقع و نختار البلد والعمر و االسم و ما

إلى ذلك فإننا ندخل بٌانات لهذا الموقع وطرق إدخال البٌانات هذه تتم عن طرٌق النماذج forms.

3

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

ال تكمن صعوبة التعامل مع النماذج فً كونها معقدة بحد ذاتها، فهً إحدى العناصر التً وهً مجرد وسوم عادٌة مثلها مثل الوسوم التً تعاملنا معها فً HTMLتدعمها لغة

وباإلمكان إنشاء النماذج بنفس السهولة التً ندرج فٌها جدوالً أو . جمٌع الدروس السابقةJavaScript ,: إطاراً لكن التداخل بٌنها وبٌن لغات البرمجة المتقدمة فً الوٌب مثل

CGI خاصة إذا . هً ما ٌجعلها تختلف عن سابقٌها من الوسوم أو العناصر األخرى

أما إذا اكتفٌنا . احتجنا إلى بعض المقاطع البرمجٌة من هذه اللغات ضمن النماذجبالنسبة للنماذج فسٌكون التعامل معها بسٌط HTMLباإلمكانات المتواضعة التً توفرها

. وسهل

4

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

:طريقة كتابة النماذج : لعمل نموذج كالتالً FORMنستعمل عادة الوسم

<FORM > محتوى النموذج < /FORM>:FORMخصائص وسم الـ

5

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

Actionتحدد العنوان الذي سٌتم إرسال بٌانات النموذج إلٌه لتتم معالجتها بالصورة

حٌث ٌوضع مسار الصفحة التً ستعالج البٌانات أو تترك فارغة لتعالج البٌانات فً نفس . المطلوبة

.هذا عنواناً لبرٌد إلكترونً سوف ٌتم إرسال بٌانات النموذج إلٌه: مثال. الصفحة “ > ... < /FORM>[email protected]: <FORM ACTION="

Methodتحدد الطرٌقة التً سٌتم بها التعامل مع العنوان المحدد فً الخاصٌة السابقة.Get ًإلرسال البٌانات للمعالجة داخل الخادم أو الموقع بشكل مخف.

Post للعملٌات الخارجٌة بشكل علنً مثل اإلرسال إلى برٌد.

“ method=“post”> ... < [email protected]: <FORM ACTION="/FORM>

نسرين الشبيلي

: formاشهر الوسوم المستخدمة داخل وسم الـ

6

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

<INPUT >ٌستخدم هذا الوسم فً النماذج إلدخال البٌانات وله عدة أنواع سٌت شرحه فً الشرٌحة التالٌة.

<textarea> ٌستخدم هذا الوسم فً النماذج إلدخال النصوص الطوٌلة فمثالً عندما تكتب موضوع أو رد فً المنتدى أو.textareaفً تكتب رسالة فً نموذج إرسال رسائل فإنناعملٌاً تكتبه

<Select> , <option> تستخدم لعمل قائمة تحوي عدة قٌم بحٌث نختار قٌمة منها.

< Fieldset> ,<legend> ٌستعمل الوسمfieldset كوسم خارجً و داخله الوسمlegend م بقٌة عناصر ث لوضع عنوان للمجموعة

.النموذج

نسرين الشبيلي

:وذلك حسب أنواعه Inputوٌتم إدخال البٌانات عن طرٌق الوسم المفرد

7

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

<INPUT TYPE="text"> وهو أشهر طرق إرسال المعلومات وٌظهر فً النموذج فً صورة مربع نص ٌمكن

.للمستخدم إدخال أي شًء فٌه

<INPUT TYPE="password"> ٌستخدم إلرسال كلمة المرور، وهو ٌرسل كلمة المرور بصورة واضحة دون أٌة تشفٌر

) * (.وإنما ٌختلف عن مربع النص العادي فً أن الحروف تظهر فً صورة نجوم

<INPUT TYPE="radio">ٌستخدم لعمل الدوائر لكً ٌختار المستخدم قٌمة ما من عدة خٌارات.

<INPUT TYPE="checkbox"> لعمل مربع اختٌار، إذا تم اختٌاره فإنه ٌرسل القٌمةon وإذا لم ٌتم اختٌاره

.فإنه ال ٌرسل أي معلومة

<INPUT TYPE="submit">ٌظهر فً صورة زر ٌستخدم إلرسال المعلومات الموجودة فً النموذج.

<INPUT TYPE="reset">ٌستخدم لمحو محتوٌات النموذج وإعادته إلى الحالة األصلٌة .

<INPUT TYPE="button“>لعمل زر، وٌستفاد من الزر فً عمل أي شًء .

نسرين الشبيلي

: على عدة خصائص منها inputٌحتوي وسم الـ

8

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

Value.وتأتً مع جمٌع االنواع inputتستخدم لوضع قٌمة ابتدائٌة للوسم

Name -checkbox textوتأتً مع لتمٌٌزه عن غٌره formتستخدم لتسمٌة الجزء الذي وضعناه داخل النموذج

password –radio-Button

Size االدخال مع الـ للتحكم بمساحة حقلtext.

checked ٌوضع مع احد الخٌارات كقٌمة أفتراضٌة ٌأتً فقط معcheckbox-radio

نسرين الشبيلي

:textمن النوع inputمثال للفهم

9

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

:sizeبإضافة خاصية الـ

10

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

:buttonمن النوع inputمثال

11

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

:Radioمن النوع inputمثال

12

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

: checkboxمن النوع inputمثال

13

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

: submit & resetمن النوع inputمثال

14

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

:<Fieldset> ,<legend >والوسمين passwordمن النوع inputمثال

15

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

:select , optionقوائم االختيار

والـ radioوتستخدم لعمل قائمة تحوي عدة قٌم بحٌث نختار قٌمة منها وهذه تختلف قلٌالً عن الـ

checkboxnameوونعطٌة تسمٌه selectنستخدم وسم

هً عناصر القائمة optionو نضع بداخله عدة وسوم

وسوم داخلٌة و trتشبه الجداول حٌث ٌوجد فً الجدول وسم خارجً valueولكل عنصر نضع قٌمته

td

16

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

17

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )

نسرين الشبيلي

7Sheet :

.قومً بعمل نموذج مطابق للصورة التالٌة

18

لغة ترميز النصوص التشعبية

Hyper Text Markup Language ( HTML )