تگ date در HTML: راهنمای جامع
در دنیای طراحی وب، دریافت اطلاعات تاریخ از کاربران یکی از نیازهای رایج است. HTML5 با معرفی تگ date این فرآیند را ساده‌تر و کاربرپسند کرده است. این تگ به توسعه‌دهندگان اجازه می‌دهد تا یک کنترل تاریخ سفارشی شده را در فرم‌های خود پیاده‌سازی کنند.
تگ input با نوع date یک تقویم گرافیکی را نمایش می‌دهد که انتخاب تاریخ را برای کاربران آسان می‌کند.
مثال پایه استفاده از تگ date
ساده‌ترین روش استفاده از این تگ به صورت زیر است:
<input type="date" id="birthday" name="birthday">
این کد یک فیلد ورودی تاریخ ایجاد می‌کند که در مرورگرهای مدرن به صورت یک تقویم تعاملی نمایش داده می‌شود.
ویژگی‌های مهم تگ date
| ویژگی |
توضیح |
| min |
تعیین حداقل تاریخ قابل انتخاب |
| max |
تعیین حداکثر تاریخ قابل انتخاب |
| value |
تعیین مقدار پیش‌فرض برای فیلد تاریخ |
| step |
تعیین گام افزایشی برای انتخاب تاریخ |
مثال پیشرفته با ویژگی‌های مختلف
در این مثال، یک فیلد تاریخ با محدودیت‌های خاص ایجاد می‌کنیم:
<input type="date" id="meeting" name="meeting" min="2023-01-01" max="2023-12-31" value="2023-06-15">
این کد به کاربر اجازه می‌دهد فقط تاریخ‌های بین 1 ژانویه 2023 تا 31 دسامبر 2023 را انتخاب کند و مقدار پیش‌فرض را 15 ژوئن 2023 قرار می‌دهد.
پشتیبانی مرورگرها
تگ date در اکثر مرورگرهای مدرن پشتیبانی می‌شود، اما ممکن است در نسخه‌های قدیمی به صورت یک فیلد متنی ساده نمایش داده شود. برای اطلاعات بیشتر درباره ویژگی‌های این تگ، می‌توانید تگ date در html.
نکات مهم در استفاده از تگ date
- فرمت تاریخ ارسالی همیشه به صورت YYYY-MM-DD خواهد بود
- برای سفارشی‌سازی بیشتر می‌توان از JavaScript و کتابخانه‌های مربوطه استفاده کرد
- همیشه اعتبارسنجی سمت سرور را انجام دهید، حتی اگر مرورگر از این تگ پشتیبانی کند
- برای تجربه کاربری بهتر، یک جایگزین برای مرورگرهای قدیمی در نظر بگیرید
استفاده از تگ date در HTML5 نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه باعث کاهش خطاهای ورودی و یکپارچه‌سازی بهتر داده‌ها می‌شود. با به‌کارگیری صحیح این تگ، می‌توانید فرم‌های حرفه‌ای‌تری ایجاد کنید.
