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:
xenodochial-mcclintock-e9v94
xenodochial-mcclintock-e9v94 danielminschinski
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:
floral-firefly-ek2ok
floral-firefly-ek2ok danielminschinski
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:
intelligent-frog-3gku5
intelligent-frog-3gku5 danielminschinski
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:
friendly-gauss-4vd6l
friendly-gauss-4vd6l danielminschinski
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