الربح من Clickworker في 2026

 الهدف من هذا الدرس:

تعلم كيفية تنسيق حقول الإدخال (input)، الأزرار (button)، وعناصر النماذج بشكل احترافي باستخدام CSS.

---

1. تحديد تنسيق حقول الإدخال

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

---

2. تغيير لون الإطار عند التركيز (focus)

input:focus,
textarea:focus {
  border-color: #4CAF50;
  outline: none;
}

---

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

button,
input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover,
input[type="submit"]:hover {
  background-color: #45a049;
}

---

4. تنسيق تسميات الحقول (Labels)

label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

---

5. محاذاة عناصر النموذج

يمكنك وضع كل عنصر داخل div أو form-group لتنظيم الحقول:

<div class="form-group">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name">
</div>

---

مثال عملي:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: sans-serif;
      background-color: #f2f2f2;
    }

    form {
      width: 400px;
      margin: 50px auto;
      background-color: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 15px;
    }

    input:focus,
    textarea:focus {
      border-color: #4CAF50;
      outline: none;
    }

    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 12px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

  <form>
    <label for="name">الاسم</label>
    <input type="text" id="name" name="name">

    <label for="email">البريد الإلكتروني</label>
    <input type="email" id="email" name="email">

    <label for="message">رسالتك</label>
    <textarea id="message" rows="5"></textarea>

    <input type="submit" value="إرسال">
  </form>

</body>
</html>

---

الواجب العملي:

1. أنشئ نموذج تواصل بسيط يحتوي على:
   • حقل الاسم، البريد، رسالة، وزر إرسال.
2. طبّق عليه تنسيقات CSS التي تعلمتها اليوم.
3. أضف تأثيرًا عند تركيز المؤشر على الحقول.

تعديل المقال