حقل البحث ب css - المدرسة العربية للبرمجة

المدرسة العربية للبرمجة » برمجة مواقع الإنترنت » CSS » حقل البحث ب css

حقل البحث ب css أضيف في: 20-2-1431هـ

عند تصميم حقل البحث في موقعك، حاول استعمال بعض المعايير البسيطة من web 2.0 التي اصبحت منتشرة في كل المواقع العالمية تقريباً .. وهي معايير بسيطة تتعلق بحجم الحقل، الايقونة المرافقة له ..
دائما وعلى افتراض انك ملم ب xhtml، سنبدأ بكتابة اوامر ادراج فورم بريدي يحتوي على حقل البحث وزر الارسال .. معرفة xhtml ضرورة ملحة جدا فلا ينفع تصميم النموذج بوسيلة جاهزة ك dreamweaver مثلا

PHP CODE:
`0001 0002 0003 0004 0005 0006`	`<form method="post" action="#"> <input type="text" name="query" /> <input type="submit" value="submit" /> </form> ?>`

صورة توضيحية:

http://www.geek4arab.com/testvb/../less/imgcache/656_geek4arab.com.png

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

PHP CODE:
`0001 0002`	`<input type="text" name="query" class="search" /> ?>`

كود css:

PHP CODE:
`0001 0002 0003 0004 0005 0006 0007 0008 0009 0010 0011 0012 0013`	`<?php #main form input.search { border: 2px solid #E5E5E5; width: 400px; background: #fff url(images/search.gif) no-repeat left center; text-indent: 1.2em; padding: .1em; color:#333; font: .87em arial; } ?>`

كتبت:

PHP CODE:
`0001 0002`	`<?php #main form input.search ?>`

لانني ادرجت الفورم البريدي وسط class باسم main
وبما ان الكلاس search تابع ل input فقد كتبته بهذه الطريقة.
يمكنك كتابة السطر السابق بهذا الشكل ايضا

PHP CODE:
`0001 0002 0003 0004 0005`	`#main input.search { input.search { ?>`

وقد شرحت من قبل، ان اي حقل اخر يحمل القيمة search حتى وان كان في مكان اخر من الصفحة سيحمل نفس الخصائص بينما تحديد المكان الذي ارغب بالعمل عليه يكون باضافة

PHP CODE:
`0001 0002`	`<?php #main form ?>`

اما شرح كود css فهو بسيط وواضح:

[LIST]
[*]إطار بقيمة 2 بيكسل بلوم رمادي
[*]عرض الحقل 400 بيكسل
[*]استعملت ايقونة كخلفية مع خصائص معينة: عدم تكرارها، ومحاذتها على اليسار ثم في الوسط، يمكنني ادرج لون للخلفية مع هذه الايقونة ان اردت
[*]سابتعد عن الايقونة ب 1.2em لكي اكتب عبارة البحث، يمكن استعمال px ايضا
[*]اعطيت القيمة padding: .em للحقل ليبدو اكبر حجما قليلا
[*]لون الكتابة في الحقل (رمادي)
[*]ثم حجم ونوع الخط
[/LIST]
يمكن اضافة تاثيرات وخصائص كثيرة، ايضا يمكن استبدال زر الارسال بصورة باستعمال css ..
هنا fix لمتصفحات IE من اقتراحي، لأن المؤشر لن يبتعد عن الايقونة .. يمكنك التفكير في حلول بديلة والتي تسمى Fix وهذه من بين حسنات IE سيء السمعة

PHP CODE:
`0001 0002 0003 0004 0005`	`#main form input.search { padding: 0 1.3em; text-indent: 0 } ?>`

صورة:

http://www.geek4arab.com/testvb/../less/imgcache/657_geek4arab.com.png

مثال آخر:

http://www.geek4arab.com/testvb/../less/imgcache/658_geek4arab.com.png

مثال حي
حقوق الدرس ل cssbit
ملاحظة:
جميع الدروس متوافقة 100% مع اختبارات w3c ومع css level 2.1

5

الكاتب: نعيم، مبرمج ويب من المغرب

خيارات الدرس :

ارسل الدرس لصديق

طباعة الدرس