Šis raksts parāda ievades type=“date” izmantošanu HTML, kā arī praktisko ieviešanu.
Kā HTML valodā izmantot ievades veidu =”date”?
Ievades tips='dati' var tikt izmantots dažādās vietnēs, piemēram, veselības aprūpes vietnēs, aviokompāniju rezervēšanas vietnēs, e-komercijas vietnēs, sociālo tīklu vietnēs utt. Datuma atlasītāja sintakse ir norādīta tālāk.
< ievade veids = 'datums' id = '' nosaukums = '' >
Iepriekš minētajos koda fragmentos izmantotie atribūti ir:
- Pirmkārt, ' veids ” atribūts ļauj ievades laukam darboties kā datuma atlasītājam, no kura lietotājs var izvēlēties jebkuru datumu.
- Tālāk “ id ” atribūts nosaka šī elementa unikalitāti. Izmantojot to, elementu var atlasīt un var lietot JavaScript funkcionalitāti.
- Pēc tam ' nosaukums ” atribūts norāda šī elementa nosaukumu. Tas sniedz palīdzību validācijas procesā, lai iegūtu atlasītā elementa vērtību.
Lai uzlabotu izpratnes līmeni, apskatīsim dažādus piemērus:
1. piemērs: Type= “date” izmantošana HTML
HTML failā izveidojiet ' ” tagu veidlapas konteinera izveidei un ievietojiet šādu koda rindiņu:
< formā >
< etiķete priekš = 'pievienošanās datums' > Izvēlieties savu pievienošanās datumu: < / etiķete >
< ievade veids = 'datums' id = 'pievienošanās datums' nosaukums = 'pievienošanās datums' >
< / formā >
Iepriekš minētajā koda fragmentā:
- Pirmkārt, '
tiek izmantots tags, kurā ievietoti fiktīvi dati, un vērtība ' joinDate ” ir nodrošināts priekš ” atribūts. - Tālāk “
tags tiek izmantots ar vērtību ' datums 'uz savu' veids ” atribūts. - Pēc tam iestatiet vērtību ' joinDate 'uz' id ” atribūts. Iestatiet arī ' nosaukums ” atribūtu atbilstoši nepieciešamībai.
Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi:
Iepriekš redzamais gif parāda, ka datuma atlasītājs ir izveidots, izmantojot ievades veidu = “data” HTML.
2. piemērs. Datuma izgūšana, izmantojot JavaScript
Lai izgūtu datus, lietotāji var izmantot JavaScript funkcijas. Lai labāk izprastu, apmeklējiet tālāk norādīto koda bloku:
< pogu onclick = 'retrieveDate()' >Saņemt datumu< / pogu >< skripts veids = 'teksts/javascript' >
funkcija retrieveDate ( ) {
bija dateInput = document.getElementById ( 'pievienošanās datums' ) ;
var atlasītsDatums = datuma ievade. vērtību ;
brīdinājums ( 'Izvēlētais datums:' + atlasīts datums ) ;
}
< / skripts >
Iepriekš minētajā koda fragmentā:
- Pirmkārt, ' izgūtDatums() '' funkcija ir izveidota iekšpusē '
' tagu. - Tālāk atsauce uz HTML elementu, kura ID ir “ joinDate ” un saglabāts jaunā mainīgajā ar nosaukumu “ datuma ievade ”.
- Pēc tam izmantojiet ' vērtību ” rekvizītu, lai iegūtu atlasītā HTML elementa vērtību. Tāpat saglabājiet jaunu mainīgo ar nosaukumu ' atlasītsDatums ”.
- Beigās parādiet vērtību, izmantojot ' brīdinājums () ” metode.
Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka izvēlētais datums tiek parādīts brīdinājuma lodziņā.
Secinājums
Ievades veids =”date” tiek izmantots HTML, lai izveidotu datumu atlasītāju. iestatot “ veids ' atribūts '