عند تصميم حقل البحث في موقعك، حاول استعمال بعض المعايير البسيطة من 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

هذا الدرس يتحدث عن تصميم form بريدي، سواء للاتصال بالموقع، أو لإضافة تعليق او شيء آخر مثل اضافة محتويات الى قواعد البيانات ..

سنتعمل (كما يمكن الاستغناء) ما يلي:

 form, label, input, textarea, select ..

إدراج form بريدي ب xhtml سهل وبسيط ..

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

ساحصل على form به حقلين هما الاسم والبريد الالكتروني مع زر الارسال، سيظهر كل حقل تحت الاخر لانني استعملت br لكي انقز سطرا واحدا
كما في الصورة التالية:

ملاحظة:
يمكن استعمال كل من: ul li بحيث يظهر كل حقل بين li كما يمكن استعمال p لكل حقل ..

سأضيف الوسم label لكي أنسق كل من الاسم والبريد الالكتروني:

<label>name</label>
<label>email</label>

ثم أضيف بعض الخصائص بعد ان اكتب الكلاس الجديد الخاص بهذا الجزء والذي سيكون كالتالي:

/* si, j'ai le classe #main */
#main form label {
}
 
form label {
}

التعليق الذي أضفته يشرح فائدة #main حيث انني وضعت form بين class كما يلي:

<form method="post" action="#">
 <label>name</label><br />
 <input type="text" name="name" /><br />
 <label>email</label><br />
 <input type="text" name="email" /><br />
 <input type="submit" value="send" />
 </form>

وبالتالي سأضيف تاثيرات تظهر على جميع form الموجودة ضمن main، بحيث اذا اضفت form اخر بعد نهاية class لن تظهر عليه هذه التاثيرات ..
لك الاختيار عزيزي المطور في استعمال ما تريد، حذف، إضافة class .. فلا يوجد قيود ابدا .. طالما انك تدرك ما انت بصدد القيام به

نعود الى الوسم label، اضفت له خلفية بلون رمادي ..

#main form label {
	background: #eee;
}

ملاحظة:
يمكنك حفظ بعض الالوان لاستعمالها عند التصميم، مثل درجات الرمادي وهي سهلة جدا ..

ما دمت استعملت br فلماذا لا اضيف لها خصائص في css ؟ br لها خصائص معينة تأتي افتراضا او default مثل margin مثلا ..
على كل ساضيف لها خصائص وطبعا لل br التابعة ل form التابع ل main
حتى لا تظهر الخصائص على باقي br المستعملة في باقي الموقع، ان كان لديك محتوى اسفل form او شيء آخر

#main form br {
		margin: 10px 0;
}

ساخذف لون الخلفية من label كان الهدف هو ان اوضح اين هي label في form ..
وبدلا من ذلك أضفت لون للكتابة وغيرت شكل الحروف حيث الحرف الاول في العبارة سيكون Capital (لا تستعمل مع العربية)

#main form label {
 color:#919191;
 text-transform: capitalize;
}

لحد الان، ال form البريدي يبدو بهذا الشكل:

سأضيف أيضا بعض الخصائص للحقول input، جميع الحقول التي على شكل input (الاخرى هي textarea, select ..) ستأخذ هذه الخصائص ..

#main form input {
		padding: .2em;
		color:#2066BC;
}

اذا اردت ان اغير خصائص حقل واحد او حقول معينة سأضيف لها class كالتالي:

<input type="text" name="name" class="name" /><br />

وفي كود css سيكون لدي ما يلي:

#main form input.name {
		padding: .2em;
		color:#2066BC;
}

وبالتالي سيظهر اللون الازرق و padding على حقل الاسم فقط ..

بالنسبة لي، ساضيف class بهذه الطريقة

<input type="submit" value="send" class="submit" />

وكذلك

<input type="text" name="name" class="text" /><br />
<input type="text" name="email" class="text" /><br />

كود css:

#main form input.text {
 padding: .2em;
 color:#2066BC;
 width: 320px;
 border: 2px solid #eee
 
}
#main form input.submit {
 margin: 10px 0 0;
 
}

بالنسبة لحقلي الام والبريد، وضعت لهما عرض جديد 320 px و border بقيمة 2px بلون رمادي فاتح ..
أما زر الارسال فتركته كما هو، فقط اضفت له قيمة 10px لينزل قليلا عن الحقل ..

ملاحظة:
تذكر انك لست ملزما بالتقيد بما اختاره من شكل والوان، وان الهدف هو ان تقوم بنفسك باختيار تنسيق والوان مختلفة حسب رغبتك ..

شكل form الجديد:

شخصيا، احب إضافة تاثيرات لكل ما اقوم بانجازه ..

#main form input.text:focus {
  border:2px solid #96CFE9
}

اذا كان لديك حقول اخرى من نوع password مثلا عليك تحديد ذلك هكذا:

#main form input[type=text]:focus {
  border:2px solid #96CFE9
}
#main form input[type=password]:focus {
  border:2px solid #96CFE9
}

ملاحظة:
ستضيف [type=text] للحقل، في حالتي لم استعمله لان كل الحقول من نوع text ولا يوجد لدي حقل من نوع password ..
للاسف هذا التأثير لن يظهر على IE6 و IE7 .. لكنه يظهر على جميع اصدارات FF، كما توجد طريقة ب javascript لصنع نفس التأثير على ie

التاثير الذي اضفته يجعل إطار الحقل يتغير عند الضغط عليه لكتابة شيء فيه ..
صورة توضيحية:

بعد ذلك يمكن إضافة خصائص لزر الارسال:

#main form input.submit {
  margin: 10px 0 0;
  background: url(images/submit.gif) repeat-x left center;
  border: 1px solid #eee;
  padding: .2em;
  color:#ccc;
}

ومرة أخرى، اضيف تأثيراً لزر الارسال، (يعمل على FF و IE7 بينما غير متوافق مع IE6)

#main form input.submit:hover {
 color:#333;
 border: 1px solid #C3C3C3;
}

كما اضفت تاثيرا اخر بحيث عند المرور على زر الارسال بالفأرة تظهر اليد وكأنه رابط:

#main form input.submit {
  cursor: pointer;
}

ملاحظة: كثير من الناس لا يستعملون :focus و :hover، ربما تكون هذه بداية لاستعمالها في اشياء كثيرة جدا

صورة:

• العمل النهائي
• تحميل الملفات

حقوق الدرس ل cssbit