تعلم لغة css: التحكم في تصميم الاستمارات forms

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

في الدرس الماضي رأينا طريقة التحكم في الجداول Tables، ويمكنكم مراجعة  اللائحة الكاملة لدورة تصميم المواقع بلغتي html و css.

طريقة إظهار الاستمارات تختلف من متصفح لآخر، ولكن يمكن جعل الشكل واحد باستعمال لغة css.


مربع ادخال النص Text Input

الطثر من القواعد المستعملة رايناها سابقا وهي كالتالي:
font-size: حجم خط النص
color: لون النص
background-color: لون الخلفية
border: الخط المحيط
border-radius: حجم دوران الرؤوس الجانبية
:focus: شكل المربع عند النقر عليه
:hover: شكل المربع عند المرور عليه بفأرة الحاسوب
background-image: صورة خلفية

كود css:

input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input:focus {
background-color: #ffffff;
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.png");}