فرم های یک ظاهر طراحی شده

به کاربران کمک کنید از فرم شما با مرورگر دلخواه خود استفاده کنند

برای اطمینان از اینکه فرم شما برای افراد زیادی در دسترس است، از عناصر ساخته شده برای کار استفاده کنید: <input> ، <textarea> ، <select> و <button> . این خط پایه برای یک فرم قابل استفاده است.

سبک های پیش فرض مرورگر عالی به نظر نمی رسند! بیایید آن را تغییر دهیم.

اطمینان حاصل کنید که کنترل های فرم برای همه قابل خواندن است

اندازه فونت پیش‌فرض برای کنترل‌های فرم در اکثر مرورگرها بسیار کوچک است. برای اطمینان از اینکه کنترل‌های فرم شما قابل خواندن هستند، اندازه فونت را با CSS تغییر دهید:

برای بهبود خوانایی font-size و line-height را افزایش دهید.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

به کاربران کمک کنید در فرم شما حرکت کنند

در مرحله بعدی، طرح بندی فرم خود را تغییر دهید و فاصله عناصر فرم را افزایش دهید تا به کاربران کمک کنید بفهمند کدام عناصر به یکدیگر تعلق دارند.

ویژگی margin CSS فضای بین عناصر را افزایش می دهد و ویژگی padding فضای اطراف محتوای عنصر را افزایش می دهد.

برای چیدمان کلی، از Flexbox یا Grid استفاده کنید. درباره روش های چیدمان CSS بیشتر بیاموزید.

مطمئن شوید که کنترل‌های فرم شبیه کنترل‌های فرم هستند

با استفاده از سبک‌های کاملاً درک شده برای کنترل‌های فرم، پر کردن فرم شما را برای افراد آسان کنید. به عنوان مثال، به عناصر <input> با یک حاشیه جامد استایل دهید.

input,
textarea {
  border: 1px solid;
}

به کاربران کمک کنید فرم شما را ارسال کنند

استفاده از background برای <button> خود را در نظر بگیرید تا با سبک سایت شما مطابقت داشته باشد و سبک‌های border پیش‌فرض را لغو یا حذف کنید.

به کاربران کمک کنید تا وضعیت فعلی را درک کنند

مرورگرها یک سبک پیش فرض برای :focus اعمال می کنند. می‌توانید استایل‌ها را برای :focus نادیده بگیرید تا رنگ با برند شما مطابقت داشته باشد.

button:focus {
    outline: 4px solid green;
}

درک خود را بررسی کنید

دانش خود را در مورد فرم های یک ظاهر طراحی کنید

منابع

• CSS را یاد بگیرید
• روش های چیدمان CSS
• طراحی شاخص های تمرکز
• بازگرداندن سبک پیش فرض یک <button> .