CSSVerse | الفئات والعناصر الزائفة

تصميم نموذج لاجتماع أولياء الأمور والمعلمين Parent Teacher Conference Form

ورشة عمل

في هذه الورشة، ستتدرب على إضافة أنماط مخصصة لأزرار الاختيار (radio buttons) من خلال بناء نموذج خاص باجتماعات أولياء الأمور والمعلمين. تم توفير الهيكل الأساسي للغة HTML لك.

هيكل HTML الأساسي HTML boilerplate


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نموذج لاجتماع أولياء الأمور والمعلمين</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>

الخطوات

الخطوة 1

ابدأ بإضافة عنصر رئيسي main يحمل فئة (class) تسمى container.

الخطوة 2

بعد ذلك، داخل العنصر الرئيسي main ، أضف عنصراً من نوع h1 يحتوي على النص نموذج لاجتماع أولياء الأمور والمعلمين ، مع تعيين الفئتين title و center له.

الخطوة 3

بعد ذلك، أضف عنصراً من نوع فقرة (paragraph element) يحتوي على النص:

يرجى تعبئة النموذج أدناه للمساعدة في تحديد موعد لاجتماع أولياء الأمور والمعلمين..

يجب أن يتضمن عنصر الفقرة هذا أيضاً فئتي التنسيق (classes) التاليتين: description و center.

الخطوة 4

حان الآن وقت إضافة النموذج form وعناصر الإدخال input التي ستُمثِّل بيانات ولي الأمر والطالب.

ابدأ بإضافة عنصر نموذج form أسفل عنصر الفقرة p.

الخطوة 5

سيركز القسم الأول (first section) من النموذج (form) على معلومات الطالب، مثل اسمه وصفّه الدراسي.

داخل عنصر النموذج form ، أضف عنصراً من نوع fieldset. وداخل عنصر الـ fieldset هذا، أضف عنصراً من نوع legend يحتوي على النص معلومات الطالب.

أسفل عنصر legend ، أضف عنصراً من نوع label يحتوي على النص الاسم الكامل: ، مع تعيين السمة for بقيمة student-name.

الخطوة 6

تتمثل الخطوة التالية في إضافة عنصر الإدخال input المرتبط ببيانات الطالب.

ابدأ بإضافة عنصر إدخال input مع ضبط السمة type على القيمة text. بعد ذلك، أضف السمتين name و id ، واضبط كلتيهما على القيمة student-name.

بعد ذلك، أضف سمة placeholder مضبوطة على قيمة مثل مثال: أحمد محمد. وأخيرًا، أضف سمة required.

الخطوة 7

حان الآن وقت إضافة عناصر النموذج لجمع معلومات حول درجات الطالب.

ابدأ بإضافة عنصر تسمية label آخر يحتوي على النص درجة الطالب: ، واضبط السمة for على القيمة grade.

بعد ذلك، أسفل عنصر التسمية label الخاص بك، أضف عنصراً من نوع إدخال input بحيث يتم ضبط السمة type على القيمة number. كما يجب ضبط السمتين name و id على القيمة grade ، وضبط السمة placeholder على القيمة مثال: 4. وأخيراً، اجعل حقل الإدخال هذا إلزامياً (required).

الخطوة 8

الخطوة التالية هي القسم المخصص لمعلومات الوالدين في النموذج.

ابدأ بإضافة عنصر fieldset آخر. وداخل عنصر fieldset هذا، أضف عنصراً من نوع legend يحتوي على النص: معلومات الوالد/ولي الأمر.

الخطوة 9

حان الآن وقت إضافة عناصر النموذج لجمع معلومات ولي الأمر.

ابدأ بإضافة عنصر label يحتوي على النص اسم الوالد/ولي الأمر: ، واضبط السمة for على القيمة parent-name.

بعد ذلك، أسفل عنصر التسمية label الخاص بك، أضف عنصر إدخال input بحيث تكون قيمة السمة type هي text. يجب ضبط قيمتي السمتين name و id على parent-name ، بينما تُضبط قيمة السمة placeholder على مثال: محمد علي. وأخيراً، اجعل عنصر الإدخال هذا إلزامياً (required).

الخطوة 10

في الخطوات القليلة التالية، ستضيف عناصر النموذج المسؤولة عن جمع وسيلة التواصل المفضلة لدى المستخدم.

ابدأ بإضافة عنصر fieldset آخر، مع تضمين عنصر legend بداخله. يجب أن يحتوي عنصر legend على النص طريقة التواصل المفضلة.

