فرم ها در CSS

فرم یک المان تعاملی 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، از ویژگی width استفاده می کنیم.  

نکته: معمولا برای مقداردهی عرض input، از مقدار درصدی استفاده می کنیم.

نام:

width: 100%;

با استفاده از ویژگی 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-radius، می توان حاشیه ی input را نرم کرد.

نام:

border: solid 2px #00ad19;
border-radius: 7px;

نکته: برای اطلاعات بیشتر، به آموزش حاشیه CSS مراجعه کنید.

نام:

border: none;
border-bottom: solid 2px #00ad19;

با ویژگی background-color، رنگ پس زمینه اینپوت را تغییر می دهیم.

با ویژگی color، رنگ متن اینپوت را تغییر می دهیم.

نام:

background-color: #003008;
color: #fff;

وقتی روی input کلیک می کنیم و در حالت انتخاب شده است، شبه کلاس focus فعال شده است. به صورت پیش فرض مرورگرها به حالت focus اینپوت، ویژگی outline می دهند.

نام:

outline: none;

نام:

input[type=text]:focus {
    border: 2px solid #00ad19;
}

نام:

input[type=text]:focus {
    background: #00ad19;
    color: #fff;
}

برای اضافه کردن آیکون به 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، می توان از کد زیر استفاده کرد.

ایران ایالات متحده آمریکا انگلستان آلمان

select {
    width: 100%;
    padding: 8px 15px;
    border: solid 1px #afffb8;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #afffb8;
    outline: 0;
}