Przejdź do treści

Formularze

Pole tekstowe

<form action="...">
	<input type="text" name="nazwa" />
</form>
lub
<form action="...">
	<input name="nazwa" />
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona później wysłana wraz z formularzem.

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" />
gdzie "n" to liczba z przedziału od 0 do 32767.

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>

Zobacz także

Komentarze

Zobacz więcej komentarzy