حقل إدخال
جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 52 من 76.
التحدي
سهلفي هذا الدرس، سنقوم بتحسين مظهر حقول الإدخال لجعلها سهلة الاستخدام.
قم بتنسيق حقول <input>. اتبع الخطوات أدناه:
- اجعل عرضها 100% wide لتناسب النموذج بشكل جيد.
- أضف padding حتى لا يلمس النص الموجود بالداخل الحواف.
- قم بتطبيق border بلون هادئ.
- اجعل الزوايا مستديرة.
- أضف بعض الـ margin بين حقول الإدخال حتى لا تبدو قريبة جداً من بعضها البعض.
- استخدم box-sizing: border-box; بحيث يشمل العرض الحشوة (padding) والحدود (borders).
جرّب بنفسك
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة