آموزش استایل دهی به فرم ها توسط CSS
در این آموزش قصد داریم فرمی ساده را با Html طراحی و توسط کدهای CSS به آن استایل بدهیم . استایل دهی به فرم توسط CSS باعث زیباتر شدن جلوه نمایشی فرم های صفحه وب برای کاربر خواهند شد.
ما قبلا در یک آموزش دیگر آموزش ساخت انواع فرم ها را با html داده بودیم ، اگر آشنایی با ساخت فرم ها توسط html ندارید ، ابتدا توصیه می کنیم این مقاله را مطالعه نمایید.
آموزش ساخت فرم با Html و استایل دهی به فرم توسط Css
در کد Html زیر برچسب های label for و input id باعث می شوند وقتی بر روی نوشته ها (نام شما ، ایمیل ، پیام) کلیک کنید ، کادر متنی مربوط به آن فعال شود .
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title> آموزش استایل دهی به فرم ها </title> </head> <body dir="rtl"> <form id="contact-form" method="#" action="#"> <input type="hidden" value="contact-form"> <p> <label for="user-name"> نام شما </label><br /> <input id="user-name" type="text" name="name" /> </p> <p> <label for="user-email"> ایمیل </label><br /> <input id="user-email" type="text" name="email" /> </p> <p> <label for="msg"> پیام متن </label><br /> <textarea id="msg"> </textarea> </p> <p> <input type="reset" value="پاک کردن فرم"/> <input type="submit" value="ارسال" /> </p> </body> </html>
خیلی خب حال باید به سراغ فایل Style.css خود برویم و افکت های مربوطه را کدنویسی نماییم .
در ابتدا با اتخاب آیدی contact-form ، رنگ پشت زمینه و حاشیه متون و فرم ها را مشخص می کنیم . با ویژگی border یک خط را بصورت ساده به اندازه ۱PX و با کد رنگ ccc مشخص می کنیم . و عرض کادر رنگی را هم ۴۰۰ قرار می دهیم .
#contact-form{
background-color: #eee;
padding:20px;
margin:50px auto;
border:1px solid #ccc;
width: 400px ;
}
تا به اینجا با کدها و خصوصیت های زیر یک همچین فرمی را در اختیار داریم .
با انتخاب آیدی contact-form p به تگ های P هم یک استایل را اختصاص می دهیم .
سپس توسط آیدی contact-form label ، ارتفاع و سایز فونت را مقداردهی می کنیم . با استفاده از ویژگی cursor و خصوصیت pointer در همین آیدی ، هنگامی با ماوس بر روی متون کلیک می شود ، کادر متنی مربوط به آن باز می شود .
#contact-form p {
margin-bottom: 9px;
}
#contact-form label {
line-height: 20px;
font-size: 13px;
cursor: pointer;
}
نتیجه کدهای ما تا به اینجای کار باید فرمی به شکل زیر باشد .
در مرحله بعدی نیاز داریم با انتخاب سلکتورهای input و textarea رنگ پس زمینه و خط کناری آن ها را همراه با رنگ و حاشیه ، عرض فرم های خود را مشخص نماییم .
ما آیدی های input و textarea را با هم انتخاب کردیم و برای هردو آن ها یک ویژگی یکسان قرار دادیم . نیاز داریم برای باکس textarea ارتفاع ۱۵۰ را در نظر بگیریم که بصورت زیر عمل می کنیم .
#contact-form input,
#contact-form textarea {
background-color: #fafafa ;
border: 1px solid #ccc ;
padding : 4px 7px;
width : 200px;
}
#contact-form textarea {
width: 200px ;
height: 150px;
}
حال می خواهیم دکمه های ارسال و پاک کردن را وسط چین کنیم و اندازه آن ها را کم تر نماییم .
برای اینکار ابتدا آیدی p.form-buttons input را بصورت زیر انتخاب می کنیم و به آن ویژگی می دهیم .
نکته : دلیل اینکه در ابتدای آیدی خود از contact-form استفاده می کنیم ، به این دلیل است که در کدهای قبلی از این آیدی استفاده کرده ایم .
#contact-form p.form-buttons input{
width: 100px;
text-align: center;
cursor: pointer;
}
در مرحله آخر حالت focus (حالت نوشتن) را برای input و textarea انتخاب می کنیم و وقتی که کاربر در حال نوشتن در این دوکادر متنی باشد رنگ خط های کناری سبز و رنگ پس زمینه کادر سفید شود . و حالت hover (کلیک کردن) را برای دکمه ها تغییر می دهیم .
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form .form-buttons input:hover {
border-color: #76990b;
background-color: #fff;
}
کدهای کامل شده این فرم تماس به شکل زیر می باشد .
.body {
font-family: tahoma;
}
#contact-form{
background-color: #eee;
padding:20px;
margin:50px auto;
border:1px solid #ccc;
width: 400px ;
}
#contact-form p {
margin-bottom: 9px;
}
#contact-form label {
line-height: 20px;
font-size: 13px;
cursor: pointer;
}
#contact-form input,
#contact-form textarea {
background-color: #fafafa ;
border: 1px solid #ccc ;
padding : 4px 7px;
width : 200px;
}
#contact-form textarea {
width: 200px ;
height: 150px;
}
#contact-form p.form-buttons input{
width: 100px;
text-align: center;
cursor: pointer;
}
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form .form-buttons input:hover {
border-color: #76990b;
background-color: #fff;
}
در پایان فرمی زیبا به شکل زیر خواهیم داشت . که البته زیبایی آن در این عکس مشخص نمی باشد ، بهتر است بصورت مرحله به مرحله برای یادگیری بهتر و مشاهده نتیجه ، با آموزش پیش بروید.
دیدگاه ها