HTML وCSS / الأساسيات / الدرس 4
النماذج والتسميات وعناصر التحكم الأصلية
أنشئ عناصر واضحة الغرض والتجميع والإرسال قبل إضافة تنسيق مخصص.
في هذه الصفحة
أهداف الدرس
- البدء بالمهمة والبيانات
- فصل الاسم والنوع والإرسال
- التحقق من التفاعلات الكاملة
البدء بالمهمة والبيانات
يجمع النموذج قيما لغرض، فحدد الحقول اللازمة ومعنى كل قيمة قبل اختيار عناصرها. تختلف نماذج تفاعل النص والاختيار والمجموعة والمنطقة النصية. استخدم العناصر الأصلية المناسبة؛ فإعادة صنع select بعناصر div تتطلب تنفيذا كبيرا للمفاتيح والإتاحة. يحدد name البيانات المرسلة، ويحدد id العنصر في المستند، وقد يتشابهان دون أن يتطابق دورهما. تخدم التسمية المرئية الجميع وليست تكييفا مخفيا لقارئ الشاشة فقط.
ربط التسميات والتعليمات
تربط for في label بمعرف id الفريد للتحكم. يوفر النقر سلوك التسمية الأصلي ويوسع المساحة المفيدة. يختفي placeholder أثناء الكتابة ولا يعوض تسمية دائمة. اربط التعليمات أو الخطأ بواسطة aria-describedby مع إبقائها مرئية عند الحاجة. لا تضف aria-label عشوائيا لأنها قد تستبدل الاسم المتوقع من التسمية. اجمع الخيارات المرتبطة بواسطة fieldset وlegend عندما يلزم فهم علاقتها.
فصل الاسم والنوع والإرسال
يسمي المثال حقل بريد ويحدد الإكمال التلقائي وزر الإرسال. يستخدم عنوانا جزئيا وGET لعرض محلي مصطنع فقط؛ ويحتاج النشر طريقة ومعالجة وسياسة خصوصية مقصودة. يتيح email فحصا وواجهة إدخال مناسبين لكنه لا يثبت وجود العنوان أو ملكيته. تعبر required عن قيد في المتصفح ويجب فرضه في الخادم أيضا. يكون الزر داخل النموذج مرسلا افتراضيا ما لم يحدد نوعه؛ فاجعل الأفعال المحلية type="button".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Labeled field</title>
</head>
<body>
<main><h1>Request workshop information</h1><form action="#confirmation" method="get"><p><label for="email">Email address</label><input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-help"><span id="email-help">Use an address you can access.</span></p><button type="submit">Review request</button></form><p id="confirmation">This local example has no processing service.</p></main>
</body>
</html>
A labeled email field with connected instructions and a submit button.تسمي label الحقل ويرتبط الشرح منفصلا. استخدم قيما مصطنعة فقط في عرض GET المحلي. النتيجة المتوقعة: حقل بريد مسمى بتعليمات مرتبطة وزر إرسال.
تجميع اختيار واحد بصورة ميسرة
يعطي المثال أزرار الراديو name واحدة لتكوين اختيار واحد، ومعرفات مختلفة لتوضيح كل تسمية، وlegend للسؤال المشترك. يمكن أن يقدم checked افتراضا موثقا، لكن لا تحدد الموافقة أو تفضيلا حساسا دون مبرر. تختلف المفاتيح الأصلية بين النص والراديو، فاختبر العناصر الفعلية. القيمة المرسلة هي value وقد تختلف عن النص المرئي؛ اختر قيما آلية مستقرة وأوصافا واضحة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grouped options</title>
</head>
<body>
<main><h1>Session preference</h1><form><fieldset><legend>Choose a session</legend><p><input id="morning" type="radio" name="session" value="morning" checked><label for="morning">Morning</label></p><p><input id="afternoon" type="radio" name="session" value="afternoon"><label for="afternoon">Afternoon</label></p></fieldset><button type="button">Local demonstration only</button></form></main>
</body>
</html>
Exactly one session can be selected in the group.ينشئ الاسم مجموعة واحدة وتحدد legend السؤال وتربط المعرفات الخيارات، ويمنع نوع الزر إرسالا غير مقصود. النتيجة المتوقعة: يمكن تحديد جلسة واحدة فقط في المجموعة.
التحقق من التفاعلات الكاملة
استخدم النموذج بالمفاتيح والإكمال التلقائي والتكبير ومع الأخطاء. تحقق من ظهور التركيز وبقاء التسمية وعدم اعتماد التعليمات على اللون وحده. افحص قيما مصطنعة لتمييز غياب name من id. لا تجعل تعطيل الإرسال التفسير الوحيد لعدم الصلاحية؛ يحتاج المستخدم توجيها قابلا للعمل. تختلف الرسائل بين اللغات والمتصفحات فلا تفترض نصا عالميا. يحتاج العمل الفعلي إلى تحقق خادم ومعالجة آمنة وتأكيد يعكس النتيجة الحقيقية.
الأخطاء الشائعة وإصلاحها
يبدو الحقل مسمى دون اسم ميسر مفيد
- لماذا يحدث؟
- وُضع النص بجانبه فقط.
- كيف تصلحه؟
- اربط for بمعرف الحقل الفريد.
- كيف تتجنب تكراره؟
- افحص الأسماء وانقر التسميات.
يرسل زر مساعد النموذج فجأة
- لماذا يحدث؟
- أغفل نوعه داخل النموذج.
- كيف تصلحه؟
- حدد type="button" للفعل المحلي.
- كيف تتجنب تكراره؟
- صرح بغرض كل زر.
يغيب عنصر عن البيانات المرسلة
- لماذا يحدث؟
- له id دون name للإرسال.
- كيف تصلحه؟
- حدد الاسم والقيمة المقصودين.
- كيف تتجنب تكراره؟
- تحقق من بيانات إرسال مصطنعة.
اختبر فهمك
1. لماذا لا يعوض placeholder بكلمة «البريد» التسمية؟
اعرض الحل المشروح
يختفي عند الكتابة وقد يكون منخفض التباين ولا يقدم التعليمات الدائمة والعلاقة الأصلية نفسها. أضف label مرتبطة واستخدم placeholder لمثال اختياري فقط.
2. صمم خياري راديو لسرعة التسليم مع القيم المرسلة.
اعرض الحل المشروح
استخدم fieldset بعنوان «سرعة التسليم» وحقلين باسم speed ومعرفين مختلفين وقيمتي standard وexpress وتسميتين. يفرض الاسم اختيارا واحدا، وتربط المعرفات التسميات ولا تحدد حقل الخادم.
أهم ما تعلمته
- تتكامل التسميات المرئية والأسماء البرمجية.
- لا تعوض قيود العميل تحقق الخادم.
- اختر العناصر الأصلية قبل السلوك المخصص.