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

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

<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <title>إنشاء نموذج طلب توظيف</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>
                

قصص المستخدم User stories :

1. ينبغي أن يكون لديك عنصر div يحمل الفئة container.

2. داخل عنصر div، ينبغي أن يكون هناك عنصر form.

3. يجب أن يحتوي النموذج (form) على عنصر إدخال input من النوع text وبالمُعرِّف name ، وذلك لإدخال الاسم الكامل للمستخدم.

4. ينبغي أن يتوفر لديك عنصر input آخر من النوع email وبالمعرف email لإدخال عنوان البريد الإلكتروني للمستخدم.

5. يجب أن يتضمن النموذج عنصراً من نوع select يحمل المعرّف position، والذي يتيح للمستخدمين اختيار منصب وظيفي.

6. ينبغي أن يتوفر لديك عنصر fieldset يحمل الفئة radio-group.

7. داخل العنصر .radio-group، يجب أن تضع مجموعة من عناصر input من النوع radio مع التسميات labels المقابلة لها، وذلك لاختيار خيارات التوافر (على سبيل المثال: دوام كامل، دوام جزئي). يجب أن تكون قيمة الخاصية name لهذه المجموعة هي availability.

8. ينبغي أن يتوفر لديك عنصر textarea يحمل المُعرِّف message لإدخال رسالة.

9. ينبغي عليك ربط كل عنصر من عناصر input أو select أو textarea بعنصر label.

10. يجب أن يتوفر لديك عنصر زر button من النوع submit لإرسال النموذج.

11. أضف الفئة الزائفة :focus إلى عنصري input و textarea لتغيير لون حدودهما وإزالة الإطار الافتراضي عند التركيز عليهما.

12. يجب أن تحتوي عناصر input و select و textarea على فئة زائفة :invalid تُغيِّر لون الحدود إلى الأحمر عند اكتشاف إدخال غير صالح.

13. يجب أن تحتوي عناصر input و select و textarea على فئة زائفة :valid تُغيّر لون الحدود إلى الأخضر عند إدخال بيانات صحيحة.

14. يجب أن يحتوي عنصر button على فئة زائفة :hover تُغيِّر لون الخلفية عند تمرير مؤشر الفأرة فوقه.

15. استخدم الفئة الزائفة :checked على .radio-group input[type="radio"] لإضافة لون إطار، ولون خلفية، وظل للصندوق (box shadow) عند اختيار زر الاختيار (radio button).

16. استخدم الفئة الزائفة :checked مع أزرار الاختيار (radio buttons) لتغيير لون نص العنصر label المرتبط بها عند تحديد الخيار.

17. أضف الفئة الزائفة :first-of-type إلى عنصر input لتنسيق حقل الإدخال الأول بشكل مختلف (على سبيل المثال: جعل الزوايا مستديرة).

ملاحظة: تأكد من ربط ملف الأنماط (stylesheet) في ملف HTML وتطبيق قواعد CSS.

حل التطبيق :

<!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>

  <div class="container">
   <h1>نموذج طلب توظيف</h1>
   <form>
    <label for="name">الاسم الكامل:</label>
    <input type="text" id="name" name="name"placeholder="أدخل اسمك" required />
    
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email"placeholder="أدخل بريدك الإلكتروني" required />
    
    <label for="position">الوظيفة:</label>
    <select id="position" name="position" required>
     <option value="">اختر وظيفة</option>
     <option value="developer">مطور ويب</option>
     <option value="designer">مصمم واجهة/تجربة المستخدم (UI/UX)</option>
     <option value="tester">مختبِر برمجيات</option>
     <option value="manager">مدير مشاريع</option>
    </select>

    <fieldset class=radio-group>
     <legend>الإتاحة</legend>

     <input type="radio" id="full-time" name="availibity" value="full-time" checked />
     <label for="full-time">دوام كامل</label>

     <input type="radio" id="part-time" name="availibity" value="part-time" />
     <label for="part-time">دوام جزئى</label>
    </fieldset>

    <label for="message">لماذا ترغب في الحصول على هذه الوظيفة؟</label>
    <textarea id="message" name="message" placeholder="اكتب دوافعك" required></textarea>

    <button type="submit">قدِّم الطلب</button>
   </form>
  </div>
  
 </body>

</html>
                

* {
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 30px 20px;
 background-color: #fff;
}

.container {
 max-width: 640px;
 margin: 0 auto;
 padding: 25px 20px 12px;
 background-color: white;
 border-radius: 8px;
 box-shadow: 0 0 10px #00000015;
}

h1 {
 text-align: center;
 font-size: 32px;
 margin: 15px 0 22px;
}

label {
 display: block;
 margin: 10px 0;
 font-weight: bold;
}

input,
select,
textarea {
 width: 100%;
 padding: 10px;
 margin-bottom: 15px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-family: inherit;
 font-size: 14px;
}

/* Style the first input differently */
input:first-of-type {
 border-radius: 6px;
}

/* Focus State */
input:focus, 
textarea:focus {
 outline: none;
 border-color: #0066cc;
}

/* Invalid fields */
input:invalid, 
select:invalid, 
textarea:invalid {
 border-color: red;
}

/* Valid fields */
input:valid, 
select:valid, 
textarea:valid {
 border-color: green;
}

/* Availability group */
.radio-group {
 margin: 15px 2px 0;
 padding: 12px 15px 18px;
 border: 1px solid #aaa;
}

.radio-group legend {
 padding: 0 3px;
}

/* Radio buttons */
.radio-group input[type="radio"] {
 appearance: none;
 width: 24px;
 height: 24px;
 margin: 0 5px 0 0;
 padding: 0;
 border: 2px solid #ccc;
 border-radius: 50%;
 vertical-align: middle;
 cursor: pointer;
}

.radio-group input[type="radio"]:checked {
 border-color: green;
 background-color: white;
 box-shadow: inset 0 0 0 4px white;
 background-image: radial-gradient(green 50%, transparent 55%);
}

/* Selected option label */
.radio-group input[type="radio"]:checked + label {
 color: green;
}

/* Keep radio labels beside their buttons */
.radio-group input[type="radio"] + label {
 display: inline-block;
 margin: 0 5px 0 0;
 font-weight: normal;
 vertical-align: middle;
}

/* Motivation field */
textarea {
 height: 98px;
 resize: vertical;
}

/* Submit button */
button {
 width: 100px;
 padding: 10px;
 border: none;
 border-radius: 4px;
 background-color: green;
 color: white;
 font-size: 16px;
 cursor: pointer;
}

button:hover {
 background-color: darkgreen;
}

            

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