فرم ها (Forms)
«فرم CSS» یعنی شکل و استایل فرم های HTML با CSS. فرم همان جعبه های ورود داده است. با استایل خوب، فرم خواناتر می شود. همچنین کاربر راحت تر تایپ می کند؛ مثل دفتر مشق با خط کشی بهتر.
نمونه سریع استایل فرم
در این نمونه، لیبل ها، ورودی ها و انتخاب گر کشور ساده استایل شده اند. همین قواعد پایه، فرم را مرتب و یکدست می کند.
form.test {
background-color: #f2f2f2;
padding: 40px;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 6px;
}
input[type="text"], select {
width: 100%;
padding: 8px;
margin-bottom: 12px;
box-sizing: border-box;
}
عرض ورودی ها با width
ویژگی «عرض (width)» پهنای ورودی را تعیین می کند. معمولاً روی 100٪ می گذاریم تا تمام سطر را بگیرد.
input {
width: 100%;
}
فاصله داخلی و بیرونی: padding و margin
«پدینگ (Padding)» فضای داخل کادر است. «مارجین (Margin)» فضای بیرون کادر است. با «box-sizing» اندازه دقیق می ماند.
input[type="text"] {
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
}
حاشیه و گوشه های گرد: border و border-radius
«حاشیه (Border)» کادر را پررنگ می کند. «border-radius» گوشه ها را گرد می کند.
input[type="text"] {
border: 2px solid red;
border-radius: 8px;
}
input[type="text"] {
border: none;
border-bottom: 1px solid red;
}
رنگ پس زمینه و متن
با «background-color» پس زمینه را رنگ کنید. با «color» رنگ متن را تغییر دهید.
input[type="text"] {
background-color: #3CBC8D;
color: white;
}
حالت فوکوس با :focus
«فوکوس (Focus)» وقتی ورودی فعال است. با «:focus» استایل ویژه بدهید. حاشیه یا پس زمینه را تغییر دهید.
input[type="text"]:focus {
background-color: lightblue;
}
input[type="text"]:focus {
border: 3px solid #555;
}
آیکن داخل ورودی با background-image
با «background-image» آیکن اضافه کنید. سپس با «background-position» جای آن را تنظیم کنید. پدینگ چپ را بیشتر بگذارید.
input[type="text"] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
انیمیشن عرض جستجو با transition
با «transition» تغییر نرم بسازید. هنگام فوکوس، عرض بیشتر شود. تجربه بهتر می شود.
input[type="text"] {
transition: width 0.4s ease-in-out;
}
input[type="text"]:focus {
width: 100%;
}
استایل textarea و غیرفعال کردن resize
نوشته های چندخطی در «textarea» قرار می گیرند. با «resize: none» دستگیره تغییر اندازه را حذف کنید.
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
استایل منوی کشویی select
گزینه ها را خوانا کنید. padding و پس زمینه ملایم بگذارید. کادر را ساده کنید.
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
دکمه های فرم: button، submit، reset
دکمه ها باید واضح باشند. پس زمینه مشخص، متن خوانا، و مکان نما روی دست.
input[type="button"], input[type="submit"], input[type="reset"] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
فرم واکنش گرا با media query
فرم باید روی موبایل هم خوب باشد. با «media query» لیبل و ورودی ها را ستونی کنید.
گام های عملی فرم CSS
- ساختار ساده فرم را بنویس.
- عرض ورودی ها را 100٪ کن.
- padding و margin منطقی بده.
- حالت :focus را مشخص و تست کن.
- واکنش گرایی را با media query بساز.
نکته: اگر نوع ورودی مهم است، از انتخاب گر ویژگی کمک بگیر. برای انواع ورودی ها هم صفحه انواع ورودی فرم را ببین.
جمع بندی سریع
- فرم CSS یعنی استایل فرم های HTML.
- width و box-sizing نظم می دهند.
- padding و margin خوانایی را بهتر می کنند.
- :focus بازخورد فوری به کاربر می دهد.
- فرم واکنش گرا، تجربه موبایل را عالی می کند.