آموزش فرم ها Forms در Css

بازدید: 340 بازدید
آموزش فرم ها در css

فرم ها forms در صفحات وب سایت ها ، عموما برای دریافت اطلاعات از کاربر، و ارسال این اطلاعات به سمت سرور به کار گرفته می شوند.

به جرات می توان گفت که زیبا سازی ظاهر فرم ، و طراحی آن به گونه ای که برای کاربر قابل فهم باشد،  یکی از مهمترین جنبه های طراحی فرم ها است.

در آموزش امروز قصد داریم نحوه کار با فرم ها و استایل دهی آنها را با هم مرور کنیم.

همراه ما باشید.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

در آموزش امروز از سری آموزش های css قصد داریم کار با فرم ها را با هم مرور کنیم.

فرم ها forms در صفحات وب سایت ها ، عموما برای دریافت اطلاعات از کاربر، و ارسال این اطلاعات به سمت سرور به کار گرفته می شوند.

به جرات می توان گفت که زیبا سازی ظاهر فرم ، و طراحی آن به گونه ای که برای کاربر قابل فهم باشد،  یکی از مهمترین جنبه های طراحی فرم ها است.

فرم ها در اشکال و طراحی های مختلفی وجود دارند. css به شما کمک می کند تا فرم دلخواه خود را ایجاد کنید.

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

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

به مثال زیر توجه کنید.

[php]
input {
width: 100%;
}
[/php]

نتیجه را مشاهده کنید.

مثال بالا، استایل ایجاد شده را برای تمام عناصر <input> موجود در صفحه اعمال می کند.

اگر میخواهید استایلی که ایجاد کرده اید ، روی یک عنصر خاص (فقط) اعمال شود، میتوانید از انتخاب کننده های صفات استفاده کنید.

  • این دستور تنها فیلدهای متنی را انتخاب خواهد کرد  input[type=text]
  • این دستور تنها فیلدهای رمز (پسورد) را انتخاب خواهد کرد input[type=password]
  • این دستور تنها فیلدهای عددی را انتخاب خواهد کردinput[type=number]

ورودی های خالی

Padded Inputs

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

نکته!

زمانی که فیلدهای  ورودی زیادی، پشت سرهم دارید، ممکن است بخواهید(نیاز داشته باشید) بین آنها از ویژگی margin استفاده کنید تا بتواندی بین فیلدها (در بیرون از فیلدها) فاصله ایجاد کنید.

به کد زیر دقت کنید:

[php]
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
[/php]

نتیجه را مشاهده کنید.

توجه داشته باشید که در این کد ویژگی box-sizing را در ویژگی border-box تعریف کرده ایم. این کار باعث می شود که padding و در نهایت مرزها، در عرض و ارتفاع کل عناصر لحاظ شود.

از طریق این لینک درباره ویژگی box-sizing ، بیشتر مطالعه کنید.

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

Bordered Inputs

می توانید از ویژگی border برای تعیین رنگ و اندازه مرزها استفاده کنید. همچنین میتوانید از ویژگی border-radius برای اضافه کردن گوشه های گرد استفاده کنید.

به مثال زیر دقت کنید.

[php]
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
[/php]

نتیجه را مشاهده کنید.

اگر فقط یک خط مرزی در پایین میخواهید ، میتوانید از کد زیر استفاده کنید.

[php]
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
[/php]

نتیجه را مشاهده کنید.

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

Colored Inputs

از ویژگی background-color برای اضافه کردن یک رنگ پس زمینه برای ورودی استفاده می شود. همچنین از ویژگی color برای تغییر رنگ متن استفاده می شود.

به این مثال توجه کنید.

[php]
input[type=text] {
background-color: #3CBC8D;
color: white;
}
[/php]

نتیجه را مشاهده کنید.

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

Focused Inputs

به طور پیشفرض، بعضی از مرورگرها، دور فیلد ورودی که روی آن تمرکز می شود(کلیک می شود) ، یک مرز آبی رنگ اضافه می کنند.

