cssbit 2.0

هذا الدرس يتحدث عن تصميم 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

هذه التدوينة ادرجت بتاريخ 23 يوليو 2008 في الساعة 4:07 م ضمن تصنيف دروس. يمكنك متابعة أي تعليق من خلال RSS 2.0 خلاصات التعليقات. يمكنك ترك تعليق, أو تعقيب من خلال موقعك الشخصي.