ورودی تاریخ و زمان در 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
آن مشخص میکند که داده این ورودی چگونه در فرمها ارسال خواهد شد.