فرم ها
فرم یک المان تعاملی HTML است که ورودی و اطلاعات کاربر را در صفحه وب جمع آوری و با کاربر تعامل می کند.
فرم های بدون استایل، ظاهری ساده دارند.
فرم بالا را با استایل دهی به شکل زیر تغییر داده ایم.
.container {
width: 90%;
margin: 0 auto;
border-radius: 5px;
background-color: #d6f2db;
box-shadow: 0px 0px 5px -1px #00ad19;
padding: 20px;
}
input[type=email], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #00ad19;
border-radius: 7px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
معمولا چون در هر فرم بیش از یک input داریم، برای استایل دهی به صورت کلی، از نام تگ استفاده می کنیم:
input {} // تمام اینپوت
برای استایل دهی دقیق تر از انتخابگر ویژگی استفاده می شود:
input[type="text"] {} // تمام اینپوت های عادی
input[type="number"] {} // تمام اینپوت های عددی
input[type="password"] {} // تمام اینپوت های کلمه عبور
نکته: برای اطلاعات بیشتر، به آموزش انتخابگر ویژگی CSS مراجعه کنید.
استایل دهی به input در CSS
با کمک input، می توانیم اطلاعات متنی از کاربر دریافت کنیم. با کمک CSS، می توانیم اینپوت ها را زیبا کنیم.
برای مشخص کردن عرض input، از ویژگی width استفاده می کنیم.
نکته: معمولا برای مقداردهی عرض input، از مقدار درصدی استفاده می کنیم.
width: 100%;
padding و margin در input
با استفاده از ویژگی padding، می توانیم فضای بین محتوای input و حاشیه (border) را مدیریت کنیم.
نکته: می توانیم از ویژگی margin، برای ایجاد فضای بیرون از input ها استفاده کنیم.
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
نکته: توجه داشته باشید که ویژگی box-sizing به مقدار border-box تنظیم شده است. برای اطلاعات بیشتر، به آموزش box-sizing مراجعه کنید.
نکته: برای اطلاعات بیشتر، به آموزش padding در CSS مراجعه کنید.
نکته: برای اطلاعات بیشتر، به آموزش margin در CSS مراجعه کنید.
border در input
با ویژگی border، می توان حاشیه ی input را مدیریت کرد.
با ویژگی border-radius، می توان حاشیه ی input را نرم کرد.
border: solid 2px #00ad19;
border-radius: 7px;
نکته: برای اطلاعات بیشتر، به آموزش حاشیه CSS مراجعه کنید.
border: none;
border-bottom: solid 2px #00ad19;
پس زمینه input در CSS
با ویژگی background-color، رنگ پس زمینه اینپوت را تغییر می دهیم.
با ویژگی color، رنگ متن اینپوت را تغییر می دهیم.
background-color: #003008;
color: #fff;
شبه کلاس :focus در input
وقتی روی input کلیک می کنیم و در حالت انتخاب شده است، شبه کلاس focus فعال شده است. به صورت پیش فرض مرورگرها به حالت focus اینپوت، ویژگی outline می دهند.
outline: none;
input[type=text]:focus {
border: 2px solid #00ad19;
}
input[type=text]:focus {
background: #00ad19;
color: #fff;
}
آیکون در input
برای اضافه کردن آیکون به input، می توانیم از ویژگی background-image استفاده کنیم.
input[type=text] {
background-image: url('search.svg');
background-position: 10px 10px;
background-repeat: no-repeat;
background-size: 20px;
padding: 12px 20px 12px 40px;
}
استایل دهی به select در CSS
برای استایل دهی به المان select، می توان از کد زیر استفاده کرد.
select {
width: 100%;
padding: 8px 15px;
border: solid 1px #afffb8;
border-radius: 4px;
box-sizing: border-box;
background-color: #afffb8;
outline: 0;
}
استایل دهی به button در CSS
برای استایل دهی به المان button یا input type="button" یا input type="submit"، می توان از کد زیر استفاده کرد.
input[type=button], input[type=submit], input[type=reset], button {
width: 100%;
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
خلاصه درس
در این درس با فرم ها (Forms) در CSS:
- استایل دهی به input
- padding و margin در input
- border در input
- پس زمینه ی input
- شبه کلاس focus: در input
- آیکون در input
- استایل دهی به select
- استایل دهی به button
آشنا شدیم.