021-20483015

فرم ها در CSS

می توان ظاهر فرم های HTML را با استفاده از CSS  بسیار بهتر کرد.

 

فرم ها در CSS
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
مشاهده مثال

 

استایل دهی به فیلد های ورودی

با استفاده از صفت width می توان عرض یک فیلد را تعیین کرد.

مثال :

استایل دهی به فیلد های ورودی
input {
    width: 100%;
}
مشاهده مثال


مثال بالا بر روی تمامی عناصر <input> اعمال خواهد شد. اگر بخواهید نوع بخصوصی از ورودی ها را استایل بدهید ، می توانید از سلکتور های صفات استفاده کنید :

input[type=text] - فقط فیلد های متنی را انتخاب می کند
input[type=password] - فقط فیلد های پسورد را انتخاب می کند
input[type=number] - فقط فیلد های عددی را انتخاب می کند
و ...

 

ورودی های فاصله دار

می توان از صفت padding برای اضافه کردن فواصل بین متن ورودی و دیواره های فیلد ، استفاده کرد.

نکته ! اگر وردی های زیادی در کنار هم داشته باشید باید مقداری margin نیز برای آنها تعیین کنید تا بیرون از فیلد و بین آنها فاصله جداکننده ای ایجاد شود.

مثال :

فضای بین متن و خط حاشیه فیلدها
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
مشاهده مثال


توجه داشته باشید که صفت box-sizing را بر روی border-box تنظیم کرده ایم تا padding و نهایتاً border عنصر نیز جزو عرض و ارتفاع کل محسوب شوند.
درباره صفت box-sizing در درس "اندازه باکس ها در CSS3" یاد خواهید گرفت.

 

ورودی های دارای خط حاشیه

با استفاده از صفت  border می توان اندازه و رنگ خط حاشیه را تعیین کرد . با استفاده از صفت border-radius به ورودی ها ، گوشه های انحنادار می دهیم.

مثال :

خط حاشیه برای فیلد ها
input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
مشاهده مثال


اگر فقط خط حاشیه پایین می خواهید ، از صفت border-bottom استفاده کنید :

فقط خط حاشیه پایین
input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
مشاهده مثال

 

ورودی های رنگ دار

از صفت background-color می توان برای تعیین رنگ زمینه ورودی ها استفاده کرده و با استفاده از صفت color رنگ متن را تغییر دهیم.

مثال :

فیلد های دارای رنگ زمینه
input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
مشاهده مثال

 

ورودی های متمرکز

زمانی که بر روی یک ورودی مترکز می شویم (کلیک می کنیم) ، برخی از مرورگر های بطور پیش فرض ، یک خط حاشیه آبی به دور ورودی اضافه می کنند. با استفاده از ;outline:none می توان این حرکت مرورگر را حذف کرد.
با استفاده از سلکتور focus: می توان عملی را برای فیلد ها تنظیم کرد تا به هنگام کلیک شدن اتفاق بیافتد.

مثال :

رنگ زمینه فیلدها و تمرکز بر روی فیلد
input[type=text]:focus {
    background-color: lightblue;
}
مشاهده مثال



مثال دیگر :

 

خط حاشیه فیلدها و تمرکز بر روی فیلد
input[type=text]:focus {
    border: 3px solid #555;
}
مشاهده مثال



 

ورودی های آیکون دار

اگر می خواهید داخل یک ورودی آیکونی داشته باشید ، از صفت background-image استفاده کنید و از صفت background-posotion برای موقعیت دهی آن استفاده کنید.
همچنین توجه داشته باشید که در مثال زیر ما مقداری padding چپ اضافه کرده ایم تا بین آیکون و متن ورودی فاصله ایجاد شود.

مثال :

ورودی با تصاویر آیکون
input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
مشاهده مثال

 

باکس جستجوی متحرک

در مثال زیر برای متحرک شدن باکس جستجو ، از صفت transition در زبان CSS3 استفاده کرده ایم تا عرض ورودی جستجو را زمانی که روی آن کلیک می شود بیشتر کنیم.
درباره صفت transition بعدا در درس CSS3 transition یاد خواهید گرفت.

مثال :

فیلد جستجوی دارای انیمیشن
input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
مشاهده مثال

 

استایل دهی به ورودی متن

در فیلدهایی که ورودی آنها متن و پیام باشد ( Textarea ) در زبان فارسی ، گوشه پایین چپ فیلد و در انگلیسی ، گوشه پایین راست فیلد متنی ، ابزاری ( grabber ) برای تغییر اندازه باکس قرار می گیرد. برای تنظیم و محدود کردن این ابزار از صفت resize استفاده می کنیم.

مثال :

استایل دهی به فیلد متن
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 {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
مشاهده مثال

 

 

استایل دهی به دکمه های فرم ها

 

 

 

استایل دهی به دکمه های فرم
input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* راهنمایی : برای داشتن دکمه های تمام عرض از width: 100% استفاده کنید. */
مشاهده مثال



برای یادگیری نحوه استایل دهی به دکمه ها می توانید درس "دکمه ها در CSS3" را مشاهده کنید.

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط