«
»

حقل البحث ب css

الجمعة 25 يوليو 2008

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

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

<form method="post" action="#">
 <input type="text" name="query" />
 <input type="submit" value="submit"  />
</form>

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

في نفس الوقت الكود الذي كتبناه بسيط، أنيق ومفهوم ولا يحتوي على اكواد اضافية غير مستعملة ..

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

ساضيف خصائص على حقل البحث لذلك قمت بإضافة class واعطيته الاسم search

<input type="text" name="query" class="search" />

كود css:

 
#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;
}

كتبت:

#main form input.search

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

يمكنك كتابة السطر السابق بهذا الشكل ايضا

#main input.search {
input.search {

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

#main form

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

  • إطار بقيمة 2 بيكسل بلوم رمادي
  • عرض الحقل 400 بيكسل
  • استعملت ايقونة كخلفية مع خصائص معينة: عدم تكرارها، ومحاذتها على اليسار ثم في الوسط، يمكنني ادرج لون للخلفية مع هذه الايقونة ان اردت
  • سابتعد عن الايقونة ب 1.2em لكي اكتب عبارة البحث، يمكن استعمال px ايضا
  • اعطيت القيمة padding: .em للحقل ليبدو اكبر حجما قليلا
  • لون الكتابة في الحقل (رمادي)
  • ثم حجم ونوع الخط

يمكن اضافة تاثيرات وخصائص كثيرة، ايضا يمكن استبدال زر الارسال بصورة باستعمال css ..

هنا fix لمتصفحات IE من اقتراحي، لأن المؤشر لن يبتعد عن الايقونة .. يمكنك التفكير في حلول بديلة والتي تسمى Fix وهذه من بين حسنات IE سيء السمعة

#main form input.search {
padding: 0 1.3em;
text-indent: 0
}

صورة:

مثال آخر:

مثال حي

حقوق الدرس ل cssbit

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

5 تعليقات

  1. عمر الدليمي قال:
    25 يوليو 2008 الساعة 15:17

    رائع :) .. تعلمت css,html من فترة قصيرة من سنة كنت أصاب بالإحباط عندما أجد أن موقعي لا يتوافق مع w3c .. ولكبر الكود المكون بواسطة البرنامج dreamweaver .. تصعب عملية الصيانة ..

    عرض تجاربك له فائدة قد لا تتوقعها .. ألا وهي التشجيع على العمل بصورة صحيحة .. ففي السابق كنت أستبعد وجود أشخاص يكتبون صفحات html يدوي لكن الأمر إختلف فقد أصبحت منهم أنا أيضاَ … شكرا لك

  2. cssbit قال:
    25 يوليو 2008 الساعة 15:33

    عمر الدليمي:
    العفو

    أيضا اكره الشركات التي تطلب: مطور يعمل ب dreamweaver وكانه مهارة عجيبة مع انه مجرد برنامج يوجد افضل وارخص واسرع منه

  3. عمر الدليمي قال:
    25 يوليو 2008 الساعة 19:00

    أيضا اكره الشركات التي تطلب: مطور يعمل ب dreamweaver وكانه مهارة عجيبة مع انه مجرد برنامج يوجد افضل وارخص واسرع منه

    حقيقة كل ما تحتاجه كـ IDE لمطور الويب هو خاصية إكمال الكود (إختصارا للوقت) .. وسيرفر محلي وحفنة متصفحات :P ..

  4. cssbit قال:
    26 يوليو 2008 الساعة 14:32

    عمر الدليمي:
    كنت اود ان اعرف ما هو المحرر الذي تستعمله لو سمحت
    وشكرا

  5. مدوّنة cssbit حيث مطوّرالويب يجب أن يعمل مطوّر ويب !! « كتوم قال:
    6 نوفمبر 2008 الساعة 13:07

    [...] في الصفحات بواسطة CSS مثل عمل footer بـ CSS، ونموذج بريدي، وحقل البحث، علاوة أيضا على كثير من الدروس أو لنعتبرها تلميحات [...]

التعليقات مغلقة.