الخطوة 11

تتمثل الخطوة التالية في إضافة عناصر التسمية label والإدخال input الخاصة بطريقة التواصل عبر البريد الإلكتروني.

ابدأ بإضافة عنصر label يحمل الفئة contact-method وخاصية for مضبوطة على القيمة email. يجب أن يكون نص التسمية (label) هو البريد الإلكتروني: .

أسفل عنصر التسمية label الخاص بك، أضف زر اختيار (radio button) بحيث يتم ضبط خاصيتي id و value على القيمة email. كما يجب ضبط خاصية name على القيمة contact-method ، وضبط خاصية class على القيمة contact-method-radio-btn.

وأخيرًا، تأكد من تحديد زر الاختيار هذا بشكل افتراضي (checked by default).

الخطوة 12

بعد ذلك، أضف تسمية label أخرى تحمل الفئة contact-method وخاصية for مضبوطة على القيمة phone. يجب أن يكون نص التسمية هو: الهاتف: .

أسفل عنصر التسمية label الخاص بك، أضف زر اختيار (radio button) بحيث يتم ضبط خاصيتي id و value على القيمة phone. كما يجب ضبط خاصية name على القيمة contact-method ، وضبط خاصية class على القيمة contact-method-radio-btn.

الخطوة 13

من الممارسات الجيدة إتاحة المجال للمستخدمين لإضافة ملاحظات أو مخاوف إضافية.

أسفل عنصر fieldset الثالث الخاص بك، أضف عنصر fieldset جديداً. وبداخله، أضف عنصر legend يحتوي على النص ملاحظات إضافية.

الخطوة 14

أضف الآن عنصراً من نوع label يحتوي على النص هل هناك أي مخاوف أو موضوعات محددة تود مناقشتها؟ ، مع ضبط السمة for على القيمة notes.

أسفل هذا الوسم label، أضف عنصراً من نوع textarea. عيّن خاصية id له بالقيمة notes ، وخاصية name بالقيمة notes ، واضبط عدد الصفوف rows على 4، وعدد الأعمدة cols على 50.

الخطوة 15

وأخيرًا، ينبغي عليك إضافة زر الإرسال (submit button) الخاص بالنموذج.

أسفل عنصر fieldset الأخير، أضف عنصر button يحمل الفئة submit-btn وخاصية type مضبوطة على القيمة submit. يجب أن يكون النص داخل الزر هو إرسال النموذج.

بهذا، تكتمل بنية HTML الخاصة بك!

الخطوة 16

بعد اكتمال بنية HTML، ينبغي عليك الانتقال إلى تنسيق CSS.

افتح ملف styles.css الخاص بك. أولاً، عيّن لون خلفية داكناً لعنصر body ، ولوناً فاتحاً للنص.

حدد عنصر body واضبط خاصية background-color على القيمة midnightblue ، وخاصية color على القيمة whitesmoke.

الخطوة 17

بعد ذلك، ينبغي عليك تنسيق الحاوية الرئيسية (main container). حدد العنصر الذي يحمل الفئة container واضبط خاصية background-color الخاصة به على الرمز (hex-code) الست عشري #ffffff1a.

رمز اللون (Hex code) هو تركيبة مكونة من ستة عناصر من الأرقام والحروف، تُستخدم في لغتي HTML وCSS لتمثيل الألوان. يبدأ هذا الرمز بعلامة # تليها ثلاثة أزواج:

يمثل الرقمان الأولان اللون الأحمر
ويمثل الرقمان التاليان اللون الأخضر
أما الرقمان الأخيران فيمثلان اللون الأزرق

على سبيل المثال، #ffffff هو اللون الأبيض الصافي (pure white)؛ لأنه يمتلك القيمة القصوى (maximum value) لكل من الأحمر والأخضر والأزرق.

يمكنك أيضاً إضافة رقمين إضافيين في النهاية للتحكم في درجة التعتيم (وهو ما يُعرف بقناة ألفا - alpha channel). ففي الكود #ffffff1a ، تجعل القيمة 1a اللون الأبيض شبه شفاف (semi-transparent). وكلما انخفضت قيمة "ألفا" (alpha)، زادت شفافية اللون. ستتعرف على المزيد حول أكواد الألوان (hex codes) لاحقاً!

الخطوة 18

بالنسبة للحاوية الرئيسية container ، اضبط خاصية العرض width على 80% ، والحد الأقصى للعرض max-width على 600px. أضف أيضاً خاصية نصف قطر الحدود border-radius بقيمة 10px ، واضبط الهوامش margin على 20px من الأعلى والأسفل و auto من الجانبين لتوسيطها أفقياً.

