حلول معايير الويب لنماذج الويب

بعد الدخول إلى eYou.com، اضطررت على الفور إلى تحويل الإصدار الجديد من واجهة البريد الإلكتروني إلى XHTML+CSS، ولحسن الحظ، لا تزال مهاراتي الأساسية قوية بما فيه الكفاية، لذلك قمت بذلك بطريقة منظمة. بالطبع ستواجه مشاكل جديدة، على سبيل المثال، عندما تقوم عادةً بإنشاء صفحات ويب، نادرًا ما تستخدم النماذج لأنه ليس لديك أي خبرة في البرامج. ولحسن الحظ، لا يزال هناك جوجل في العالم، مما يسمح لي بالتعامل بسهولة مع التحديات الجديدة. اكتب بعض التجارب وشاركها مع الجميع.

استنادًا إلى اعتبارات إمكانية الوصول، يجب أن تتضمن الطريقة القياسية لكتابة النموذج مجموعة الحقول ووسيلة الإيضاح (الوصف) في <form> و</form> للسماح للمستخدمين بفهم ملخص حقل النموذج. الهيكل البسيط هو كما يلي:

في بعض الحالات، قد لا ترغب في أن تؤثر مجموعة الحقول ووسيلة الإيضاح على جماليات تصميمك، فمن السهل التعامل معها، ما عليك سوى ضبط حدود مجموعة الحقول على 0 وعرض وسيلة الإيضاح على لا شيء في CSS.

في معظم الحالات، يتم تقسيم تخطيط النموذج إلى عمودين، مع التسمية على اليسار ومربع الإدخال (نوع الإدخال = "نص"...) على اليمين. مع هذا التخطيط البسيط المكون من عمودين، أوصي بشدة بعدم استخدام الجداول. المرجع http://stylephreak.frogrun.com/uploads/source/cssform.php و http://www.aplus.co.yu/css/forms/?css=1 (مرجعان قيمان بالتأكيد، أنت بالفعل لا تعرفهما) لا أحتاج إلى قراءة المزيد)، وجدنا أن الحل الشائع لمعايير الويب هو إضافة div حول التسمية ونوع الإدخال = "text"...، وتعيين عرض div على الحظر. اضبط التسمية على float: left; (وهذا هو أيضًا سبب ضبط div للعرض: block;) ومن ثم يمكن وضع التسمية على نفس السطر مثل مربع الإدخال. الحيلة الصغيرة لمحاذاة الملصقات هي تثبيت عرض الملصق ثم استخدام محاذاة النص لمحاذاته إلى اليسار أو اليمين حسب الحاجة. نصيحة لتعيين العرض هي استخدام وحدة em لتعيين العرض بناءً على الحد الأقصى لعدد كلمات العلامة، دون الحاجة إلى اختبار البكسل بشكل شاق.

لتسهيل فهم شرحي، أكتب ببساطة بعض التعليمات البرمجية: