Тази статия демонстрира използването на input type=“date” в HTML заедно с практическата реализация.
Как да използвам input type=”date” в HTML?
„Input type=‘data’“ може да се използва в различни уебсайтове, като уебсайтове за здравеопазване, уебсайтове за резервации на авиокомпании, уебсайтове за електронна търговия, сайтове за социални мрежи и т.н. Синтаксисът на инструмента за избор на дата е посочен по-долу:
< вход Тип = 'дата' документ за самоличност = '' име = '' >
Атрибутите, използвани в горните кодови фрагменти, са:
- Първо, „ Тип ” позволява на полето за въвеждане да действа като инструмент за избор на дата, от който потребителят може да избере всяка дата.
- След това „ документ за самоличност ” определя уникалността на този елемент. Чрез него елементът може да бъде избран и да приложи JavaScript функционалност.
- След това „ име ” указва името на този елемент. Той предоставя помощ в процеса на валидиране за получаване на стойността на избрания елемент.
За да подобрим нивото на разбиране, нека преминем през различни примери:
Пример 1: Използване на type= “date” в HTML
В HTML файла създайте „ <форма> ” за създаване на контейнер на формуляр и вмъкнете следния ред код:
< форма >
< етикет за = 'дата на присъединяване' > Изберете вашата дата на присъединяване: < / етикет >
< вход Тип = 'дата' документ за самоличност = 'дата на присъединяване' име = 'дата на присъединяване' >
< / форма >
В горния кодов фрагмент:
- Първо, „ <етикет> ” се използва таг, в който се поставят фиктивни данни и стойността на „ дата на присъединяване “ е предоставено на „ за ' атрибут.
- След това „ <вход> ” се използва със стойност „ дата ' към своя ' Тип ' атрибут.
- След това задайте стойността на „ дата на присъединяване ' към ' документ за самоличност ' атрибут. Освен това задайте стойността на „ име ” атрибут според нуждите.
След изпълнението на горния кодов фрагмент уеб страницата изглежда така:
Горният gif илюстрира, че инструментът за избор на дата е създаден с помощта на input type= “data” в HTML.
Пример 2: Повторно извличане на дата с помощта на JavaScript
За да извлекат данните, потребителите могат да използват функционалности на JavaScript. За по-добро разбиране посетете кодовия блок по-долу:
< бутон onclick = 'retrieveDate()' >Получаване на дата< / бутон >< сценарий Тип = 'текст/javascript' >
функция retrieveDate ( ) {
беше dateInput = document.getElementById ( 'дата на присъединяване' ) ;
var selectedDate = dateInput. стойност ;
тревога ( 'Избрана дата: ' + избрана дата ) ;
}
< / сценарий >
В горния кодов фрагмент:
- Първо, „ retrieveDate() ” се създава функция вътре в „ <скрипт> ’ етикет.
- След това препратката към HTML елемента с идентификатор „ дата на присъединяване ” и се съхранява в нова променлива с име „ dateInput ”.
- След това използвайте „ стойност ”, за да получите стойността на избрания HTML елемент. Също така, запазете в нова променлива с име „ избрана дата ”.
- Накрая покажете стойността с помощта на „ тревога() ” метод.
След изпълнението на горния кодов фрагмент уеб страницата изглежда така:
Резултатът показва, че избраната дата се показва в полето за предупреждение.
Заключение
Въведеният тип=”дата” се използва в HTML за създаване на инструмент за избор на дата. Като зададете „ Тип ' атрибут на ' <вход> ” етикет към „ дата “, „ <вход> ” елемент започва да работи като инструмент за избор на дата. Атрибутите като „ документ за самоличност ' и ' име ” също се използват за уникално указване на избрания входен елемент. Избраната стойност може да бъде достъпна и чрез Javascript. Тази статия демонстрира използването на input type= “date”.