الخطوة 19

والآن، ينبغي عليك إضافة بعض الهوامش الداخلية (padding) إلى الحاوية (container). اضبط قيمة الهوامش الداخلية padding على 10px 20px ؛ وبهذا تكون قد حددت هامشاً داخلياً مقداره 10px من الأعلى والأسفل، و 20px من اليمين واليسار.

الخطوة 20

لإبراز الحاوية (container)، ينبغي عليك إضافة ظل box-shadow مضبوط على القيم: 0 5px 15px black.

يُضيف هذا تأثير ظل حول الحاوية. وتتحكم القيم - على التوالي - في الإزاحة الأفقية (horizontal offset)، والإزاحة الرأسية (vertical offset)، ونصف قطر التمويه (blur radius)، واللون (color).

الخطوة 21

لقد أضفت فئة (class) باسم center إلى بعض العناصر في ملف HTML. والآن، ينبغي عليك تعريف هذه الفئة لجعل تلك العناصر تتمركز في الوسط.

استهدف الفئة (class) التي تحمل الاسم center ، واجعل العناصر التي تنتمي إليها تتمركز في الوسط باستخدام الخاصية text-align مضبوطة على القيمة center.

الخطوة 22

يجب أن يكون نص الوصف أكبر قليلاً. حدد العنصر الذي يحمل الفئة description واضبط حجم الخط font-size الخاص به على 1.2rem.

الخطوة 23

حان الوقت لتنسيق عناصر fieldset ومنحها حدوداً مميزة.

حدد عنصر fieldset. اضبط حدوده border لتكون 1px solid gray ، واجعل نصف قطر الحدود border-radius لتكون 5px ، والهامش margin ليكون 20px 0 ، والحشوة padding لتكون 20px.

الخطوة 24

لجعل نص legend أكثر بروزاً، تحتاج إلى تنسيقه.

حدد العنصر fieldset legend. اضبط خاصية font-size له على القيمة 1.3rem ، وخاصية font-weight على القيمة 600.

تتحكم الخاصية font-weight في مدى سماكة النص.

من القيم الشائعة لـ font-weight :

normal وزن عادي (افتراضي)
bold نص عريض
lighter أفتح لوناً من العنصر الأصل
bolder أكثر سماكة من العنصر الأصل
قيم رقمية مثل:
- 100 (رقيق - thin)
- 400 (عادي - normal)
- 700 (عريض - bold)
- 900 (عريض جداً - extra bold)

الخطوة 25

الآن، ينبغي عليك زيادة حجم الخط لجميع عناصر label.

حدد العنصر label واضبط خاصية font-size الخاصة به على 1.2rem.

الخطوة 26

بشكل افتراضي، تكون عناصر (label) من النوع (inline). ولجعلها تترتب عموديًا (مع استثناء التسميات الخاصة بأزرار الاختيار radio buttons)، استخدم الفئة الزائفة :not().

تعمل الفئة الزائفة :not() على نفي عملية الاختيار؛ فهي تحدد هنا جميع عناصر label التي لا تحمل الفئة contact-method.

حدد العناصر label:not(.contact-method) ، ثم اضبط الخاصية display على block والخاصية margin على 10px 0.

الخطوة 27

والآن، ينبغي عليك تنسيق عناصر input وtextarea. وغالباً ما يُستحسن البدء بتحديد تنسيقات عامة لهذين العنصرين، ثم إجراء تعديلات أدق على أنواع محددة منهما.

بالنسبة للعناصر input:not(.contact-method-radio-btn), textarea ، اضبط الخصائص التالية: background-color على #ffffff1a ، و width على 95% ، و border على 1px solid gray ، و border-radius على 5px ، و padding على 10px.

يستثني الجزء :not(.contact-method-radio-btn) أزرار الاختيار (radio buttons) التي تحمل هذا الصنف (class) من الخضوع لتنسيقات هذه القاعدة. وبهذه الطريقة، يمكننا تطبيق تنسيقات عامة على معظم عناصر الإدخال (inputs) مع إبقاء أزرار الاختيار بمعزل عن ذلك.

ستجعل هذه الأنماط حقول النموذج أكثر عرضاً وأسهل في القراءة. جَرِّب معاينة النموذج لتلاحظ التغييرات التي طرأت على التنسيق.

الخطوة 28

