#63. Atrybuty i akcje formularzy HTML

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 inputrequired, 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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!