دورات الصيف ... 2009
  1. الرئيسية
  2. الإحصائيات
  3. البحث
  4. جديد الدروس
  5. أخبر صديقك
  6. اتصل بنا

المدرسة العربية للبرمجة  » برمجة مواقع الإنترنت » CSS » طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي

 طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي  أضيف في: 20-2-1431هـ
إليك طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي
الصفحة مجربة على: Chrome, Safari, Opera, Firefox و IE7
imgcache/655_geek4arab.com.png
مثال مباشر
بناء نموذج بريدي:
PHP CODE:
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
  <p>
     <
label>username</label>
     <
input type='text' name='username' size='30' />
 </
p>
 <
p>
     <
label>password</label>
     <
input type='password' name='password' size='30' />
 </
p>
 
 
?>


إضافة Icon لكل حقل:

PHP CODE:
0001
0002
0003
0004
0005
0006
0007
<?php form input[type=text] {
     
backgroundurl(/images/user.pngno-repeat
 
}
 
form input[type=password] {
     
backgroundurl(/images/key.pngno-repeat
 

 
?>


ثم إزاحة الكلمات عن Icon بمقدار معين:

PHP CODE:
0001
0002
0003
0004
<?php form input {
     
text-indent1.2em;
 } 
 
?>


يمكن أيضا إضافة Class لكل حقل وعدم استعمال Attribute Selectors إن رغبت بإضافة حقول أخرى لا يوفرها Input Type
الكاتب: نعيم، مبرمج ويب من المغرب انقر هنا لمراسلة نعيم، مبرمج ويب من المغرب أنقر هنا للإنتقال إلى موقع نعيم، مبرمج ويب من المغرب إضافة للمفضلة إضافة لمفضلة Google إضافة لمفضلة Delicious إضافة لمفضلة Digg إضافة لمفضلة Facebook
خيارات الدرس : ارسل الدرس لصديق ارسل الدرس لصديق  طباعة الدرس طباعة الدرس