Pole tekstowe <input "text">

Pole tekstowe <input "text">

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

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

Atrybut name="...", powinien być unikalny 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.

Przykład <input "text">

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

Odpowiedź domyślna <input "text" value>

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

Przykład <input "text" value>

Długość pola <input "text: size>

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

Przykład <input "text" size>

Maksymalna ilość znaków, które można wpisać do pola <input "text" maxlength>

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

W języku HTML5 możliwe jest również ustalenie minimalnej długości pola: minlength="...".

Przykład <input "text" maxlength>

Pole tylko do odczytu <input "text" readonly>

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

Wstawienie atrybutu 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 <input "text" readonly>

Blokada pola <input "text" disabled>

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

Wstawienie atrybutu disabled powoduje zablokowanie pola.

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

Przykład <input "text" disabled>

Tabulator <input "text" tabindex>

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 nie są uwzględniane w porządku aktywacji, ponieważ w ogóle nie można ich wybrać.
6. Elementy tylko do odczytu (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 <input "text" tabindex>

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>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="text">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23