کنترل‌های فرم در CSS
فرم همان جایی است که آدم می‌نویسد، انتخاب می‌کند و می‌فرستد. با CSS می‌شود input و textarea و select را خواناتر و آرام‌تر کرد — padding کافی، حاشیهٔ مرتب، و نشانهٔ فوکوسی که واقعاً دیده شود. معنا را همان HTML نگه می‌دارد.
جعبهٔ ابزار کنترل فرم
📊 کنترل‌های فرم یک‌نگاهه
| بخش | کار روزمره |
|---|---|
input / textarea / select |
کنترل‌های اصلی که با هم استایل می‌شوند تا فرم یکدست شود |
padding + border |
به فیلد جا بدهید و لبهٔ واضح بگذارید |
border-radius |
گوشه‌ها را نرم کنید تا تیز و خشن نباشد |
:focus-visible |
حلقهٔ فوکوس دیدنی برای صفحه‌کلید و اشاره‌گر |
:disabled |
فیلدی که الآن قابل ویرایش نیست را کم‌رنگ کنید |
یک کلاس مشترک — یا یک گروه عنصر — را یک‌بار استایل کنید تا همهٔ فیلدها از یک خانواده به نظر برسند. پوست دکمه را برای درس بعدی بگذارید.
input متنی — جا و لبه
input پیش‌فرض مرورگر روی دستگاه‌های مختلف اغلب ناهماهنگ است. عرض، padding، اندازهٔ فونت و حاشیهٔ ملایم بگذارید تا تایپ کردن راحت باشد.
input متنی پایه
cssinput[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}textarea — جا برای نوشتن
textarea هم ارتفاع می‌خواهد، هم همان زبان padding که برای input گذاشتید. اگر جواب بلند انتظار می‌رود، resize عمودی بدهید؛ اگر چیدمان باید ثابت بماند، قفلش کنید.
textarea راحت
csstextarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}select — هم‌خانواده با بقیه
کشویی باید حاشیه، گوشه و padding شبیه فیلدهای متنی داشته باشد تا فرم وصله‌پینه به نظر نرسد.
select در همان خانواده
cssselect {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}فوکوسی که دیده شود
استایل فوکوس را بدون جایگزین برندارید. با :focus-visible برای کاربر صفحه‌کلید حلقهٔ واضح می‌کشید و ظاهر هنوز آرام می‌ماند.
حلقهٔ فوکوس دیدنی
cssinput:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}فیلدهای غیرفعال
کنترل disabled باید «الان نمی‌شود» به نظر برسد — opacity کمتر یا پس‌زمینهٔ ملایم — نه اینکه از صفحه غیب شود.
ظاهر disabled
cssinput:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}عادت آرام فیلد
یک ظاهر مشترک برای فیلدها نگه دارید، فاصلهٔ برچسب تا فیلد را درست بگذارید، فوکوس را حفظ کنید، و ظاهر دکمه را برای درس Buttons بگذارید.
کلاس مشترک فیلد
css.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}
.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}خودتان امتحان کنید
- input متن یا ایمیل را با padding، border و
border-radiusاستایل کنید. textareaرا هم‌شکل کنید وresize: verticalبگذارید.- یک
selectرا با همان خانوادهٔ حاشیه استایل کنید. - با
:focus-visibleیک outline و رنگ حاشیه اضافه کنید —outline: noneلخت نگذارید. - یک input با
:disabledرا کم‌رنگ کنید و ببینید هنوز مثل فیلد خوانده می‌شود.
اشتباهات رایج
outline: noneروی فیلد بدون جایگزین فوکوس — کاربر صفحه‌کلید گم می‌شود- padding و فونت خیلی کوچک که تایپ روی موبایل را عذاب می‌کند
- برای هر کنترل استایل جدا طوری که فرم وصله‌پینه به نظر برسد
- این درس را تبدیل به طراحی دکمه کردن — آن کار درس بعدی است
- قاطی کردن با
border-collapseو ردیف راه‌راه جدول — آن درس قبلی بود
خلاصه
- padding و border و radius مشترک، input و textarea و select را یکدست می‌کند
- به textarea ارتفاع و رفتار resize معقول بدهید
- نشانهٔ
:focus-visibleرا دیدنی نگه دارید - فیلد
:disabledرا ملایم کنید؛ پنهانش نکنید - ظاهر دکمه را برای درس بعدی بگذارید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود