CSS Forms

🔹 فرم HTML ساده

قبل از استایل دادن، یک فرم ساده HTML داریم:

“`html
<form>
<label for=“name”>نام:</label>
<input type=“text” id=“name” name=“name”>

<label for=“email”>ایمیل:</label>
<input type=“email” id=“email” name=“email”>

<input type=“submit” value=“ارسال”>
</form>
“`

—

🔹 استایل ساده CSS برای فرم

“`css
form {
max-width: 400px; /* حداکثر عرض فرم */
margin: auto; /* مرکز چین کردن فرم */
padding: 1em; /* فاصله داخلی فرم */
background: #f9f9f9; /* رنگ پس زمینه */
border-radius: 8px; /* گوشه‌های گرد */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* سایه */
}

label {
display: block; /* نمایش هر برچسب در خط جدید */
margin-bottom: 0.5em; /* فاصله زیر برچسب */
color: #333; /* رنگ متن */
font-weight: bold; /* فونت ضخیم */
}

input[type=“text”],
input[type=“email”] {
width: 100%; /* عرض کامل ورودی */
padding: 0.75em; /* فاصله داخلی */
margin-bottom: 1em; /* فاصله پایین ورودی */
border: 1px solid #ccc; /* حاشیه خاکستری */
border-radius: 4px; /* گوشه‌های گرد */
box-sizing: border-box; /* محاسبه عرض شامل padding و border */
}

input[type=“submit”] {
background-color: #28a745; /* رنگ زمینه دکمه */
color: white; /* رنگ متن دکمه */
padding: 0.75em 1.5em; /* فاصله داخلی دکمه */
border: none; /* حذف حاشیه */
border-radius: 4px; /* گوشه‌های گرد */
cursor: pointer; /* تغییر نشانگر موس به دست */
font-size: 1em; /* اندازه فونت */
}

input[type=“submit”]:hover {
background-color: #218838; /* رنگ پس زمینه دکمه هنگام هاور */
}
“`

—

🔹 ویژگی‌هایی که می‌توانید با CSS اضافه کنید

* طراحی واکنش‌گرا (Responsive) با استفاده از مدیا کوئری‌ها
* انیمیشن‌ها و انتقال‌ها (Transitions) روی هاور یا فوکوس
* سفارشی‌سازی چک‌باکس‌ها و رادیوباتن‌ها
* حالت‌های فوکوس با استفاده از `:focus`
* استایل خطا با کلاس `.error`
* تم‌های روشن و تاریک

—

🧪 مثال کامل (HTML + CSS با هم)

می‌توانید این کد را در یک فایل HTML ذخیره و اجرا کنید:

“`html
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<title>فرم استایل داده شده</title>
<style>
/* کد CSS که بالا نوشته شد */
</style>
</head>
<body>
<form>
<label for=“name”>نام:</label>
<input type=“text” id=“name” name=“name”>