Numer wejściowy HTML
Jaki jest znacznik wejściowy liczby w HTML?
Tag wejściowy liczby w HTML pozwala wprowadzić numerowane wejście. To wejście może być dowolną liczbą, w tym liczbą liczbową ujemną i nieujemną, a także „0”. Znacznik wejściowy liczby w HTML umożliwia wprowadzenie numerowanego wejścia przez klawiaturę lub wybierz z listy dostarczonej przez ten znacznik. Ponadto ten znacznik ma również niektóre inne atrybuty, które są używane do obsługi różnych celów. Na przykład możesz użyć atrybutów „min” i „maks.” Znacznika wejściowego liczby, aby określić minimalny i maksymalny limit wejściowy. Podobnie możesz użyć atrybutu „krok”, aby określić interwały wejścia. Aby dowiedzieć się więcej o tym, jak działa znacznik wejściowy liczby w HTML, będziesz musiał przejść przez poprzednie sekcje tego artykułu.
Użycie znacznika wejściowego liczby w HTML:
Aby opanować użycie znacznika wejściowego liczby w HTML, będziesz musiał zrozumieć następujące dwa przykłady:
Przykład nr 1: Wprowadzanie wieku między określonym limitem:
Zaprojektujemy ten przykład w taki sposób, że będzie on w stanie zebrać wiek użytkownika w określonym limicie. Skrypt HTML, którego użyliśmy, pokazano na poniższym obrazku:
W tym przykładzie najpierw zdefiniowaliśmy etykietę dla naszego numerowanego wejścia, i.mi., Wiek. Następnie użyliśmy znacznika wejściowego liczby do zdefiniowania limitu wieku, który utrzymaliśmy od 15 do 30. Oznacza to, że ten skrypt HTML poprosi użytkownika o wejście w jego wiek, ale wiek ten musi być ograniczony między 15 a 30. Ponadto dodaliśmy przycisk Przesyłania do tego skryptu, aby wyglądał bardziej prezentowany.
Po wykonaniu skryptu HTML pokazanego powyżej, w naszej przeglądarce wyświetlono następującą stronę internetową. Widać, że otrzymaliśmy pole wejściowe liczb, w którym możemy wpisać określoną liczbę leżącą w określonym zakresie z naszą klawiaturą, albo możemy nawet użyć klawiszy strzałek powiązanych z polem wejściowym liczby, aby wybrać żądany wiek.
Obraz pokazany poniżej przedstawia losowo wybrany wiek:
Ponadto, ponieważ minimalny limit wieku wynosi 15, nie będziemy w stanie wpisać niczego poniżej, ani nie będziemy w stanie wybrać liczby poniżej 15 za pomocą strzałek. Po osiągnięciu minimalnego limitu wieku liczba ta zostanie automatycznie podświetlona, jak pokazano na poniższym obrazie, co wskazuje, że nie możemy przesunąć się poniżej tego limitu wieku.
Podobnie nie będziemy mogli również wykraczać poza maksymalny limit wieku, który w tym przypadku wynosi „30”. Jest to przedstawione na obrazie pokazanym poniżej:
Przykład nr 2: Wprowadzanie liczby jabłek z określonym przedziałem:
W tym przykładzie przedstawimy Ci nowy atrybut powiązany z znacznikiem wejściowym liczby HTML, i.mi., atrybut kroku. Ten atrybut służy do określenia interwałów, z którymi chcesz zwiększyć lub zmniejszyć liczbę wejściowych. Aby to zrobić, napisaliśmy następujący skrypt HTML:
W tym przykładzie chcieliśmy, aby użytkownik wprowadził liczbę jabłek, których chciał w kilogramach w wielokrotnościach „2”, i.mi., może wejść 2, 4, 6, 8 i tak dalej. Aby osiągnąć tę funkcjonalność, określiliśmy atrybut „krok” z znacznikiem typu wejściowego i zachowaliśmy jego wartość jako „2”.
Kiedy wykonaliśmy ten skrypt, przedstawiono nam stronę internetową pokazaną na poniższym obrazku:
Poniższy obraz pokazuje, że wybraliśmy 6 kilogramów jabłek:
Jednak w tym przykładzie nie zdefiniowaliśmy żadnego dolnego lub górnego limitu ze względu na możliwość, że użytkownik może wybrać liczbę ujemną (która technicznie byłaby nieprawidłowa), jak pokazano na poniższym obrazku:
Aby temu zapobiec, nieznacznie zmodyfikujemy powyższy skrypt, używając atrybutu „min”, aby określić, że minimalna ilość jabłek nie może być mniejsza niż 2 kilogramy, jak pokazano na poniższym obrazku:
Kiedy po dokonaniu tej modyfikacji wykonaliśmy nasz skrypt HTML, nie mogliśmy zejść poniżej 2 kilogramów, jak pokazano na poniższym obrazku:
Wniosek:
Za pomocą tego artykułu chcieliśmy przekazać naszym czytelnikom wykorzystanie znacznika wejściowego. Najpierw opracowaliśmy podstawowe zrozumienie tego znacznika, omawiając niektóre z powiązanych z nim atrybutów. Następnie wyjaśniliśmy użycie tego znacznika za pomocą dwóch istotnych przykładów. Po przejrzeniu tego przewodnika wyraźnie zrozumiesz, jak działa znacznik wejściowy liczby w HTML.