Ten artykuł demonstruje użycie input type=“date” w HTML wraz z praktyczną implementacją.
Jak używać input type=”date” w HTML?
Parametr „input type=‘data’” może być używany na różnych stronach internetowych, takich jak strony dotyczące opieki zdrowotnej, strony z rezerwacjami lotniczymi, strony handlu elektronicznego, strony sieci społecznościowych itp. Składnia selektora dat jest przedstawiona poniżej:
< wejście typ = 'data' ID = '' nazwa = '' >
Atrybuty użyte w powyższych fragmentach kodu to:
- Po pierwsze ' typ ” pozwala, aby pole wejściowe działało jak selektor dat, z którego użytkownik może wybrać dowolną datę.
- Następnie „ ID Atrybut ” określa wyjątkowość tego elementu. Za jego pomocą można wybrać element i zastosować funkcjonalność JavaScript.
- Następnie „ nazwa ” atrybut określa nazwę tego elementu. Stanowi pomoc w procesie walidacji uzyskania wartości wybranego elementu.
Aby zwiększyć poziom zrozumienia, przejrzyjmy różne przykłady:
Przykład 1: Użycie type= „data” w HTML
W pliku HTML utwórz „
< formularz >
< etykieta Do = „Data dołączenia” > Wybierz datę dołączenia: < / etykieta >
< wejście typ = 'data' ID = „Data dołączenia” nazwa = „Data dołączenia” >
< / formularz >
W powyższym fragmencie kodu:
- Po pierwsze '
” używany jest znacznik, w którym umieszczane są fikcyjne dane, a wartość „ dołączData ” została dostarczona do „ Do ' atrybut. - Następnie „
” tag jest używany z wartością „ data ' do tego ' typ ' atrybut. - Następnie ustaw wartość „ dołączData ' do ' ID ' atrybut. Ustaw także wartość „ nazwa ” atrybut według potrzeby.
Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:
Powyższy gif ilustruje, że selektor dat został utworzony przy użyciu input type= „data” w HTML.
Przykład 2: Pobieranie daty za pomocą JavaScript
Aby pobrać dane, użytkownicy mogą korzystać z funkcjonalności JavaScript. Aby lepiej zrozumieć, odwiedź poniższy blok kodu:
< przycisk na kliknięcie = 'pobierzDatę()' >Pobierz datę< / przycisk >< scenariusz typ = „tekst/javascript” >
funkcja pobierzDate ( ) {
było dateInput = document.getElementById ( „Data dołączenia” ) ;
var wybrana data = DataInput. wartość ;
alarm ( 'Wybrana data: ' + wybrana data ) ;
}
< / scenariusz >
W powyższym fragmencie kodu:
- Po pierwsze ' pobierzDate() ” funkcja jest tworzona wewnątrz „
etykieta. - Następnie odwołanie do elementu HTML o identyfikatorze „ dołączData ” i zapisane w nowej zmiennej o nazwie „ DataInput ”.
- Następnie skorzystaj z opcji „ wartość ”, aby uzyskać wartość wybranego elementu HTML. Zapisz także w nowej zmiennej o nazwie „ wybrana data ”.
- Na koniec wyświetl wartość za pomocą „ alarm() ' metoda.
Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:
Dane wyjściowe pokazują, że wybrana data jest wyświetlana w polu alertu.
Wniosek
Typ danych wejściowych = „data” jest używany w kodzie HTML do tworzenia selektora dat. Ustawiając „ typ ” atrybut „