آموزش ایجاد فرم(form) در CSS

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

<form action="/action_page.php">
    <label for="fname">نام</label>
    <input type="text" id="fname" name="firstname" placeholder="نام شما">

    <label for="lname">نام خانوادگی</label>
    <input type="text" id="lname" name="lastname" placeholder="نام خانوادگی شما">
</form>

استایل دهی به فیلد های input در CSS

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

input {
  width: 100%;
}

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

input[type=text] : تنها فیلدهای متنی را انتخاب می کند.

input[type=password] : تنها فیلدهای پسورد را انتخاب می کند.

input[type=number] : تنها فیلدهای عددی را انتخاب می کند.

اضافه کردن padding به input در CSS

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

نکته: اگر تعداد زیادی عنصر input پس از یکدیگر داشته باشیم، می توانیم مقداری margin (به آنها) اضافه کنیم تا در بیرون از آنها فضای بیشتری اضافه شود.

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

 توجه کنید که در کدهای مثال بالا، ما box-sizing را برابر با border-box قرار داده ایم. این کار باعث می شود که padding و در نهایت کادرها(border)، در عرض و ارتفاع کلیِ عناصر اضافه شوند.

برای اطلاعات بیشتر در مورد box-sizing می توانید به آموزش box sizing مراجعه کنید.

بررسی input های کادر بندی شده

با استفاده از ویژگی border می توانیم سایز و رنگ 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;
}

input های رنگی در CSS

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

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

 فوکوس روی input ها

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

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

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

فیلد input به همراه آیکون یا تصویر

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

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

فیلد input جستجوی متحرک سازی شده

در این مثال، ما از ویژگی transition در CSS برای متحرک سازی عرض(width) فیلد جستجوی input، وقتی که فوکوس را دریافت می کند، استفاده می کنیم. بعداً در مورد ویژگی transition، نکات بیشتری را ذکر خواهیم نمود.

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

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

استایل دهی به Textarea در CSS

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

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

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

استایل دهی به دکمه های input

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;
}

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

برای اطلاعات بیشتر درباره ی چگونگی استایل دهی به دکمه ها با CSS می توانید مقاله ی آموزش دکمه ها در CSS را مطالعه کنید.

ایجاد فرم های واکنشگرا(Responsive)

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

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

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