فرم‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ظاهر یک فرم HTML را می‌توان با استفاده از CSS به خوبی بهبود داد:[۱] Bootstrap Example

Try it Yourself »


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

از ویژگی width برای مشخص کردن اندازهٔ عرض فیلد ورودی استفاده کنید:

مثال
1 input {
2   width: 100%;
3 }


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

  • input[type=text] - تنها فیلدهای متنی را انتخاب خواهد کرد
  • input[type=password] - تنها فیلدهای password را انتخاب خواهد کرد
  • input[type=number] - تنها فیلدهای عددی را انتخاب خواهد کرد
  • و غیره …

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

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

نکته: زمانی که چندین فیلد ورودی بصورت پشت سرهم دارید، ممکن است بخواهید حاشیه ای هم margin اضافه کنید، تا فضای بیشتری در خارج از آنها ایجاد کنید:

مثال
1 input[type=text] {
2   width: 100%;
3   padding: 12px 20px;
4   margin: 8px 0;
5   box-sizing: border-box;
6 }


توجه داشته باشید که ویژگی box-sizing را با مقدار border-box مقداردهی کرده‌ایم. این امر باعث می‌شود که padding و در نهایت کادر در عرض و ارتفاع کل عنصر در نظر گرفته شود. <translate> نکته</translate>  نکته: می توانید مطالب بیشتری را در مورد Box Sizing در فصل box-sizing در CSS بخوانید.

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

از ویژگی border برای تغییر اندازه کادر و رنگ آن استفاده کنید، از ویژگی border-radius نیز برای اضافه‌کردن گوشه‌های گرد استفاده کنید:

مثال
1 input[type=text] {
2   border: 2px solid red;
3   border-radius: 4px;
4 }


اگر تنها کادر پایینی را می‌خواهید، از ویژگیborder-bottom استفاده کنید:

مثال
1 input[type=text] {
2   border: none;
3   border-bottom: 2px solid red;
4 }


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

از ویژگی background-color برای اضافه‌کردن رنگ پس زمینه به کادر ورودی استفاده کنید، و از ویژگی color برای تغییر رنگ متن استفاده کنید:

مثال
1 input[type=text] {
2   background-color: #3CBC8D;
3   color: white;
4 }


فیلدهای ورودی انتخاب شده (Focused)

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

از انتخابگر :focus برای انجام اقدامی در هنگام قرار گرفتن تمرکز برروی فیلد استفاده کنید:

مثال
1 input[type=text]:focus {
2   background-color: lightblue;
3 }

مثال
1 input[type=text]:focus {
2   border: 3px solid #555;
3 }

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

اگر می خواهید آیکنی درون کادر ورودی قرار دهید، از ویژگی background-image استفاده کنید و آن را با استفاده از ویژگی background-position موقعیت دهی کنید. همچنین توجه داشته باشید که یک padding بزرگ سمت چپ برای معکوس کردن فضای آیکن اضافه کرده‌ایم:

مثال
1 input[type=text] {
2   background-color: white;
3   background-image: url('searchicon.png');
4   background-position: 10px 10px;
5   background-repeat: no-repeat;
6   padding-left: 40px;
7 }


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

در این مثال ما از ویژگی transition در CSS برای متحرک (animate) کردن عرض ورودی جستجو در هنگام قرار گرفتن تمرکز برروی آن، استفاده می‌کنیم. <translate> نکته</translate>  نکته: در آینده می توانید مطالب بیشتری را در مورد ویژگی transition ، در فصل transition در CSS خواهید آموخت.

مثال
1 input[type=text] {
2   transition: width 0.4s ease-in-out;
3 }
4 
5 input[type=text]:focus {
6   width: 100%;
7 }


استایل دهی حوزه های متنی

نکته: از ویژگی resize برای جلوگیری از تغییر سایز حوزه متن استفاده کنید ("grabber" را در گوشه سمت راست پایین غیرفعال می‌کند)

مثال
 1 textarea {
 2   width: 100%;
 3   height: 150px;
 4   padding: 12px 20px;
 5   box-sizing: border-box;
 6   border: 2px solid #ccc;
 7   border-radius: 4px;
 8   background-color: #f8f8f8;
 9   resize: none;
10 }


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

مثال
1 select {
2   width: 100%;
3   padding: 16px 20px;
4   border: none;
5   border-radius: 4px;
6   background-color: #f1f1f1;
7 }


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

مثال
 1 input[type=button], input[type=submit], input[type=reset] {
 2   background-color: #4CAF50;
 3   border: none;
 4   color: white;
 5   padding: 16px 32px;
 6   text-decoration: none;
 7   margin: 4px 2px;
 8   cursor: pointer;
 9 }
10 
11 /* Tip: use width: 100% for full-width buttons */


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

فرم واکنش گرا

اندازه پنجره مرورگر را تغییر دهید تا این حالت را ببینید. زمانی که پهنای صفحه از ۶۰۰ پیکسل کمتر است، دو ستون ساخته می‌شود و به جای اینکه کنار هم قرار بگیرند بالای یکدیگر قرارمی گیرند.

پیشرفته: مثال زیر از media queryها برای ساخت یک فرم واکنش گرا استفاده می‌کند. <translate> نکته</translate>  نکته: در این باره مطالب بیشتری را در فصل‌های آینده خواهید آموخت.


منابع آموزشی