Input

`<input>`

Znacznik ten definiuje pole dzięki któremu użytkownik wysyła dane. Jest to jedno z pól formularzy (zobacz Form).

Uwaga! W języku HTML 4.01 znacznik ten nie posiada znacznika zamykającego. Natomiast w XHTML-u musi on zostać poprawnie (według standardu języka XML) zakończony: `<input />`

Spacja przed znakiem "/" ułatwia rozpoznanie tagu przeglądarkom nie obsługującym XHTML. Różnice między HTML i XHTML.

Atrybut "type"

Znacznik ten przyjmuje różne postacie w zależności od podanego atrybutu Type.

text

Definiuje pole tekstowe:

<input type="text" name="nazwapola" value="wartość początkowa" />


<input type="text" name="nazwapola" value="wartość początkowa" />

Pole tekstowe o wielu liniach definiuje tag [[(X)HTML/Textarea]].

<h3>button</h3>

Tworzy przycisk:

<code class="html4strict"><input type="button" value="napis" />
<input type="button" value="napis" />

checkbox

Tworzy pole typu checkbox

<input type="checkbox" name="nazwa" id="checkbox1" value="pierwszy" />
<input type="checkbox" name="nazwa" id="checkbox2" value="drugi" checked="checked" />
<input type="checkbox" name="nazwa" id="checkbox3" value="trzeci" />
```

<input type="checkbox" name="nazwa" id="checkbox1" value="pierwszy" />

<input type="checkbox" name="nazwa" id="checkbox2" value="drugi" checked="checked" />

<input type="checkbox" name="nazwa" id="checkbox3" value="trzeci" />

Jeżeli formularz jest wysyłany do skryptu po stronie przeglądarki (np. JavaScript (EcmaScript)) to ważne jest aby każdy z nich miał unikatowy atrybut id, jeżeli dane zostaną wysłane do skryptu po stronie serwera (np. PHP) to można użyć atrybuty name w postaci name="nazwa[]" co spowoduje stworzenie tablicy w skrypcie.

Etykiety dla tych pół tworzy sie po prostu podając obok tekst lub, używając znacznika Label.

Dodanie atrybutu Checked powoduje zaznaczenie danej opcji.

file

Tworzy selektor plików:

<input type="file" name="nazwa" /> ``` <input type="file" name="nazwa" />

Zapoznaj sie z atrybutem Enctype.

hidden

Wysyła ukryte dane (znacznik jest niewidoczny dla użytkownika ale dane z niego zostaną przekazane np. do skryptu):

<input type="hidden" name="nazwa" value="tajne dane" /> ```

image

Definiuje pole w postaci obrazka.

<input type="image" name="nazwa" src="http://4programmers.net/bin/coyote.jpg" /> ``` <input type="image" name="nazwa" src="http://4programmers.net/bin/coyote.jpg" />

password

Pobiera hasło. Działa tak jak "text" z tym że wpisywane dane są "zagwiazdkowywane":

<input type="password" name="nazwa" value="haslo" /> ``` <input type="password" name="nazwa" value="haslo" />

radio

Tworzy listę opcji

<input type="radio" name="nazwa" id="checbox1" value="pierwszy" />
<input type="radio" name="nazwa" id="checbox2" value="drugi" checked="checked" />
<input type="radio" name="nazwa" id="checbox3" value="trzeci" />
```

<input type="radio" name="nazwa" id="radio1" value="pierwszy" />

<input type="radio" name="nazwa" id="radio2" value="drugi" checked="checked" />

<input type="radio" name="nazwa" id="radio3" value="trzeci" />

Atrybut name musi być taki sam dla wszystkich pól dotyczących tego samego pytania, a value koniecznie inny dla każdego z nich!

Dodanie atrybutu Checked powoduje zaznaczenie danej opcji.

reset

Powoduje wywołanie zdarzenia onreset i przywrócenie domyślnych wartości wszystkich pól formularza.