لضمان ظهور النص المُدخل في حقول الإدخال (inputs) ومناطق النصوص (textareas)، وكذلك النصوص النائبة (placeholders) الخاصة بها، قم بتحديد لونها.

حدد input, input::placeholder, textarea وقم بتعيين color إلى whitesmoke.

الخطوة 29

حان الآن وقت تخصيص (customize) أزرار الاختيار (radio buttons). ففي وضعها الافتراضي، تظهر هذه الأزرار بالمظهر الأصلي الذي يوفره المتصفح؛ لذا ستحتاج إلى إزالة هذا المظهر لتتمكن من ابتكار شكل مخصص لها.

حدد العنصر الذي يحمل الفئة contact-method-radio-btn. واضبط خاصية المظهر appearance على القيمة none.

الخطوة 30

ينبغي عليك تحديد حجم وشكل لأزرار الاختيار (radio buttons) المخصصة الخاصة بك.

مع الاستمرار في استهداف العنصر .contact-method-radio-btn، اضبط خاصية width على 20px ، وخاصية height على 20px ، وخاصية border-radius على 50% ، وخاصية border على 2px solid gray.

الخطوة 31

بشكل افتراضي، قد لا تظهر عناصر النماذج - مثل أزرار الاختيار (radio buttons) - محاذاةً تماماً مع تسمياتها (labels)، لا سيما إذا كان نص التسمية أكثر ارتفاعاً أو كانت إعدادات الخط المستخدمة فيه مختلفة.

لمحاذاة أزرار الاختيار (radio buttons) عمودياً مع تسمياتها، يمكنك استخدام الخاصية vertical-align. تتحكم هذه الخاصية في كيفية اصطفاف العناصر من نوع (inline) أو (inline-block) عمودياً بالنسبة للنص المحيط بها.

والآن، اضبط خاصية vertical-align على القيمة bottom لأزرار الاختيار (radio buttons). يمكنك تجربة قيم أخرى مثل middle أو top لملاحظة تأثيرها على المحاذاة، لكن القيمة bottom عادةً ما تكون مناسبة لأزرار الاختيار التي تظهر بجانب التسميات (labels).

الخطوة 32

والآن، عليك إنشاء الدائرة الداخلية التي ستظهر عند تحديد زر الاختيار (radio button). وللقيام بذلك، ستستخدم العنصر الزائف (pseudo-element) المسمى ::before.

تتيح لك العناصر الزائفة (pseudo-elements)، مثل ::before ، إدراج محتوى إضافي قبل العنصر الفعلي. وغالباً ما يُستخدم ذلك لأغراض تزيينية (decorative purposes).

استهدف العنصر الزائف (pseudo-element) المسمى .contact-method-radio-btn::before ، واضبط الخاصية display على block ، والخاصية content على " " ، والخاصية width على 10px ، والخاصية height على 10px ، والخاصية border-radius على 50%.

الخطوة 33

عليك تحديد موضع الدائرة الداخلية (inner circle) وجعلها غير مرئية في البداية.

لا نزال نستهدف العنصر .contact-method-radio-btn::before ، ونضبط الخاصية transform لتصبح translate(-3px, 3px) scale(0). تعمل الدالة translate على تحريك الدائرة قليلاً، بينما تقوم الدالة scale(0) بتقليص حجمها إلى الصفر، مما يجعلها مخفية بشكل افتراضي.

أضف أيضاً خاصية transition بقيمة all 0.3s ease-in للحصول على حركة انسيابية (smooth animation) عند ظهور العنصر. وهذا يعني أن أي تغيير في الأنماط (styles) سيستغرق 0.3 ثانية ليتم تنفيذه، حيث يبدأ ببطء ثم تزداد سرعته تدريجياً.

الخطوة 34

حان الآن وقت تحديد ما يحدث عند اختيار زر الاختيار (radio button).

أنت تقوم بتنسيق الدائرة الداخلية فقط عند اختيار زر الاختيار (radio button)، لذا يجب أن يكون المُحدِّد (selector) الخاص بك هو .contact-method-radio-btn:checked::before.

في القاعدة، اضبط transform على translate(-3px, 3px) scale(1) ، واضبط background-color على lightgreen.

تعمل خاصية transform على تحريك الدائرة الداخلية قليلاً وتكبير حجمها ليصل إلى الحجم الكامل باستخدام scale(1) ، بينما يملأ اللون الأخضر الفاتح (lightgreen) الدائرة؛ وذلك للإشارة إلى اختيار هذا الخيار وجعله مرئياً.

الخطوة 35

حان الوقت لتنسيق زر الإرسال (submit button).

