CSSعناصر النماذج

تحسين تصميم النماذج

عناصر النماذج يمكن تحسين تصميمها و إظهارها بشكل رائع و كذلك يمكن إضافة أيقونات و مؤثرات بصرية لها لتبدو أكثر جاذبية.

Email Password Login

إفتحها في محرر الكود

في هذا الدرس ستتعرف على الخصائص التي تُستعمل لتحسين تصميم عناصر النماذج.

تحديد حجم عناصر النموذج

عند تحديد حجم العنصر لا تنسى إعطاؤه الخاصية box-sizing: border-box; لكي يتم احتساب الهوامش و حدوده ضمن حجمه الذي يمكنك تحديده بواسطة الخاصية width و الخاصية height.

في المثال التالي قمنا بجعل العناصر تظهر على كامل عرض النموذج.

input {
    width: 100%;
}

الإستفادة من نوعية العناصر

في المثال السابق سيتم تحديد الخصائص لجميع وسوم <input> مهما كان نوعها، في حال كان النموذج يحتوي على عدة وسوم و تريد إضافة خصائص مختلفة لها على أساس نوعها فتذكر أنه يمكنك تحديد العناصر بناءاً على أنواعها على النحو التالي:

• input[type=text] لتحديد مربعات النصوص فقط.
• input[type=password] لتحديد مربعات كلمات المرور فقط.
• input[type=button] لتحديد الأزرار العادية فقط.
• input[type=submit] لتحديد أزرار إرسال البيانات فقط و هكذا..

تحسين هوامش عناصر النموذج

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

في المثال التالي قمنا بإضافة هامش داخلي للعناصر حتى نبعد النص الداخلي فيها عن الحدود و كذلك قمنا بإضافة هامش خارجي من الأعلى بمقدار 10 بكسل و من الأسفل بمقدار 20 بكسل لكي تظهر عناوين مربعات الإدخال قريبةً منها و لتظهر العناصر بعيدة عن بعضها بشكل أفضل.

input {
    padding: 10px 15px;
    margin-top: 8px;
    margin-bottom: 20px;
}

تحسين تصميم حدود عناصر النموذج

يمكنك إظهار لون و شكل و سمك حدود العناصر بواسطة الخاصية border و كذلك يمكنك تحديد شكل زوايا العناصر بواسطة الخاصية border-radius لتظهر بالشكل الذي تريده.

في المثال التالي قمنا بإظهار حدود مربع النص بلون أزرق مع جعل زوايه مائلة بنسبة 4 بكسل.

input {
    border: 2px solid dodgerblue;
    border-radius: 4px;
}

في المثال التالي قمنا بإخفاء حدود مربع النص الأربعة و إظهار حدوده السفلية فقط و بلون أزرق.

input {
    border: none;
    border-bottom: 2px solid dodgerblue;
}

تحسين لون عناصر النموذج

يمكنك تحديد لون خط العناصر بواسطة الخاصية color و كذلك يمكنك تحديد خلفيتها بواسطة الخاصية background-color لتظهر بالشكل الذي تريده.

في المثال التالي قمنا بتحديد لون خلفية مربع النص، لون خطه و لون حدوده.

input {
    border: 1px solid darkgray;
    color: brown;
    background: linen;
    padding: 10px 15px;
    border-radius: 4px;
}

تصميم نموذج شفاف

في المثال التالي قمنا بجعل خلفية الصفحة سوداء و من ثم قمنا بجعل لون خلفية مربع النص شفافة و لون خطه و لون حدوده أزرق.

input {
    border: 2px solid deepskyblue;
    color: deepskyblue;
    background: transparent;
}

إضافة أيقونة لعناصر النموذج

إضافة أيقونة في بداية مربع النص يجعله يظهر بشكل مميز جداً و هذا الأمر يمكنك فعله من خلال إضافة هامش داخل في الجهة التي ستضيف فيها الأيقونة padding و من ثم عرض صورة الأيقونة كخلفية له من تلك الجهة.

في المثال التالي قمنا بإظهار أيقونة بحث في بداية مربع النص.

input[type=text] {
    background-image: url('search-icon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
}

تغيير لون حدود العنصر المحدد

عند الإنتقال أو النقر على أي عنصر من عناصر النموذج سواء مربع نص، زر عادي، قائمة منسدلة إلخ.. يصبح العنصر في حالة :focus فتلاحظ ظهور حدود خارجية outline لونها أزرق و هذا الأمر يفعله المتصفح لكي يساعد المستخدم في معرفة المكان الذي يقف عنده.

تستطيع استغلال الحالة :focus لإضافة المؤثرات التي تريدها للعنصر، فمثلاً يمكنك إخفاء الحدود الخارجية التي تظهر عند الوقوف على العناصر أو تغيير لونها أو تغيير لون خلفية العنصر بما يتناسب مع تصميمك.

في المثال التالي عند الوقوف على عناصر النموذج لن تظهر حدود خارجية لونها أزرق، بل ستصبح حدود العناصر نفسها سوداء.

input {
    outline: none;
    border: 2px solid darkgray;
}

input:focus {
    border-color: black;
}

إضافة مؤثرات لعناصر النموذج

لإضافة مؤثرات للعناصر نحتاج أن تكون العناصر في حالة :focus لكي تظهر المؤثرات عند الوقوف عندها. و لتحديد المدة التي سيتطلبها إكتمال التأثير نستخدم الخاصية transition و نمرر لها عدد الثواني كقيمة.

في المثال التالي عند الوقوف على عناصر النموذج ستصبح حدود العناصر سوداء خلال 0.4 ثانية.

input {
    transition: 0.4s;
}

input:focus {
    border-color: black;
}

في المثال التالي قمنا بتصميم مربع بحث حجمه يتمدد عند النقر عليه خلال نصف ثانية.

input[type=text] {
    width: 140px;
    transition: 0.5s;
}

input[type=text]:focus {
    width: 100%;
}

ضبط حجم مربع النص المتعدد الأسطر

مربع النص المتعدد الأسطر الذي نحصل عليه بواسطة الوسم <textarea> يمكن تحديد حجمه بواسطة الخاصيّتين width و height و لكن هذا الأمر لا يمنع المستخدم من إمكانية تغيير حجم العنصر بنفسه بالنقر على زاويته.

لتحديد ما إن كان المستخدم سيكون قادر على تغيير حجم مربع النص المتعدد الأسطر يمكنك استخدام الخاصية resize و من ثم تمرير إحدى القيم التالية لها.

في المثال التالي قمنا بتحديد طول و عرض الوسم <textarea> مع جعل حجمه قابل للتغيير عمودياً و لكنه ثابت أفقياً.

textarea {
    width: 100%;
    height: 150px;
    resize: vertical;
}