تقنيات نور التعليمية تقنيات نور التعليمية

آخر الأخبار

جاري التحميل ...

سلسلة دروس CSS | الدرس الخامس عشر: تنسيق النماذج (Forms)
مايو 05, 2025
الصفحة الرئيسية

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

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

سلسلة دروس CSS | الدرس الخامس عشر: تنسيق النماذج (Forms)

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. أضف تأثيرًا عند تركيز المؤشر على الحقول.

عن الكاتب

Tamer Ahmed

شاهد أيضاً

التعليقات


اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

تقنيات نور التعليمية