ورودی تاریخ و زمان در HTML با نوع datetime-local

html datetime local input
08 اسفند 1403

ورودی تاریخ و زمان در HTML


در HTML، ورودی‌ها کارایی‌های مختلفی دارند و یکی از آن‌ها ورودی نوع datetime-local است. این نوع ورودی برای انتخاب تاریخ و زمان به کار می‌رود و هم زمان و هم تاریخ را در یک فیلد واحد جمع‌آوری می‌کند. به عبارت دیگر، وقتی کاربر بر روی این فیلد کلیک می‌کند، یک پنجره باز می‌شود که به او اجازه می‌دهد تا تاریخ و زمان مد نظرش را انتخاب کند.


استفاده از این نوع ورودی به خصوص در فرم‌های ثبت‌نام و یا برنامه‌ریزی رویدادها بسیار رایج است. به این ترتیب، کاربران می‌توانند به راحتی تاریخ و زمانی که می‌خواهند در آن رویداد شرکت کنند را مشخص کنند. همچنین با این روش خطای ورود اطلاعات کاهش می‌یابد چون کادر ورودی به کاربر اجازه می‌دهد فقط گزینه‌های موجود را انتخاب کند.


با توجه به تغییرات فناوری در مرورگرها، ورودی datetime-local در اکثر مرورگرهای مدرن پشتیبانی می‌شود. با این حال، بهتر است که بررسی کنید که آیا مرورگری که کاربران شما استفاده می‌کنند از این ورودی پشتیبانی می‌کند یا نه. این کار به شما کمک می‌کند تا به بهترین نحو تجربه کاربری را فراهم آورید.


حالا بیایید نگاهی به پیاده‌سازی این ورودی در کد HTML داشته باشیم. در اینجا مثالی از نحوه استفاده از ورودی datetime-local آورده شده است:


<label for="event-datetime">تاریخ و زمان رویداد:</label>
<input type="datetime-local" id="event-datetime" name="event-datetime">

توضیحات کد


در این کد، ما یک برچسب <label> داریم که به ورودی اختصاص داده شده است. این برچسب بیان می‌کند که کاربر چه چیزی را باید وارد کند. سپس یک ورودی با نوع datetime-local تعریف شده است.




<label for="event-datetime">تاریخ و زمان رویداد:</label>
این خط یک برچسب برای فیلد ورودی ایجاد می‌کند و مشخص می‌کند که کاربر باید تاریخ و زمان رویداد را وارد کند.




<input type="datetime-local" id="event-datetime" name="event-datetime">
این خط ورودی نوع datetime-local را ایجاد می‌کند. id آن برای شناسایی در CSS یا JavaScript به کار می‌رود و name آن مشخص می‌کند که داده این ورودی چگونه در فرم‌ها ارسال خواهد شد.


سوالات متداول

؟

ورود از نوع datetime-local چه مزایایی دارد؟

؟

آیا تمامی مرورگرها از ورودی datetime-local پشتیبانی می‌کنند؟

؟

چگونه می‌توان ورودی datetime-local را در یک فرم قرار داد؟