فیلدها را به صورت عمیق تشکیل دهید

از چه فیلدهایی می توانم استفاده کنم؟

برای ارائه بهترین تجربه کاربری ممکن، مطمئن شوید که از عنصر و type عنصری که برای داده‌هایی که کاربر وارد می‌کند مناسب‌تر است استفاده کنید.

به کاربران در پر کردن متن کمک کنید

برای ارائه فیلد فرم به کاربران برای درج متن، از عنصر <input> استفاده کنید. این بهترین انتخاب برای تک کلمات و متون کوتاه است. برای متن طولانی تر، از عنصر <textarea> استفاده کنید. این به چندین خط متن اجازه می‌دهد و دیدن متنی که وارد کرده است را برای کاربر آسان‌تر می‌کند، زیرا عنصر قابل پیمایش و قابل تغییر اندازه است.

اطمینان حاصل کنید که کاربران داده ها را در قالب صحیح وارد می کنند

آیا می خواهید به کاربران در پر کردن شماره تلفن کمک کنید؟ ویژگی type برای <input> به type="tel" تغییر دهید. کاربران دستگاه‌های تلفن همراه یک صفحه‌کلید مناسب روی صفحه دریافت می‌کنند که اطمینان حاصل می‌کند که می‌توانند شماره تلفن را سریع‌تر و راحت‌تر وارد کنند.

برای آدرس ایمیل، از type="email" استفاده کنید. دوباره، یک صفحه کلید روی صفحه نمایش تطبیق داده شده نشان داده می شود. از ویژگی required برای اجباری کردن فیلد فرم استفاده کنید. هنگامی که فرم ارسال می شود، مرورگر بررسی می کند که ورودی دارای یک مقدار و معتبر است: در این مورد، این یک آدرس ایمیل با فرمت مناسب است.

درباره انواع مختلف ورودی بیشتر بیاموزید. اینها همچنین ویژگی های اعتبار سنجی داخلی را ارائه می دهند.

به کاربران کمک کنید تاریخ ها را پر کنند

چه زمانی می خواهید سفر بعدی خود را شروع کنید؟ برای کمک به کاربران در پر کردن تاریخ ها، از type="date" استفاده کنید. برخی از مرورگرها قالب را به‌عنوان یک مکان‌نما نشان می‌دهند، مانند yyyy-mm-dd که نحوه وارد کردن تاریخ را نشان می‌دهد.

همه مرورگرهای مدرن رابط های سفارشی را برای انتخاب تاریخ در قالب انتخابگر تاریخ ارائه می دهند.

به کاربران کمک کنید تا یک گزینه را انتخاب کنند

برای اطمینان از اینکه کاربران می توانند یکی از گزینه های ممکن را انتخاب یا لغو انتخاب کنند، type="checkbox" استفاده کنید. آیا می خواهید چندین گزینه ارائه دهید؟ بسته به مورد استفاده شما، جایگزین های مختلفی وجود دارد. ابتدا، بیایید راه‌حل‌های ممکن را در صورتی که کاربران فقط بتوانند یک گزینه را انتخاب کنند، بررسی کنیم.

شما می توانید از چندین عنصر <input> با type="radio" و مقدار name یکسان استفاده کنید. کاربران همه گزینه ها را یکجا می بینند، اما فقط می توانند یکی را انتخاب کنند.

گزینه دیگر استفاده از عنصر <select> است. کاربران می توانند در لیستی از گزینه های موجود حرکت کنند و یکی را انتخاب کنند.

برای برخی موارد استفاده، مانند انتخاب محدوده ای از اعداد، <input> از نوع range ممکن است گزینه خوبی باشد.

آیا نیاز به ارائه قابلیت انتخاب چندین گزینه دارید؟ از یک عنصر <select> با ویژگی multiple یا چند عنصر <input> از نوع checkbox استفاده کنید.

همچنین می توانید از یک <input> در ترکیب با عنصر <datalist> استفاده کنید. این به شما ترکیبی از یک فیلد متنی و لیستی از عناصر <option> را می دهد.

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

انواع ورودی بیشتری برای موارد استفاده خاص وجود دارد.

یک <input> از نوع color برای ارائه انتخابگر رنگ به کاربران در مرورگرهای پشتیبانی شده وجود دارد، و انواع مختلف دیگری نیز وجود دارد. برای اطمینان از اینکه کاربران می توانند رمز عبور خود را وارد کنند، از <input> با type="password" استفاده کنید. هر کاراکتر وارد شده با یک ستاره ("*") یا یک نقطه ("•") پنهان می شود تا اطمینان حاصل شود که رمز عبور قابل خواندن نیست.

آیا می خواهید یک رمز امنیتی منحصر به فرد در داده های فرم قرار دهید؟ از <input> با type="hidden" استفاده کنید. مقدار یک <input> از نوع hidden توسط کاربران قابل مشاهده یا تغییر نیست.

برای اینکه کاربران بتوانند فایل‌ها را آپلود و ارسال کنند، از <input> با type="file" استفاده کنید.

همچنین اگر مورد استفاده خاصی دارید، که در آن هیچ عنصر یا نوع داخلی مناسب نیست، می توانید عناصر سفارشی را تعریف کنید.

به کاربران کمک کنید فرم شما را پر کنند

عناصر فرم و انواع زیادی وجود دارد، اما کدام یک را باید انتخاب کنید؟

برای برخی موارد استفاده، انتخاب عنصر و نوع مناسب، مانند <input type="date"> ساده است. برای دیگران بستگی دارد. به عنوان مثال، می توانید از چندین عنصر <input> با type="checkbox" یا یک عنصر <select> استفاده کنید. درباره انتخاب بین لیست باکس ها و لیست های کشویی بیشتر بیاموزید.

به طور کلی، مطمئن شوید که فرم خود را با کاربران واقعی تست کنید تا بهترین عنصر فرم و نوع را پیدا کنید.

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

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

منابع

• عنصر <input>
• عنصر <textarea>
• عنصر <select>
• انواع <input>
• عناصر فرم سفارشی