فرم‌ها بخش مهمی از طراحی وب هستند و نقش کلیدی در تعامل کاربران با وب‌سایت دارند.

با استفاده از CSS، می‌توان فرم‌ها را زیباتر و کاربرپسندتر کرد. در این راهنما، روش‌های مختلف برای سفارشی‌سازی فرم‌ها از جمله ورودی‌ها (input)، دکمه‌ها، لیبل‌ها و فیلدهای انتخابی را بررسی می‌کنیم.

۱. استایل‌دهی به فیلدهای ورودی (Input Fields)

فیلدهای ورودی مانند text، email، password و … از مهم‌ترین عناصر فرم هستند. می‌توان آن‌ها را با رنگ، فونت، اندازه و حاشیه سفارشی کرد.

input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease-in-out;
}

/* استایل هنگام فوکوس */
input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

✅ نکته:

• border-radius باعث گرد شدن گوشه‌های فیلد می‌شود.
• transition باعث ایجاد افکت نرم هنگام تغییر رنگ حاشیه در حالت فوکوس می‌شود.

۲. استایل‌دهی به دکمه‌های ارسال (Submit Buttons)

دکمه‌ها یکی از مهم‌ترین عناصر فرم هستند که باید ظاهری جذاب داشته باشند.

button, input[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}

/* افکت هاور (هنگام رفتن موس روی دکمه) */
button:hover, input[type="submit"]:hover {
    background-color: #0056b3;
}

✅ نکته:

• cursor: pointer; باعث می‌شود هنگام بردن موس روی دکمه، نشانگر تغییر کند.
• transition یک افکت نرم برای تغییر رنگ پس‌زمینه هنگام هاور اضافه می‌کند.

۳. استایل‌دهی به لیبل‌ها (Labels)

لیبل‌ها به کاربران کمک می‌کنند که بفهمند هر فیلد چه کاربردی دارد.

label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

✅ نکته:

• display: block; باعث می‌شود لیبل در بالای فیلد نمایش داده شود.

۴. استایل‌دهی به چک‌باکس و رادیوباتن (Checkbox & Radio Buttons)

چک‌باکس و دکمه‌های رادیویی را می‌توان با appearance: none; سفارشی کرد.

input[type="checkbox"], input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #007bff;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

/* چک شدن چک‌باکس */
input[type="checkbox"]:checked {
    background-color: #007bff;
}

/* دکمه رادیویی گرد */
input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:checked {
    background-color: #007bff;
}

✅ نکته:

• appearance: none; استایل پیش‌فرض مرورگر را حذف می‌کند تا بتوانیم استایل دلخواه اعمال کنیم.

۵. استایل‌دهی به فیلدهای انتخابی (Dropdown & Select Fields)

فیلدهای انتخابی مانند <select> را می‌توان با کمی استایل‌دهی جذاب‌تر کرد.

select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: white;
    font-size: 16px;
    cursor: pointer;
}

/* تغییر استایل هنگام باز شدن */
select:focus {
    border-color: #007bff;
    outline: none;
}

✅ نکته:

• cursor: pointer; برای نشان دادن حالت انتخابی استفاده می‌شود.

۶. استایل‌دهی به Textarea

متن‌های طولانی‌تر در فرم‌ها معمولاً در textarea نوشته می‌شوند که می‌توان آن را زیباتر کرد.

textarea {
    width: 100%;
    height: 120px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    resize: vertical;
}

/* تغییر استایل هنگام فوکوس */
textarea:focus {
    border-color: #007bff;
    outline: none;
}

✅ نکته:

• resize: vertical; باعث می‌شود کاربر بتواند اندازه فیلد را فقط در جهت عمودی تغییر دهد.

۷. استایل‌دهی به Placeholder (متن کمکی داخل فیلدها)

می‌توان متن placeholder را سفارشی کرد تا خوانایی بیشتری داشته باشد.

input::placeholder, textarea::placeholder {
    color: #888;
    font-style: italic;
}

✅ نکته:

• ::placeholder به شما امکان می‌دهد رنگ و استایل متن راهنما را تغییر دهید.

۸. ایجاد یک فرم زیبا با تمامی ویژگی‌ها

form {
    width: 400px;
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

۹. نتیجه‌گیری

با استفاده از تکنیک‌های ذکر شده، می‌توان فرم‌هایی زیباتر، حرفه‌ای‌تر و کاربرپسندتر طراحی کرد. سفارشی‌سازی فرم‌ها باعث افزایش تعامل کاربران و بهبود تجربه کاربری می‌شود.