Ez a cikk bemutatja az input type=“date” használatát a HTML-ben, valamint a gyakorlati megvalósítást.
Hogyan használjuk a type=”date” bevitelt a HTML-ben?
Az „input type=‘data” különféle webhelyeken használható, például egészségügyi webhelyeken, légitársaságok foglalási webhelyein, e-kereskedelmi webhelyeken, közösségi oldalakon stb. A dátumválasztó szintaxisa az alábbiakban található:
< bemenet típus = 'dátum' id = '' név = '' >
A fenti kódrészletekben használt attribútumok a következők:
- Először is a „ típus ” attribútum lehetővé teszi, hogy a beviteli mező dátumválasztóként működjön, amelyből a felhasználó tetszőleges dátumot választhat.
- Ezután a „ id ” attribútum határozza meg az adott elem egyediségét. Használatával az elem kiválasztható és JavaScript funkcionalitást alkalmazhat.
- Ezt követően a „ név ” attribútum az adott elem nevét adja meg. Segítséget nyújt a kiválasztott elem értékének megszerzéséhez szükséges érvényesítési folyamatban.
A megértés szintjének javítása érdekében nézzünk végig különböző példákon:
1. példa: Type= “date” használata a HTML-ben
A HTML fájlban hozzon létre egy „ ” címkét egy űrlaptároló létrehozásához, és illessze be a következő kódsort:
< forma >
< címke számára = 'csatlakozás dátuma' > Válassza ki a csatlakozás dátumát: < / címke >
< bemenet típus = 'dátum' id = 'csatlakozás dátuma' név = 'csatlakozás dátuma' >
< / forma >
A fenti kódrészletben:
- Először is a „
' címke kerül felhasználásra, amelyben áladatok vannak elhelyezve, és a ' csatlakozás dátuma ' a ' számára ' tulajdonság. - Ezután a „
' címke ' értékkel használatos dátum 'hozzá' típus ' tulajdonság. - Ezután állítsa be a „ csatlakozás dátuma ' hoz ' id ' tulajdonság. Állítsa be a „ név ” attribútumot igény szerint.
A fenti kódrészlet végrehajtása után a weboldal így jelenik meg:
A fenti gif azt szemlélteti, hogy a dátumválasztót az input type= “data” használatával hozták létre a HTML-ben.
2. példa: Dátum lekérése JavaScript használatával
Az adatok lekéréséhez a felhasználók JavaScript-funkciókat használhatnak. A jobb megértés érdekében keresse fel az alábbi kódblokkot:
< gomb kattintásra = 'retrieveDate()' >Dátum kérése< / gomb >< forgatókönyv típus = 'text/javascript' >
függvény retrieveDate ( ) {
dateInput volt = document.getElementById ( 'csatlakozás dátuma' ) ;
var selectedDate = dateInput. érték ;
éber ( 'Kiválasztott dátum: ' + kiválasztott dátum ) ;
}
< / forgatókönyv >
A fenti kódrészletben:
- Először is a „ retrieveDate() ' függvény jön létre a '