Tento článek ukazuje použití input type='date' v HTML spolu s praktickou implementací.
Jak používat input type=”datum” v HTML?
„Input type=‘data’“ lze použít na různých webech, jako jsou zdravotní weby, weby pro rezervace letenek, weby elektronického obchodu, weby sociálních sítí atd. Syntaxe nástroje pro výběr data je uvedena níže:
< vstup typ = 'datum' id = '' název = '' >
Atributy použité ve výše uvedených úryvcích kódu jsou:
- Za prvé, „ typ ” umožňuje, aby vstupní pole fungovalo jako výběr data, ze kterého si uživatel může vybrat libovolné datum.
- Dále, „ id Atribut ” definuje jedinečnost tohoto prvku. Pomocí tohoto prvku lze vybrat prvek a použít funkce JavaScriptu.
- Poté se „ název Atribut ” určuje název tohoto prvku. Poskytuje pomoc v procesu ověřování pro získání hodnoty vybraného prvku.
Abychom zvýšili úroveň porozumění, pojďme si projít různé příklady:
Příklad 1: Použití type= „date“ v HTML
V souboru HTML vytvořte „
< formulář >
< označení pro = 'datum vstupu' > Vyberte datum připojení: < / označení >
< vstup typ = 'datum' id = 'datum vstupu' název = 'datum vstupu' >
< / formulář >
Ve výše uvedeném úryvku kódu:
- Za prvé, „ <štítek> používá se značka “, do které jsou umístěna fiktivní data a hodnota “ datum vstupu “ byla poskytnuta „ pro ' atribut.
- Dále, „
Značka ” se používá s hodnotou “ datum “na jeho” typ ' atribut. - Poté nastavte hodnotu „ datum vstupu “ na “ id ' atribut. Nastavte také hodnotu „ název ” atribut podle potřeby.
Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto:
Výše uvedený gif ukazuje, že výběr data byl vytvořen pomocí input type= “data” v HTML.
Příklad 2: Načítání data pomocí JavaScriptu
K načtení dat mohou uživatelé využít funkce JavaScriptu. Pro lepší pochopení navštivte níže uvedený blok kódu:
< knoflík při kliknutí = 'retrieveDate()' >Získat datum< / knoflík >< skript typ = 'text/javascript' >
funkce retrieveDate ( ) {
byl dateInput = document.getElementById ( 'datum vstupu' ) ;
var selectedDate = dateInput. hodnota ;
upozornění ( 'Vybrané datum: ' + vybrané datum ) ;
}
< / skript >
Ve výše uvedeném úryvku kódu:
- Za prvé, „ retrieveDate() Funkce “ je vytvořena uvnitř “