Cum se utilizează tipul de intrare = „data” în HTML?

Cum Se Utilizeaza Tipul De Intrare Data In Html



intrare ” element cu tip='data' permite utilizatorilor să selecteze o dată folosind o fereastră pop-up de calendar. Oferă o interfață ușor de utilizat pentru selectarea datelor și evită posibilitatea apariției erorilor care pot apărea atunci când utilizatorii introduc manual data. De asemenea, oferă o modalitate standardizată de a colecta informații despre date, compatibilitate între browsere și îmbunătățește accesibilitatea, reducând în același timp timpul de dezvoltare.

Acest articol demonstrează utilizarea tipului de intrare = „date” în HTML împreună cu implementarea practică.

Cum se utilizează tipul de intrare = „data” în HTML?

„Tipul de intrare=‘date’” poate fi utilizat pe diverse site-uri web, cum ar fi site-uri de asistență medicală, site-uri de rezervare a companiilor aeriene, site-uri de comerț electronic, site-uri de rețele sociale etc. Sintaxa selectorului de date este menționată mai jos:







< intrare tip = 'Data' id = '' Nume = '' >

Atributele utilizate în fragmentele de cod de mai sus sunt:



  • În primul rând, „ tip ” permite câmpului de introducere să acționeze ca un selector de date din care utilizatorul poate alege orice dată.
  • În continuare, „ id ” atributul definește unicitatea acelui element. Prin utilizarea acestuia, elementul poate fi selectat și poate aplica funcționalitatea JavaScript.
  • După aceea, „ Nume ” atributul specifică numele acelui element. Oferă ajutor în procesul de validare pentru obținerea valorii elementului selectat.

Pentru a îmbunătăți nivelul de înțelegere, să trecem prin diferite exemple:



Exemplul 1: Utilizarea tip= „date” în HTML

În fișierul HTML, creați un „

” pentru crearea unui container de formular și introduceți următoarea linie de cod:





< formă >

< eticheta pentru = 'Data înscrierii' > Selectați data aderării dvs.: < / eticheta >

< intrare tip = 'Data' id = 'Data înscrierii' Nume = 'Data înscrierii' >

< / formă >

În fragmentul de cod de mai sus:

  • În primul rând, „ este utilizată eticheta în care sunt plasate date fictive și valoarea „ Data înscrierii ” a fost furnizat „ pentru ” atribut.
  • În continuare, „ Eticheta ” este folosită cu valoarea „ Data „la sa „ tip ” atribut.
  • După aceea, setați valoarea „ Data înscrierii „la „ id ” atribut. De asemenea, setați valoarea „ Nume ” atribut după necesitate.

După executarea fragmentului de cod de mai sus, pagina web apare astfel:



Gif-ul de mai sus ilustrează faptul că selectorul de date a fost creat folosind tipul de intrare = „date” în HTML.

Exemplul 2: Retrieing Data utilizând JavaScript

Pentru a prelua datele, utilizatorii pot utiliza funcționalitățile JavaScript. Pentru o mai bună înțelegere, vizitați blocul de cod de mai jos:

< buton onclick = „retrieveDate()” >Obține data< / buton >

< scenariu tip = „text/javascript” >

funcția retrieveDate ( ) {

a fost dateInput = document.getElementById ( 'Data înscrierii' ) ;

var selectedDate = dateInput. valoare ;

alerta ( „Data selectată:” + data selectată ) ;

}

< / scenariu >

În fragmentul de cod de mai sus:

  • În primul rând, „ retrieveDate() ” este creată în interiorul “