wtorek,
Pole input w HTML4
W czwartej wersji języka HTML występowało dziesięć typów pola input. W HTML5 przybyły kolejne typy, które zostaną zaprezentowane w kolejnych materiałach. Zademonstrowano tylko najistotniejsze atrybuty opisywanych znaczników, jednak po opanowaniu poprzedniego materiału („Formularze HTML”) prezentowane informacje są wystarczające, aby w podstawowym zakresie stosować elementy input przedstawionych typów. Ich bardziej szczegółowe omówienie pojawi się w odrębnych artykułach.
Do niektórych przykładów dołączono niewielkie ilości kodu CSS, są one tylko ozdobnikiem, informacje na temat stosowania kaskadowych stylów dla kontrolek formularza znajdziesz w innych materiałach. Fragmenty zawierające kod JavaScript umieszczono jedynie w celu demonstracji możliwości, mechanizmy te poznasz dokładniej na przedmiocie związanym z programowaniem aplikacji internetowych.
Znacznik input bez żadnego atrybutu jest poprawny składniowo, jednak dobrym zwyczajem jest jawne określenie jego typu. Jeśli dane z formularza mają zostać wysłane na serwer, potrzebna będzie także deklaracja nazwy pola (atrybut name). W przypadku braku atrybutu type przeglądarka automatycznie jako typ przyjmuje „text”. Podobna sytuacja występuje w przypadku przestarzałej przeglądarki i niewspieranego przez nią typu lub w razie jego błędnego określenia.
Przykład pola input bez żadnych atrybutów:
<input>
<input type="text">
Input typu tekst służy do wprowadzenia dowolnego jednowierszowego ciągu znaków. Może mieć opcjonalny atrybut value z domyślnie wstawioną treścią.
Element input typu text:
<label>Wpisz ulubiony przedmiot szkolny:
<input name="test-1" type="text" value="matematyka">
</label>
<input type="password">
Znacznik input typu password jest specyficznym polem tekstowym, do którego możemy wprowadzić dowolny jednowierszowy ciąg znaków. Jego specyfika polega na tym, że wprowadzone znaki są widoczne w postaci symboli, np. gwiazdek lub kropek.
Element input typu password:
<label>Hasło: <input name="pass" type="password"></label>
<input type="hidden">
Element input typu hidden zgodnie z nazwą pozostaje niewidoczny dla użytkownika. Czasami korzystają z niego programiści JavaScript, aby zapisać jakieś tymczasowe dane. Częściej pole to jest stosowane w przypadku aplikacji działających po stronie serwera. Na przykład, kiedy użytkownik wybierze jakieś dane do edycji, można tam przechować identyfikator rekordu. Oczywiście, jak zawsze, po przesłaniu danych na serwer należy sprawdzić poprawność danych, w takim przypadku m.in. uprawnienia użytkownika do edycji danego rekordu. Inny przykład to wykorzystanie tego samego szablonu HTML do kilku celów i zapisywanie kontekstu w ukrytym polu (np. jawnie określonej akcji „dodaj” lub „aktualizuj”). Dane pola typu hidden przechowywane są w atrybucie value.
Przykład kodu pola input typu hidden:
<input type="hidden" name="eid" value="1234">
<input type="radio">
Elementy typu radio są używane w grupach będących zestawem powiązanych opcji, z których można wybrać tylko jedną. Powiązanie oznacza dokładnie taki sam atrybut name dla kilku znaczników. Aby ich użycie miało sens, powinny mieć one określoną różną wartość (atrybut value), ponieważ oprogramowanie na serwerze na podstawie przesłanej wartości będzie w stanie prawidłowo zinterpretować dane. Przy inputach typu radio można określić domyślne zaznaczenie stosując dla jednego z pól atrybut checked. W jednym formularzu można umieścić wiele grup elementów typu radio, powinny się one różnić przyjętą w swoich ramach nazwą (atrybutem name).
Przykład zastosowania elementu input typu radio:
Ulubiony kolor?
<h3>Ulubiony kolor?</h3>
<label>
<input name="kolor" type="radio" value="z">zielony
</label>
<label>
<input name="kolor" type="radio" value="c" checked>czerwony
</label>
<input type="checkbox">
Input typu checkbox najczęściej służą do wyboru (lub nie) kilku udostępnionych opcji (np. ulubionych książek z dostępnej listy). W odróżnieniu od typu radio, łatwo je całkowicie odznaczyć, dlatego są dobre np. jako pole akceptacji regulaminu, zgody na jakąś opcję itp. Status zaznaczenia można sprawdzić programowo zarówno po stronie klienta, jak i serwera (w tym wypadku, jeśli dalsza akcja zależy np. od wyrażenia zgody, należy to robić zawsze). Atrybuty pola typu checkbox są dokładnie takie same jak w przypadku elementu radio.
Przykład zastosowania elementu input typu checkbox:
Zaznacz ulubione przedmioty szkolne:
<h3>Zaznacz ulubione przedmioty szkolne:</h3>
<label>
<input name="test-s" value="jpol" type="checkbox">język polski
</label>
<label>
<input name="test-s" value="matm" type="checkbox">matematyka
</label>
<label>
<input name="test-s" value="wf" type="checkbox" checked>wychowanie fizyczne
</label>
<input type="submit">
Element typu submit to przycisk, który umożliwia wysłanie formularza. Jeśli będzie pozbawiony atrybutu name, po stronie serwera nie będzie po nim śladu. Czasami programiści wykorzystują jego nazwę (name) do ukrytego przesłania jakichś danych. Atrybut value w przypadku tego elementu oznacza tekst wyświetlony na przycisku. W przypadku braku value przeglądarka zastosuje tekst domyślny.
Przykład zastosowania elementu input typu submit:
<input type="submit" value="Wyślij dane">
<input type="reset">
Input typu reset działa zgodnie z nazwą, służy do przywracania wartości początkowych formularza. Nie należy tego mylić z usuwaniem wszystkich wpisów, choć czasami tak jest (w przypadku braku opcji domyślnych). Element ten kiedyś wydawał się dobrym pomysłem, jednak obecnie rzadko się je spotyka, ponieważ są źródłem frustracji użytkowników klikających je przez pomyłkę z zamiarem przesłania formularza.
Przykład zastosowania elementu input typu reset:
<form>
<label>Imię:
<input type="text" name="i">
</label>
<label>Nazwisko:
<input type="text" name="n" value="Kowal">
</label>
<input type="reset" value="Resetuj pola">
</form>
<input type="file">
Input typu file służy do wskazania przez użytkownika pliku przesyłanego na serwer. Powinien on mieć ustawione atrybuty type i name. W prezentowanym przykładzie uwzględniono opcjonalny atrybut accept pozwalający zawęzić dozwolone typy plików.
Przykład zastosowania znacznika input typu file:
<label>Prześlij zdjęcie:
<input type="file" name="plik" value="Wybierz plik">
</label>
<input type="image">
Input typu image służy do tworzenia graficznych przycisków przesyłania. Jest on w pewnym sensie podobny do znacznika image, powinien mieć atrybut src (źródło obrazu) oraz alt (tekst zastępczy). Nie uwzględnia atrybutu value.
Przykład zastosowania elementu input typu image:
<input type="image" src="button.png" alt="Wyślij">
<input type="button">
Input typu button to prosty przycisk wyglądem przypominający np. typ submit, służący do dodawania niestandardowej funkcjonalności. Domyślnie nie wykonuje żadnej akcji, dodanie jakiejś funkcji wymaga dołączenia kodu JavaScript. Nie należy inputem button zastępować typów submit i reset (technicznie jest to możliwe), ponieważ nie wnosi to nic nowego, a tworzy potencjalne problemy z dostępnością formularza.
W przykładzie umieszczono trzy znaczniki input typu button. Pierwsze dwa z nich mają dołączoną funkcjonalność, trzeci nie robi nic.
<label>Ulubiony język:
<input type="text" name="l1" id="l1" value="PHP">
</label>
<input type="button" value="Zmień"
onclick="document.querySelector('#l1').value='niemiecki';">
<input type="button" value="Resetuj ;)"
onclick="document.querySelector('#l1').value='HTML'";>
<input type="button" value="Zostaw">
Dostępność elementów input
W przypadku pól formularza istotnym elementem są etykiety. W języku HTML służy do tego znacznik label. Prawidłowo nadana etykieta jest powiązana z elementem formularza nie tylko wizualnie, ale także programowo, co oznacza, że rozmaite technologie wspierające, np. czytniki ekranu, mogą interpretować kontrolki formularza w sposób zgodny z zamysłem autora. Nie wszystkie typy elementu input powinny mieć etykietę, w zaprezentowanych przykładach występuje ona w wymaganych przypadkach. Więcej informacji o etykietach znajdziesz w materiale „Znacznik label”.