حدد العنصر الذي يحمل الفئة submit-btn. اضبط خاصية cursor على pointer (للإشارة إلى أنه قابل للنقر)، واجعل background-color باللون royalblue ، و color باللون whitesmoke ، وألغِ الحدود border: none ، واضبط border-radius على 6px ، و padding على 12px 20px.

الخطوة 36

اضبط font-size على 1.1rem ، و display على block ، و margin على auto لتوسيط الزر.

الخطوة 37

أخيرًا، أضف تأثيرًا عند تمرير المؤشر فوق زر الإرسال، وذلك لتوفير استجابة أفضل للمستخدم (better user feedback).

حدد .submit-btn:hover واضبط خاصية background-color الخاصة به على midnightblue.

تهانينا على إتمام هذه الورشة!

حل التطبيق :

index.html


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نموذج لاجتماع أولياء الأمور والمعلمين</title>
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

  <main class="container">
   <h1 class="center title">نموذج لاجتماع أولياء الأمور والمعلمين</h1>
   <p class="center description">يرجى تعبئة النموذج أدناه للمساعدة في تحديد موعد لاجتماع أولياء الأمور والمعلمين.</p>
   <form>
    <fieldset>
     <legend>معلومات الطالب</legend>
     <label for="student-name">الاسم الكامل: </label>
     <input type="text" name="student-name" id="student-name" placeholder="مثال: أحمد محمد" required />

     <label for="grade">درجة الطالب: </label>
     <input type="number" name="grade" id="grade" placeholder="مثال: 4" required />
    </fieldset>
    <fieldset>
     <legend>معلومات الوالد/ولي الأمر</legend>
     <label for="parent-name">اسم الوالد/ولي الأمر: </label>
     <input type="text" name="parent-name" id="parent-name" placeholder="مثال: محمد علي" required />
    </fieldset>
    <fieldset>
     <legend>طريقة التواصل المفضلة</legend>
     <label class="contact-method" for="email">البريد الإلكتروني: </label>
     <input type="radio" id="email" value="email" name="contact-method" class="contact-method-radio-btn" checked />
     
     <label class="contact-method" for="phone">الهاتف: </label>
     <input type="radio" id="phone" value="phone" name="contact-method" class="contact-method-radio-btn" />
    </fieldset>
    <fieldset>
     <legend>ملاحظات إضافية</legend>
     <label for="notes">هل هناك أي مخاوف أو موضوعات محددة تود مناقشتها؟</label>
     <textarea id="notes" name="notes" rows="4" cols="50"></textarea>
    </fieldset>
    <button class="submit-btn" type="submit">إرسال النموذج</button>
   </form>
  </main>

 </body>
</html>

styles.css


body {
 background-color: midnightblue;
 color: whitesmoke;
}

.container {
 background-color: #ffffff1a;
 width: 80%;
 max-width: 600px;
 border-radius: 10px;
 margin: 20px auto;
 padding: 10px 20px;
 box-shadow: 0 5px 15px black;
}

.center {
 text-align: center;
}

.description {
 font-size: 1.2rem;
}

fieldset {
 border: 1px solid gray;
 border-radius: 5px;
 margin: 20px 0;
 padding: 20px;
}

fieldset legend {
 font-size: 1.3rem;
 font-weight: 600;
}

label {
 font-size: 1.2rem;
}

label:not(.contact-method) {
 display: block;
 margin: 10px 0;
}

input:not(.contact-method-radio-btn), textarea {
 background-color: #ffffff1a;
 width: 95%;
 border: 1px solid gray;
 border-radius: 5px;
 padding: 10px;
}

input, input::placeholder, textarea {
 color: whitesmoke;
}

.contact-method-radio-btn {
 appearance: none;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 border: 2px solid gray;
 vertical-align: bottom;
}

.contact-method-radio-btn::before {
 display: block;
 content: " ";
 width: 10px;
 height: 10px;
 border-radius: 50%;
 transform: translate(3px, 3px) scale(0);
 transition: all 0.3s ease-in;
}

.contact-method-radio-btn:checked::before {
 transform: translate(3px, 3px) scale(1);
 background-color: lightgreen;
}

.submit-btn {
 cursor: pointer;
 background-color: royalblue;
 color: whitesmoke;
 border: none;
 border-radius: 6px;
 padding: 12px 20px;
 font-size: 1.1rem;
 display: block;
 margin: auto;
}

.submit-btn:hover {
 background-color: midnightblue;
}

معاينة التطبيق :

→ السابق التالي ←