الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

تنسيق النماذج

سنتحدث في هذا الفصل عن كيفيه تنسيق النماذج

فهرس الصفحة

[ TABINDEX | FIELDSET & LEGEND | ACCESSKEY | LABEL ]

TABINDEX

يجب أن تعلم أنه يمكنك أن توجه زوارك ألي أماكن معينه بإستخدام المفتاح Tab ( الموجود فوق مفتاح ال Caps Lock) في الطبيعي عند الضغط علي مفتاح الTab ينقل بين أجزاء النموذج بالتسلسل لكن مع الخاصيه TABINDEX يمكنك في التحكم في أي من الأجزاء في النموزج تود أن يذهب لها الزائر الأول و إليك هذا المثال ضعك مؤشر الفأرة في أول صندوق وأضغط الزر Tab ماذا تلاحظ

Box 1
Box 3
Box 4
Box 2

أستمر في ضغط مفتاح الTab و ستجد المستعرض يتحرك إلي الوصلات ، بالطبع يمكنك إستخدام الخاصيه TABINDEX  مع الوصلات ولكن هي مفيده أكثر مع النماذج والأشكال وإليك الوسم الخاص بذلك

<FORM>
Box 1 <INPUT TYPE="text" NAME="TAB1" TABINDEX="1">
Box 3 <INPUT TYPE="text" NAME="TAB2" TABINDEX="3">
Box 4 <INPUT TYPE="text" NAME="TAB3" TABINDEX="4">
Box 2 <INPUT TYPE="text" NAME="TAB4" TABINDEX="2">
</FORM>

و يتجه المؤشر إلي المكان الذي يعرف بقيمه أعلي و هكذا و يمكن ان تعطي قيمة إلي أي عنصر من عناصر النموذج .

FIELDSET و LEGEND

هذان الوسمان التنظيميين الجدد يساعدونك علي تنضيم شكل النموذج دون إستخدام الجداول ( التي لربما تعطي مشاكل Netscape ) يستطيعان هذان الوسمان أن يقسموا العديد من المساحات كما ترى

1: البيانات الشخصيه الاسم البريد الإليكتروني

2: الألوان المفضله   الأزرق الأحمر الأخضر 

3: معلومات الإدخال
  

مارأيك من الواضح أنها طريقه جيده جدا في تجميع عناصر النموذج في مجموعات كما يمكنك تصنيفهما كل أصناف متشابه من المعلومات في مجموعه خاص بها.

أنت لديك وسمين الوسم FIELDSET يقوم بإنشاء الإطار حول النموذج و الوسم LEGEND يقوم بكتابه الكلمات و هذا هو طريقه كتابه هذا الوسم

<FIELDSET>
<LEGEND><B>1: البيانات الشخصيه</B></LEGEND>
الاسم <INPUT TYPE="text" NAME="NAME">
البريد الإليكتروني <INPUT TYPE="text" NAME="EMAIL">
</FIELDSET>

ما عليك هو فقط كتابه جميع البيانات التي تريد تجميعها داخل الوسم FIELDSET  و تضيف وسم LEGEND  في البدايه و تقوم بتنسيق النص كما تريد ، كما يمكنك أن تلون الأطر بإستخدام CSS و التي سوف نقوم بشرحها في التحديثات القادمة و يمكنك أستخدام خاصيه محاذاة الإطار إلي الجانب الذي تريد و تأخذ تلك القيم

LEFT, RIGHT, CENTER, BOTTOM أو TOP

يجب أن تعلم أن وسم FIELDSET يأخذ حجم الشاشه بأكملها ولا تستطيع تحديد مساحه محدده له فلذك يجب عليك أو يستحسن أن تضعه في جدول بسيط حتي تستطيع أن تسيطر علي حجمه

ACCESSKEY

هذه الخاصيه تمكنك من الإنتقال إلي جزء معين في الصفحة بالضغط علي مفتاح معين مع الزر Alt بالطبع أنت تري في جميع نوافذ الويندوز والبرامج العامة التي تستعملها خط تحت حرف من حروف الكلمة مثل File   Edit  .....إلخ و هذا يعطي أنه يوجد طريقة مختصرة تستطيع أن تستخدم هذه الخاصيه بالضغط علي مفتاح Alt+F فهذا سيجعلك تتجه إلي قائمة ملف وهكذا ، و أنت تستطيع أن تضيف هذه الخاصيه إلي عناصر الشكل المهمه كل ما عليك أن تضع هذه الخاصيه بجوار الوسم الخاص بالنموذج أو شكل من أشكاله

ACCESSKEY="X"

حيث X هو الحرف الذي يجب أن تضغط عليه مع Alt لكي تذهب إلي المجموعه الهامه مثلا نحن نستخدمة هنا في صندوق البحث الخاص بالموقع فقط أضغط علي Alt+S بالطبع كل الزوار والقراء المحترفين يعرفون أن الخط الموجود تحت الحرف له إختصار أو shortcut

LABEL

هذه الخاصيه تجعل قادر علي الضغط علي الكلامات المجاورة لشكل معين من أشكال النموذج بدلا من أن تضغط عليه لإختيارة ، وللتوضيع أكثر إليك هذا المثال

أسهل اليس كذلك و إليك الكود الخاص بها

<FORM>
<LABEL FOR="LABELEXAMPLE">Click here</LABEL>
<INPUT TYPE="checkbox" NAME="CHECK1" ID="LABELEXAMPLE">
</FORM>

يجب أن تضع الخاصيه For="...." لكي تقوم بتعريف الكلمات التي ستكتب بعدها ثم تحدد أي الصناديق التي سيتم إختيارها عن طريق ID="...." لا بد وأن تكتب بين القوسين" " نفس الاسم حتي يستطيع ان يؤثر فيها .

 

الدرس التالي»»»

< الصفحة الرئيسيه | المرجع الكامل | فهرس النماذج >

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 

فهرس النماذج  ¤

> النماذج الأساسيه
> تابع النماذج الأساسيه

> صورة للزر Submit

 

¤  Html4Arab صندوق الأدوات 

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم


أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "
 

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah