انقر هنا للعودة إلى العمود التعليمي HTML HTML.
أعلاه: لغة الترميز - اقتباسات
المصدر الأصلي الفصل 5 نموذج
كان التفاعل دائمًا محور الإنترنت ، مما يسمح للمستخدمين بتبادل المعلومات والتواصل مع بعضهم البعض. تمكننا النماذج من تنظيم وجمع المعلومات من المستخدمين بنفس الطريقة ، لذلك عند تصميم موقع ويب ، ننتمي دائمًا إلى الفئة التي يمكن استخدامها في أي موقف. على سبيل المثال ، وجدنا أن هناك حوالي 10000 طريقة مختلفة لتمييز النماذج. حسنًا ، ربما ليس كثيرًا ، لكن لا يزال بإمكاننا التفكير في العديد من المواقف ، مما يجعل من السهل على المستخدمين استخدام هياكل النماذج ويسهل أيضًا الإدارة من قبل مالكي مواقع الويب. طرق وضع علامة على النماذج ج: استخدام النماذج
<form action =/path/to/script method = post>
<griding>
<tr>
<TH> الاسم: </th>
<td> <input type = text name = name /> </td>
</r>
<tr>
<th> البريد الإلكتروني: </th>
<td> <input type = text name = email /> </td>
</r>
<tr>
<th> & nbsp ؛ </th>
<td> <type type = إرسال قيمة = إرسال /> < /td>
</r>
</table>
</form>
كثير من الناس لديهم أشكال طويلة مع الجداول. بسبب التردد العالي للاستخدام ، اعتدنا على رؤية أشكال النماذج بهذه الطريقة: العمود الأيسر هو وصف نص محاذاة يمينًا ، والعمود الأيمن هو عنصر شكل محدد يسارًا. يعد استخدام نموذج قائمتين بسيطين أحد الطرق البسيطة لإكمال عملية التنضيد السهل الاستخدام.
يعتقد بعض الناس أن النموذج غير مطلوب ، والبعض الآخر يعتقد أن النموذج يجب أن يعتبر مادة الشكل. لا نعتزم دعم أي من البيان ، ولكن في بعض الحالات ، أفضل طريقة لتحقيق تصميم نموذج معين عند استخدام نموذج ، وخاصة النماذج المعقدة مع العديد من العناصر المختلفة (النماذج التي تستخدم صناديق الراديو ، وصناديق المنسدلة ، وما إلى ذلك). قد يكون الاعتماد بالكامل على CSS للتعامل مع مثل هذه النماذج أمرًا محبطًا ، وغالبًا ما يتطلب <span> و <viv> استهلاك علامات أكثر من الجدول.
بعد ذلك ، انظر إلى الشكل 5-1. هذا هو تأثير طريقة عرض المتصفح البصري العام A:
الشكل 5-1: تأثير الأسلوب المعروض في المتصفح
ستجد أنه يمكن استخدام الجداول ترتيب عناصر النص بطريقة أنيقة للغاية. ومع ذلك ، لمثل هذا النموذج البسيط ، قد أتجنب استخدام الجداول واستخدام طرق أخرى لا تتطلب الكثير من العلامات. ما لم يتطلب التصميم البصري للنموذج مثل هذا التنضيد ، فقد لا يكون النموذج ضروريًا. في الوقت نفسه ، يجب أن ننظر أيضًا في العديد من سهولة الاستخدام. عند دراسة الطريقتين التاليتين ، سوف نتواصل مع هذا الجزء.
<form action =/path/to/script method = post>
<p>
الاسم: <إدخال نوع = اسم النص = name /> <br />
البريد الإلكتروني: <نوع الإدخال = اسم النص = البريد الإلكتروني /> <br />
<نوع الإدخال = إرسال قيمة = إرسال />
</p>
</form>
باستخدام فقرة واحدة وبعض العلامات <br /> هو وسيلة ممكنة لفصل جميع العناصر ، ولكن قد يتم تصويرها بصريًا. الشكل 5-2 تأثير عرض النسخة الحادية عشرة من المتصفح:
الشكل 5-2: تأثير طريقة عرض المتصفح ب
على الرغم من أنه يمكننا إكمال التصميم دون استخدام طاولة ، إلا أنه يبدو مزدحمًا وقبيحًا بعض الشيء. في الوقت نفسه ، واجهنا أيضًا المشكلة التي لا يمكن محاذاة عناصر النموذج بشكل مثالي.
تمكنا من إضافة تصحيح إضافي إلى عنصر <pection> مع CSS لتخفيف الشعور بالازدحام. مثله:
مدخل{
الهامش: 6px 0 ؛
}
تضيف الفقرة السابقة 6 بكسل من التصحيحات الإضافية إلى الأجزاء العلوية والسفلية من كل عنصر <Put> (بما في ذلك الاسم ، مربع إدخال البريد الإلكتروني ، وزر إرسال) ، ويضيف مساحة إضافية بين العناصر. تماما مثل الشكل 5-3:
الشكل 5-3. تأثير الطريقة ب بعد إضافة تصحيحات إضافية إلى عنصر الإدخال
ليس لدى الطريقة B نفسها أي مشاكل كبيرة ، ولكن يمكن أيضًا ضبطها على جعل النموذج أفضل. تستخدم الطريقة C أيضًا هذه التقنيات المفعمة بالحيوية ، لذلك دعونا نلقي نظرة.
أقل
<p> <label for = name> الاسم: < /label> <br />
<إدخال نوع = معرف النص = الاسم = name /> </p>
<p> <label for = email> البريد الإلكتروني: < /label> <br />
<نوع الإدخال = معرف النص = اسم البريد الإلكتروني = البريد الإلكتروني /> </p>
<p> <type type = إرسال القيمة = إرسال /> </p>
</form>
يعجبني عدة أشياء حول الطريقة C. أولاً ، للحصول على نموذج بسيط مشابه لهذا المثال ، وجدت أنه من المناسب وضع كل وصف وعنصر النموذج في فقرة منفصلة. دون إضافة عرض النمط ، يجب أن تكون المسافة المسبقة بين الفقرات كافية لتجعلك تقرأ المحتوى بسهولة. في وقت لاحق ، يمكننا تعيين الفاصل الزمني باستخدام CSS كعلامات <p> الموجودة في النموذج.
لقد ذهبنا حتى خطوة إلى الأمام ووضعنا معرفًا فريدًا = هذا الشكل للنموذج. لذلك ، يمكن الآن كتابة الفاصل الزمني الدقيق الذي ذكرته للتو تقريبًا مثل هذا:
#thisform p {
الهامش: 6px 0 ؛
}
هذا يعني ضبط التصحيحات العلوية والسفلية والخارجية للعلامة <p> في هذا النموذج إلى 6 بكسل ، وتغطي قيم الإعداد المسبق المحدد من قبل المتصفح للفقرات العامة.
هناك اختلاف آخر بين الطريقة C والطريقتين الأولين هو أنه على الرغم من أن كل مجموعة (مربع تعليمي ومربع إدخال) يتم وضعها في <p> ، ما زلنا نضعها في خط مستقل. باستخدام <br /> لفصل كل عنصر ، يمكننا تجاوز مشكلة أطوال النص المختلفة ، مما يؤدي إلى عدم القدرة على مواءمة عناصر الإدخال تمامًا.
يوضح الشكل 5-4 تأثير طريقة عرض المتصفح العامة C ، حيث تم استخدام الأنماط المعيّنة لعلامة <p>.
الشكل 5-4. تأثير طريقة عرض المتصفح C ، باستخدام CSS لعلامة P.
بالإضافة إلى التأثير البصري للطريقة C ، فإن أهم ميزة هي أنه يحسن سهولة الاستخدام.
يتطلب استخدام TAG <BALLE> لتحسين سهولة استخدام النموذج خطوتين ، وقد أكملت الطريقة C هاتين الخطوتين. أولاً ، استخدم <sably> لتوصيل وصف النص بعناصر النماذج ذات الصلة ، سواء كان مربع إدخال النص (حقل النص) ، مربع إدخال كتلة النص (منطقة النص) ، مربع الراديو (Radio) ، مربع الاختيار (مربع الاختيار) ، إلخ. الطريقة C تستخدم علامة <sably> على الاسم: والبريد الإلكتروني ، وتوصيلها بالعناصر التي تدخل البيانات.
الخطوة الثانية هي إضافة السمة إلى علامة <blabe> وملء معرف مربع الإدخال المقابل.
على سبيل المثال ، في الطريقة C ، استخدم علامة <blabe> لالتفاف الاسم: وقم بملء السمة مع نفس قيمة معرف مربع الإدخال بعد ذلك.
أقل
<p> <label for = name> الاسم: < /label> <br />
<إدخال نوع = معرف النص = الاسم = name /> </p>
<p> <label for = email> البريد الإلكتروني: < /label> <br />
<نوع الإدخال = معرف النص = اسم البريد الإلكتروني = البريد الإلكتروني /> </p>
<p> <type type = إرسال القيمة = إرسال /> </p>
</form>
ربما سمعت الآخرين يقولون إنه يجب عليك إضافة علامة <blabe> إلى النموذج. السؤال الأكثر أهمية هو لماذا يجب عليك استخدام علامة <blabe>.
من الجيد إنشاء جمعيات التسمية/المعرفات التي تسمح لقراء الشاشة بقراءة التسمية الصحيحة لكل عنصر من عناصر النماذج دون تأثير ترتيب التخطيط. في الوقت نفسه ، يتم إنشاء علامة <blable> لتحديد ملصقات شريط النماذج . عند استخدام هذه العلامة ، نشرح معنى كل عنصر وتقوية بنية النموذج.
هناك فائدة إضافية تتمثل في استخدام علامة <blabe> عند معالجة مربعات الاختيار الواحد ومتعدد المراكز ، أي أن معظم المتصفحات ستغير أيضًا قيمة العنصر عندما ينقر المستخدم على النص في <sable>. يمكن أن ينشئ هذا مساحة نقرة أكبر لعنصر الإدخال ، مما يجعل من السهل على المستخدمين الذين يعانون من إكليل التنقل لملء النماذج (Mark Pilgrim ، الغوص في إمكانية الوصول ، http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
على سبيل المثال ، إذا قمت بإضافة مربع متعدد الفحص إلى النموذج بحيث يمكن للمستخدم اختيار كتابة هذه المعلومات ، فيمكننا استخدام علامة <sable> مثل هذا:
أقل
<p> <label for = name> الاسم: < /label> <br />
<إدخال نوع = معرف النص = الاسم = name /> </p>
<p> <label for = email> البريد الإلكتروني: < /label> <br />
<نوع الإدخال = معرف النص = اسم البريد الإلكتروني = البريد الإلكتروني /> </p>
<p> <input type = checkbox id = تذكر الاسم = تذكر /> <label for = تذكر> تذكر هذه المعلومات؟ </label> </p><p> <type type = إرسال القيمة = إرسال /> </p>
</form>
من خلال وضع علامة على مربعات الفحص المتعددة بهذه الطريقة ، يمكن الحصول على مخصصتين: يمكن لقارئ الشاشة قراءة النص التوضيحي الصحيح (تمامًا مثل هذا المثال ، يمكن أن يظهر النص بعد مربع الإدخال) ، وأصبح نطاق تبديل مربعات الفحص متعددة الفحص أكبر. الآن ، بالإضافة إلى صناديق الفحص المتعددة نفسها ، يتم تضمين جزء النص أيضًا (تدعم معظم المتصفحات).
يوضح الشكل 5-5 تأثير عرض هذا النموذج في المتصفح. نشير على وجه التحديد إلى نطاق تبديل مربع الفحص متعدد الفحص بعد التوسيع:
الشكل 5-5. مربعات التحديد المتعددة التي تتضمن نصًا في نطاق التبديل
بالإضافة إلى النماذج والفقرات ، أريد أيضًا أن أظهر طريقة أخرى لتمييز النموذج ، باستخدام قائمة التعريف.
الصفحة السابقة 1 2 3 4 الصفحة التالية اقرأ النص الكامل