Atrybuty – zarządzanie elementami input
Do tej pory poznaliśmy już kilka atrybutów takich jak value, czy name. Od początkowych wpisów używałem już elementów takich jak class oraz id.
Podstawowymi atrybutami dla tagów input są required, który wymusza wypełnienie danego pola przed wysłaniem formularza, value określające jakie dane mają zostać przesłane i name oznaczające nazwę pola – są one często wymagane do prawidłowego działania strony.
Inne atrybuty które mogą Ci się przydać to między innymi disabled, który wyłącza dany input lub hidden ukrywający element do którego się odnosi. Wszystkie powyższe atrybuty można zastosować do wszystkich typów elementu input.
Spójrz na poniższy przykład z zastosowaniem nowo poznanych atrybutów:
Atrybut wskazówki – placeholder
Przydatnym atrybutem dla elementów wprowadzania tekstu lub liczb jest placeholder, który wyświetla w input lub textarea tekst, który znika kiedy uzytkownik zaczyna wprowadzać dane. To taka wskazówka która podpowiada użytkownikowi strony jakiego typu odpowiedzi od niego oczekujemy. Spójrz na przykład z zastosowaniem powyższego rozwiązania:
Ograniczenia liczb w inputach – min, max i step
Atrybuty min i max pozwalają nam na ograniczenie odpowiednio minimalnej oraz maksymalnej wartości jaką użytkownik może wprowadzić do pola. Wspomniane atrybuty możemy wykorzystać przy wszelkich typach input, które przyjmują wartości liczbowe – należą do nich typy od dat, range oraz number.
Atrybut step jest dostępny dla tych samych typów co min oraz max. Służy od do robienia odstępów między liczbami wprowadzanymi za pomocą input.
Poniżej w przykładzie zobaczysz jak w pierwszym inpucie ograniczyłem tak, aby element nie przyjmował wartości ujemnych oraz aby przyjmował jedynie wartości całkowite. W drugim natomiast będzie przyjmował tylko wartości większe lub równe 1:
Atrybuty wyznaczające długość wpisu – minlength oraz maxlength
Atrybut maxlength odwołuje się do pól przyjmujących wartości liczbowe. Ogranicza maksymalną długość wprowadzonego tekstu. Po przekroczeniu dopuszczalnej długości tekstu, maxlength blokuje dalsze wprowadzanie zawartości do pola.
Atrybut minlength oznacza najmniejszą ilość znaków, jaką możemy wpisać do pola. Istotną różnicą jest to, że minlength nie blokuje dostępu do pola, a jedynie nie pozwala na jego wysłanie.
Spójrz na przykład z zastosowaniem atrybutów wyznaczających długość wpisów:
Atrybuty i akcje formularzy HTML zaliczone! Powyżej opisane został najważniejsze atrybuty użytkowane na co dzień przez programistę. W kolejną środę opublikuje materiał o stylowaniu formularzy. Z góry serdecznie zapraszam!
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA