طراحی سایت ساناتک
0
ارسالform با کلید submit

به پایان رساندن فُرم با یک کلید Submit

این اقدام آخر در اتمام فُرم ما است. مارک آپ زیر را پیش از تگ بسته </fieldset> قرار دهید.

<div class="buttonarea">

<input type="submit" value="Send Us the Info"/>

</div>

یک خصوصیت class به تگ div حامل کلید Submit اضافه کردیم و به آن مقدار مناسب buttonarea دادیم. این کار انجام شد تا بتوانیم کار style دهی به کلید submit و div ای که کلید درون آن قرار داده شده را درون CSS به راحتی انجام دهیم.

1. در style1.css یک contextual selector برای کلید submit قرار دهید. می خواهیم بر روی input درون div، که کلاس buttonarea برای آن تخصیص داده شده است اعمال شود.

2. رنگ پس‌زمینه را navy انتخاب کنید.

3. رنگ متن را سفید کنید.

4. فونت را bold کنید.

5. در اطراف کلید یک padding با عرض پنج پیکسل بگذارید.

6. در آخر border ای با ضخامت یک پیکسل در اطراف کلید گذاشته تا بتوانیم آن را سفید و solid کنیم.

CSS برای این 6 مرحله به صورت زیر است:

form.contact .buttonarea input {

background: navy;

color: white;

font-weight: bold;

padding: 5px;

border: 1px solid white;

}

تغییرات جدید را در مرورگر خود مشاهده کنید. کلید submit آبی است یا خاکستری؟ اگر خاکستری نمایش داده شده است این امکان را در نظر بگیرید که شاید از نسخه ای قدیمی از safari استفاده می کنید. به خاطر داشته باشید بعضی از مرورگرها style های در نظر گرفته شده برای کنترل های فُرم را پشتیبانی نمی کنند. گرچه IE، Firefox، Chrome و Opera رنگ ها را آنطور که تعریف کرده اید رندر می کنند.

کلید ما اندکی در فرم گم شده به نظر می رسد، این کلید مهمترین بخش فرم است و باید اندکی به اهمیت آن بی‌افزاییم. باید توجه ها به این کلید جلب شود، بیایید یک class selector برای ناحیه محتوی کلید اضافه کنیم:

form.contact .buttonarea {

text-align: center;

padding: 4px;

background-color: #0066ff;

}

 Highlight کردن کلید Submit با استفاده از CSS

Highlight کردن کلید Submit با استفاده از CSS

 

تعداد بازدید: 255
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید