Input
`<input>`
Znacznik ten definiuje pole dzięki któremu użytkownik wysyła dane. Jest to jedno z pól formularzy (zobacz Form).
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
file
Tworzy selektor plików:
<input type="file" name="nazwa" />
```
<input type="file" name="nazwa" />
Zapoznaj sie z atrybutem Enctype.
hidden
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
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
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
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
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
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
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
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
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]]
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
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"
onReset => onreset