Formularze

Pole tekstowe

<form action="...">
	<input type="text" name="nazwa" />
</form>

<form action="...">
	<input name="nazwa" />
</form>

Atrybut name="...", powinien być unikatowy w obrębie formularza, tzn. żadne dwa pytania w tym samym formularzu nie powinny mieć takiej samej nazwy.

Typ "text" jest podstawowym rodzajem pola tekstowego. Ma ono wysokość jednej linii tekstu i określoną długość. Można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie.

UWAGA! Wszystkie pola (dowolnego typu), które mają się znaleźć w formularzu, należy umieszczać pomiędzy tymi samymi znacznikami <form> oraz </form> (zobacz: Ramy formularza). Oczywiście w pojedynczym dokumencie można umieścić kilka formularzy - wtedy wstawiamy klika znaczników <form>...</form>, dla każdego formularza osobno.

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Przykład:

Zwróć uwagę, że po kliknięciu myszką wewnątrz poniższego pola, możesz wpisać tam jakiś tekst.

Możliwe jest także podanie dodatkowych atrybutów:

1. Odpowiedź domyślna:

   <input type="text" name="nazwa" value="odpowiedź domyślna" />

   W miejsce tekstu: "odpowiedź domyślna" można wpisać domyślną treść danej odpowiedzi. Zostanie ona dołączona do formularza, jeśli użytkownik nie wpisze innej.

   Przykład:
2. Długość pola:

   <input type="text" name="nazwa" size="k" />

   gdzie jako "k" można podać długość pola w ilości znaków, które będą w nim jednocześnie widoczne (domyślnie 20 - w Internet Explorerze). Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

   Przykład:

   size="10"
3. Maksymalna ilość znaków, które można wpisać do pola:

   <input type="text" name="nazwa" maxlength="n" />

   gdzie jako "n" podaj maksymalną dopuszczalną ilość liter, z których może składać się odpowiedź - użytkownik nie będzie mógł wpisać dłuższego tekstu.

   Przykład:

   maxlength="10"
4. Pole tylko do odczytu:

   <input type="text" name="nazwa" readonly="readonly" />

   Wstawienie atrybutu readonly="readonly" powoduje, że tekstu zapisanego domyślnie w tym polu (atrybut value="odpowiedź domyślna"), nie będzie można modyfikować. Wartość pola jest jednak normalnie przesyłana w formularzu.

   Przykład:

   Tekstu w tym polu nie można usunąć ani zmienić (readonly="readonly").
5. Blokada pola:

   <input type="text" name="nazwa" disabled="disabled" />

   Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.

   UWAGA!
   Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

   Przykład:

   To pole jest zablokowane (disabled="disabled").

Tabulator

Wiele osób wypełniając formularze przenosi się do kolejnych pól nie za pomocą myszki, ale klawisza tabulatora (Tab), a powraca do poprzedniego pola za pomocą kombinacji Shift+Tab. Taki sposób wypełniania formularzy znacznie przyspiesza proces, ponieważ nie trzeba się odrywać od klawiatury, aby przenieść dłoń na myszkę.

Normalnie porządek aktywacji kolejnych pól formularza z użyciem tabulatora jest zgodny z porządkiem umieszczenia kontrolek formularza w kodzie źródłowym strony. Zwykle jest to zupełnie naturalna kolejność. Czasami jednak chcielibyśmy ją zmienić. Na przykład wyobraźmy sobie, że pola formularza są umieszczone w kilku kolumnach i wierszach tabeli. W takim przypadku kolejność aktywacji będzie następowała wierszami (poziomo), ponieważ w takiej kolejności są umieszczone komórki tabeli w kodzie źródłowym. Jeśli jednak ze względu na budowę naszego formularza logiczniej by było aktywować kontrolki kolumnami (pionowo), można to zrobić dodając dla wszystkich pól odpowiedni atrybut tabindex="...":

<input type="text" name="nazwa" tabindex="n" />

Przy ustalaniu ostatecznej kolejności aktywacji istnieje kilka zasad:

1. Elementy z atrybutem tabindex="0" (zero) zachowują się identycznie, jakby w ogóle nie miały przypisanego tego atrybutu.
2. Elementy bez atrybutu tabindex="..." są aktywowane zawsze po tych, które posiadają niezerową wartość tego atrybutu - w kolejności występowania w kodzie źródłowym dokumentu.
3. Elementy z taką samą wartością tabindex="..." są aktywowane w kolejności występowania w kodzie źródłowym.
4. Możliwe jest opuszczanie wybranych liczb w numeracji tabindex="...". Nie ma również wymogu rozpoczynania numeracji od 0 ani od 1.
5. Elementy zablokowane atrybutem disabled="disabled" nie są uwzględniane w porządku aktywacji, ponieważ w ogóle nie można ich wybrać.
6. Elementy tylko do odczytu (readonly="readonly") są normalnie aktywowane, ale oczywiście nie można do nich nic wpisać.

Atrybut tabindex="..." można zastosować dla znaczników: A, AREA, BUTTON, TEXTAREA, SELECT, INPUT oraz OBJECT.

Przykład:

Aktywacja elementów kolumnami, a nie wierszami:

<table>
<tr>
	<td><input type="text" name="nazwa1" tabindex="1" /></td>
	<td><input type="text" name="nazwa4" tabindex="4" /></td>
	<td><input type="text" name="nazwa7" tabindex="7" /></td>
</tr>
<tr>
	<td><input type="text" name="nazwa2" tabindex="2" /></td>
	<td><input type="text" name="nazwa5" tabindex="5" /></td>
	<td><input type="text" name="nazwa8" tabindex="8" /></td>
</tr>
<tr>
	<td><input type="text" name="nazwa3" tabindex="3" /></td>
	<td><input type="text" name="nazwa6" tabindex="6" /></td>
	<td><input type="text" name="nazwa9" tabindex="9" /></td>
</tr>
</table>

• Ramy formularza
• Hasło

• Do góry
• Strona główna
• Drukuj rozdział
• Komentarze