شما میتوانید این خاصیت را با اضافه کردن ویژگی ;outline: none به ورودی، حذف کنید.

می توانید با استفاده از از انتخاب کننده :focus تعیین کنید، فیلدی که روی آن تمرکز شده است(کلیک شده است) چه کاری انجام دهد.

به مثال های زیر توجه کنید.

مثال اول

[php]
input[type=text]:focus {
background-color: lightblue;
}
[/php]

در این مثال خواهید دید که با کلیک روی فیلدهای ورودی پس زمینه آنها به رنگ آبی خواهد شد.

نتیجه را مشاهده کنید.

 

مثال دوم

[php]
input[type=text]:focus {
border: 3px solid #555;
}
[/php]

و در این مثال میبینید که با کلیک روی فیلدهای ورودی رنگ مرزهای آن پررنگ تر خواهد شد .

نتیحه را مشاهده کنید.

ورودی دارای آیکن / تصویر

Input with icon/image

اگر میخواهید یک آیکن درون فیلد ورودی وجود داشته باشد( مثل آنچه که معمولا در نوار جستجو در سایت ها میبینیم) میتوانید از ویژگی background-image استفاده کنید. و محل قرارگرفتن آیکن را نیز میتوانید با ویژگی background-position تعیین کنید.

توجه داشته باشید که در مثالی که در ادامه می آید ما یک مقدار زیاد برای ویژگی padding در نظر گرفته ایم تا محلی برای قرار گرفتن آیکن باشد.

[php]
input[type=text] {
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
[/php]

نتیجه را مشاهده کنید.

فیلد ورودی جستجوی متحرک

Animated Search Input

در این مثال، از ویژگی transition در css استفاده میکنیم تا فیلد ورودی را متحرک کنیم.یعنی هنگامی که کاربر روی فیلد جستجو کلیک می کند، فیلد بزرگتر از اندازه قبلی خود خواهد شد. میتوانید برای مطالعه بیشتر در مورد ویژگی transition  به این لینک مراجعه کنید.

[php]
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
[/php]

نتیجه را مشاهده کنید.

استایل دهی به Textareas

نکته!

از ویژگی resize برای جلوگیری از تغییر اندازه فیلدی که خاصیت textareas دارد، استفاده کنید.(این کار باعث می شود، گیره تغییر اندازه در گوشه پایین سمت راست غیرفعال شود)

مثال زیر را ببینید:

[php]
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
[/php]

نتیجه را مشاهده کنید.

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

کد زیر منوی انتخاب را استایل دهی می کند.

این کد باعث می شود وقتی که کاربر روی منو کلیک می کند رنگ مرزهای آن پررنگ تر شود.

[php]
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
[/php]

نتیجه را مشاهده کنید.

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

[php]
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;
}
[/php]

نکته!

از ویژگی width: 100% برای ایجاد دکمه هایی که عرض آنها برابر با عرض صفحه یا نگهدارنده آن است، استفاده کنید.

برای مطالعه بیشتر در مورد استایل دهی به دکمه ها ، به این لینک مراجعه کنید.

نتیجه را مشاهده کنید.

فرم های انعطاف پذیر

Responsive Form

برای اینکه نتیجه مثال زیر را مشاهده کنید، کافیست صفحه نمایشگر خود را بزرگ تر یا کوچکتر کنید.( با نگه داشتن دکمه ctrl و جابه جایی دکمه غلطان ماوس)

هنگامی که عرض صفحه نمایش از 600پیکسل کمتر شود، ستون ها به جای اینکه در کنار یکدیگر باشند، به ترتیب عمودی پشت سر هم قرار خواهند گرفت.

به کد زیر توجه کنید.

[php]

* {
box-sizing: border-box;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}

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

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* Responsive layout – when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}

[/php]

نتیجه را مشاهده کنید.

 

درباره فرم ها بیشتر بدانیم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.