<form action="index.php"> Wpisz coś na próbe: <input type="text" name="tekst" value="Tereferekukurykucipcipcip!" /> <input type="text" name="tekst" value="" />
<input type="checkbox" name="nazwa" id="checkbox1" value="pierwszy" /><br />
<input type="checkbox" name="nazwa" id="checkbox2" value="drugi" checked="checked" /><br />
<input type="checkbox" name="nazwa" id="checkbox3" value="trzeci" /><br />

<input type="reset" value="Wyczyść" />
</form> ``` <form action="index.php"> Wpisz coś na próbe: <input type="text" name="tekst" value="Tereferekukurykucipcipcip!" /> <input type="text" name="tekst" value="" />
<input type="checkbox" name="nazwa" id="c1" value="pierwszy" /><br />
<input type="checkbox" name="nazwa" id="c2" value="drugi" checked="checked" /><br />
<input type="checkbox" name="nazwa" id="c3" value="trzeci" /><br />

<input type="reset" value="Wyczyść" />
</form>

submit

Wysyła formlularz:

<form action="index.php"> <input type="submit" value="wyslij" /> </form> ```

Isnieje kilka alternatywnych sposobów wysyłania formularzy. Zobacz wysylanie formularzy.

Opcjonalne atrybuty

accept - lista nagłówków MIME, atrybut używany z polem typu file</li> Alt - tekst alternatywny dla pola typu image</li> Checked - zaznacza element typu checkbox lub radio</li> Disabled - blokuje pole formularza (nie może być użyte tylko z polem typu hidden)</li> maxlength - maksymalna długość wpisanego tekstu</li> Name - nazwa pola</li> readonly - definiuje pole jako "tylko do odczytu"</li> Size - rozmiar pola</li> Src - źródło obrazka w polu typu image</li> Type - typ pola</li> Value - definiuje zawartość pola</li> </ul>

Wszystkie te atrybuty są dostępne w XHTML strict.

Główne atrybuty

Id - identyfikator</li> Class - klasa CSS</li> Style - przypisany styl CSS</li> Title </li> Dir </li> Lang </li> xml:lang</li> </ul>

Dostępne zdarzenia

* [[(X)HTML/Zdarzenia/tabindex]] * [[(X)HTML/Zdarzenia/accesskey]] * [[(X)HTML/Zdarzenia/onfocus]] * [[(X)HTML/Zdarzenia/onblur]] * [[(X)HTML/Zdarzenia/onselect]] * [[(X)HTML/Zdarzenia/onchange]] * [[(X)HTML/Zdarzenia/onclick]] * [[(X)HTML/Zdarzenia/ondblclick]] * [[(X)HTML/Zdarzenia/onmousedown]] * [[(X)HTML/Zdarzenia/onmouseup]] * [[(X)HTML/Zdarzenia/onmouseover]] * [[(X)HTML/Zdarzenia/onmousemove]] * [[(X)HTML/Zdarzenia/onmouseout]] * [[(X)HTML/Zdarzenia/onkeypress]] * [[(X)HTML/Zdarzenia/onkeydown]] * [[(X)HTML/Zdarzenia/onkeyup]]

3 komentarzy

Label nie działa w IE?! Jak nie działa, jak działa... a przynajmniej ja w IE7b2 oraz nawet IE5 widzę wszystko tak jak być powinno...

Śmieszna literówka, a głowiłem się nad nią jakiś czas [green]
"Etykiety dla tych pół tworzy"
Poza tym label nie działa w IE :( ferment

  1. w reset imho zamiast " wyczyszczenie wszystkich pół formularza." powinno być przywrócenie wartości domyślnych bo tak jak w tym przypadku jeśli mamy " <input type="text" name="tekst" value="Tereferekukurykucipcipcip!" />", zmienimy txt i damy reset to przywróci nam wartosc "Tereferekukurykucipcipcip"

  2. onReset => onreset