Input Type
<input>
Najbardziej popularnym elementem html pozwalającym na wprowadzanie danych przez użytkownika jest element <input> (ang. dane wejściowe). Słowo input w języku polskim nie ma dobrego odpowiednika, dosłownie można to tłumaczyć jako wkład, wejście, bądź miejsce wejścia, ale skoro chodzi tu o wprowadzanie danych nazwą, która najlepiej może tu pasować są dane wejściowe. Ja natomiast najczęściej na to mówię pole <input>.
<input>
Element <input> jest samozamykającym się elementem. Jednak prawidłowy jego zapis wymaga jeszcze deklaracji typu. Typu deklaracji dokonujemy poprzez atrybut type (ang. typ).
Input Type Text
<input type="text">
Istnieje wiele różnych typów elementu <input>, jednak najbardziej popularnym typem jest text.
<input type="text">
Typów elementu input jest dużo, jednak zanim poznamy pozostałe, warto by się jeszcze skupić na samym elemencie <input> i jego kolejnych atrybutach.
Input Value
value
Tekst, który wpisujemy do elementu <input>, określamy jako wartość (ang. value) tego elementu. Wartość ta, czy inaczej te dane, przesyłane są dalej formularzem. Możemy np. podać swój adres email wpisując go w pole input, i wtedy powiemy, że wartością pola input jest ten nasz adres email. Wartość może również sami nadać elementowi input stosując atrybut value.
<input type="text" value="Wartość wpisana przez Nas">
Tekst ten możemy sami dowolnie modyfikować i finalną wartością przesłaną formularzem będzie to co sami wprowadzimy do pola <input>. Więc po co używać atrybut value? Atrybutu value używamy, jeśli chcemy nadać elementowi wartość domyślną, którą użytkownik może, ale nie musi modyfikować.
Stosowanie atrybutu value, będzie miało również sens, gdy zablokujemy użytkownikowi możliwość edycji danego pola. Jak tego dokonać? Możemy tego dokonać stosując atrybut disabled.
Input Disabled
disabled
Atrybut disabled (ang. wyłączony, zablokowany) dodany do elementu <input> zablokuje użytkownikowi możliwość edytowania pola <input>. Atrybut disabled jest dość ciekawym atrybutem bo nie wymaga deklarowania wartości, wpisujemy po prostu jego nazwę. Możemy również spotkać zapis disabled="disabled", ale nie jest on wymagany w HTML5.
<input type="text" disabled>
Klikamy klikamy i nic się nie dzieje, rzeczywiście nie mamy żadnej możliwości edycji pola <input>. Połączmy teraz atrybut disabled z atrybutem value i zobaczmy czy rzeczywiście mógłby być przydatny.
<input type="text" value="65,00 zł" disabled>
Jak widać można znaleźć sytuację, w której połączenie tych dwóch atrybutów byłoby przydatne.
Elementy Input – rodzaje
Element <input> typu text jest najbardziej popularnym oraz najbardziej ogólnym elementem input w języku html. Co mam na myśli mówiąc ogólny? Może łatwiej będzie to zrozumieć jeżeli poznamy przeznaczenie elementu input.
Jak już wcześniej zostało wspomniane element <input> używany jest do wprowadzania danych przez użytkownika naszej strony. Możemy poprosić odbiorcę o podanie takich danych jak imię, nazwisko, adres email, wiek, hasło itp.
Poszczególne rodzaje input’ów dzielą się właśnie ze względu na rodzaj danych wymaganych do wprowadzenia. Różnice pomiędzy nimi są zazwyczaj nieznaczne i związane są z formatowaniem samych danych.
Input Type Password
<input type="password">
Dla przykładu input przeznaczony do wprowadzania hasła, nie będzie pokazywał wprowadzanych przez nas znaków, tylko ukryje je za kropkami (ang. bullet).
<input type="password">
Input Type…
Rodzajów inputów jest wiele, przedstawiliśmy Wam te najbardziej popularne i można by rzec odmienne od reszty. Nie ma chyba sensu przedstawiać teraz każdego rodzaju elementu <input>, pod spodem zostały one po prostu wymienione, żeby dać wam obraz ile ich jest i do czego mogą służyć.
<input type="button"> <input type="color"> <input type="date"> <input type="datetime"> <input type="DatetimeLocal"> <input type="FileUpload"> <input type="hidden"> <input type="image"> <input type="month"> <input type="range"> <input type="search"> <input type="time"> <input type="url"> <input type="week">
Jak widzicie inputów jest całkiem sporo, dobra wiadomość to ta, że głównie będziemy używać inputów:
text password checkbox radio