Pola typu input

Formularz elektroniczny, tak jak jego papierowy odpowiednik, składa się z odpowiednich pól służących do różnych celów. Pierwsza grupa pól formularza to input — czyli formularze pozwalające wprowadzić określone dane. Oto przykład definicji:

<input type=” „name=” „value=” „size=” „maxlength=” „/>

Przyjrzyjmy się bliżej poszczególnym atrybutom znacznika <input />. Pierwszy z nich nosi nazwę type i określa rodzaj pola formularza. Do wyboru mamy następujące typy pól:

■    type=”text” — wstawia zwykłe pole tekstowe.

■    type=”checkbox” — wstawia małe okienka, które możemy dowolnie zaznaczać. To pole daje nam możliwość zaznaczenia więcej niż jednej odpowiedzi.

■    type=”radio” — pole podobne w działaniu do checkbox, z tym że możemy wybrać zaledwie jedną z wielu odpowiedzi. Pamiętaj, że wszystkie pola tego typu muszą mieć identyczną wartość atrybutu name.

■    type=”password” — polo odpowiedzialne za podanie hasła. Wpisywany tekst jest zamieniany na gwiazdki.

■    type=”file” — pozwala dołączyć dowolny plik tekstowy do formularza.

■    type=”submit” — wstawia przycisk do formularza, odpowiada za wykonanie action zdefiniowanego dla formularza.

■    type=”reset” — przycisk, który czyści wszystkie pola formularza.

■    type=”hidden” — wstawia zwykłe pole tekstowe niewidoczne na stronie.

■    type=“button” — określa przycisk dowolnego przeznaczenia.

Kolejny atrybut, name, określa nazwę dla danego pola. Pole jest dość przydatne przy analizowaniu przesłanych danych bądź przy konfiguracji skryptów. W przypadku wszystkich dostępnych pól wartość tego atrybutu musi być różna. Pamiętaj o jedynym wyjątku, jakim jest pole typu radio — w tym przypadku wszystkie pola wchodzące w skład jednej grupy muszą mieć identyczną nazwę. Oczywiście na stronie może być kilka grup pól i każda grupa powinna mieć inną nazwę.

Value wstawia w dane pole zadeklarowaną wartość. Atrybutu tego można użyć do opisania pól formularza bądź zadeklarowania jakiejś domyślnej wartości dla danego pola.

Atrybut size służy do określenia ilości znaków, mieszczących się w widocznej części pola tekstowego. Wpisanie dłuższego ciągu znaków w takie pole spowoduje przewinięcie jego zawartości; zawartość będzie pokazywana jedynie w małej części.

Opcja maxlength ogranicza ilość znaków, jakie można wpisać do zwykłego pola tekstowego, dla którego została zadeklarowana. Oznacza to, że do pola o pojemności dwudziestu znaków nie wpiszesz ich więcej.

Gdy tworzysz formularz zgodny ze specyfikacją języka XHTML, pamiętaj, że znacznik <input /> musi posiadać domknięcie.

W związku z tym, że specyfikacja nie przewiduje oddzielnego zamykającego znacznika, musisz skorzystać z zapisu <input />.

Na poniższych przykładach widać kilka możliwości definicji pól formularza, natomiast rysunek przedstawia wszystkie typy pól input.

<input type=”text” name=”Opinia” size=”30″ value=”Książka mi się podoba” /> <input type=”password” name=”Haslo” size=”10″ maxlength=“10″ />

<input type=”checkbox” name=”Zainteresowania” value=”Sport” />

<input type=”submit” name=“OK” value=”OK ” size=“10″ />

 

Pole typu select

Kolejną grupą pól formularza jest select. Pole tego typu pozwala nam na wybranie jednej lub kilku pozycji z listy. Jego konstrukcja wygląda następująco:

<select name=”nazwa_naszej_listy“>
<option>pierwsza pozycja</option>
<option>druga pozycja</option>
<option>trzecia pozycja</option>
</select>

W przypadku select, podobnie jak przy polach typu input, możemy określić jego nazwę — atrybut name.

Znacznik <option></option> definiuje jedną pozycję z listy. Taka definicja pola typu select pozwala na wybranie tylko jednej pozycji z naszej listy. Aby dać możliwość wyboru kilku, naszą definicję musisz uzupełnić o atrybut multiple, zgodnie z tym, co prezentuje podany przykład. Pamiętaj, że w przypadku strony zgodnej ze specyfikacją XHTML atrybut multiple musi mieć postać taką, jak ta na poniższym przykładzie.

<select name=”nazwa_naszej_listy” multiple=”multiple”>
<option>pierwsza pozycja</option>
<option>druga pozycja</option>
<option>trzecia pozycja</option>
</select>

Ostatnim atrybutem, używanym przy polach typu select, jest size. Określa on, ile pozycji z listy ma być widocznych na ekranie. Podanie zmiennej jako większej lub równej liczbie pozycji zdefiniowanych w ramach pola pozwoli nam wyeliminować pasek przewijania, pojawiający się z boku pola.

<select name=“nazwa_naszej_listy” multiple=”multiple” size=”5″>
<option>pierwsza pozycja</option>
<option>druga pozycja</option>
<option>trzecia pozycja</option>
</select>

Na rysunku widać przykład pola typu select w różnych wariantach.

Pole typu textarea

Twórcy języka XHTML i HTML do naszej dyspozycji oddali jeszcze jeden rodzaj pola, a mianowicie textarea. Służy ono do wprowadzania większej ilości danych. Znacznik ma następującą konstrukcję:

<textarea name=”opinie” rows=”10″ cols=”50″>napisz coś do mnie</textarea>

Umieszczając tekst pomiędzy znacznikami <textarea></textarea>, możemy zasugerować coś potencjalnemu użytkownikowi formularza. Rozwiązanie to jest podobne w działaniu do atrybutu value, omawianego przy poprzednich znacznikach typu input. Poprzez dodanie atrybutów rows i cols możesz regulować wielkość pola.

Rysunek przedstawia pole typu textarea.