حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

رفع خطای CSS ورودی فرم؛ عرض کامل با border-box

اجزای قابل استفاده دوباره و فرم‌های CSS · 0٪

ورودی‌های فرم هم جعبه هستن، اما ظاهر پیش‌فرض مرورگر دارن. برای ساخت یک فرم مرتب بهتره عرض، فاصله داخلی و نوع اندازه‌گذاری رو صریح تعیین کنیم. label توضیح می‌ده ورودی برای چیه و با for به id همون ورودی وصل می‌شه. ظاهر زیبا جای این ارتباط رو نمی‌گیره؛ ساختار معنی‌دار و CSS باید در کنار هم کار کنن.

مثال یک فیلد نام با عرض کامل ظرف و اندازه‌گذاری border-box می‌سازه. تمرین فیلد ایمیل داره و کد اولیه width:100% رو با content-box ترکیب کرده؛ در نتیجه padding و border به بیرون عرض اضافه می‌شن. خطای رایج کم‌کردن دستی عرض ورودی برای مخفی‌کردن بیرون‌زدگیه. این روش با تغییر فاصله داخلی دوباره به مشکل می‌خوره. نوع جعبه رو اصلاح کن تا عرض اعلام‌شده همه لایه‌های لازم رو شامل بشه. اینجا ارسال واقعی فرم یا اعتبارسنجی ایمیل نداریم؛ هدف ظاهر ثابت و حفظ برچسب و نوع ورودی است. فونت محلی و اندازه مشخص، خواندن متن ورودی رو قابل پیش‌بینی می‌کنه.

✍️ مثال حل‌شده:

<label for="nickname">نام نمایشی</label><input id="nickname" class="field" type="text">
<style>.field { width:100%; padding:8px; box-sizing:border-box; }</style>

حالا نوبت توئه: فرم .form-box عرض ۳۰۰ پیکسل دارد. ورودی #email باید width محاسبه‌شده ۳۰۰ پیکسل، box-sizing:border-box، padding:12px و font-size:16px داشته باشد؛ border یک پیکسل solid #94a3b8 را نگه دار. label متصل و type=email را حفظ کن؛ عرض والد را برای جبران خطا افزایش نده.

فعالیت شما

فرم .form-box عرض ۳۰۰ پیکسل دارد. ورودی #email باید width محاسبه‌شده ۳۰۰ پیکسل، box-sizing:border-box، padding:12px و font-size:16px داشته باشد؛ border یک پیکسل solid #94a3b8 را نگه دار. label متصل و type=email را حفظ کن؛ عرض والد را برای جبران خطا افزایش نده.

مطالعهٔ این گام برای همه آزاد است

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

برای انجام فعالیت وارد شوید

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

کد اولیهٔ فعالیت

<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head>
<body>
<form class="form-box"><label for="email">ایمیل</label><input id="email" type="email" placeholder="name@example.com"></form>
</body>
</html>

ظاهر صفحه (CSS)

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box}
.form-box{width:300px}#email{width:100%;box-sizing:content-box;padding:12px;font-size:16px;border:1px solid #94a3b8}