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 “ ' etichetă.
- În continuare, referința elementului HTML având un id de „ Data înscrierii ” și stocat într-o nouă variabilă numită „ dateInput ”.
- Apoi, utilizați „ valoare ” pentru a obține valoarea elementului HTML selectat. De asemenea, stocați într-o nouă variabilă numită „ selectatData ”.
- În final, afișați valoarea utilizând „ alerta() ” metoda.
După executarea fragmentului de cod de mai sus, pagina web apare astfel:
Rezultatul arată că data selectată este afișată în caseta de alertă.
Concluzie
Tipul de intrare='date' este folosit în HTML pentru crearea unui selector de date. Prin setarea „ tip ' atributul ' „ eticheta la „ Data ”, „ ” elementul începe să funcționeze ca un selector de date. Atributele precum „ id ' și ' Nume ” sunt de asemenea utilizate pentru a specifica în mod unic elementul de intrare selectat. Valoarea selectată poate fi accesată și folosind Javascript. Acest articol a demonstrat utilizarea tipului de intrare = „data”.