حقل إدخال
جزء من قسم 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)تحدي المراجعةتدرّب بنفسك: Playground لـ Web