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.
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" />
Pole tekstowe o wielu liniach definiuje tag Textarea.
button
Tworzy przycisk:
<input type="button" value="napis" />
checkbox
Tworzy pole typu checkbox
<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="checkbox" name="nazwa" id="checkbox2" value="drugi" checked="checked" /><br />
<input type="checkbox" name="nazwa" id="checkbox3" value="trzeci" /><br />
Jeżeli formularz jest wysyłany do skryptu po stronie przeglądarki (np. JavaScript) 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" />
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" />
password
Pobiera hasło. Działa tak jak "text" z tym że wpisywane dane są "zagwiazdkowywane":
<input type="password" name="nazwa" value="haslo" />
radio
Tworzy listę opcji
<input type="radio" name="nazwa" id="checbox1" value="pierwszy" /><br />
<input type="radio" name="nazwa" id="checbox2" value="drugi" checked="checked" /><br />
<input type="radio" name="nazwa" id="checbox3" value="trzeci" /><br />
<input type="radio" name="nazwa" id="checbox2" value="drugi" checked="checked" /><br />
<input type="radio" name="nazwa" id="checbox3" value="trzeci" /><br />
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>
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>
submit
Wysyła formlularz:
<form action="index.php">
<input type="submit" value="wyslij" />
</form>
<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
- alt - tekst alternatywny dla pola typu image
- checked - zaznacza element typu checkbox lub radio
- disabled - blokuje pole formularza (nie może być użyte tylko z polem typu hidden)
- maxlength - maksymalna długość wpisanego tekstu
- name - nazwa pola
- readonly - definiuje pole jako "tylko do odczytu"
- size - rozmiar pola
- src - źródło obrazka w polu typu image
- type - typ pola
- value - definiuje zawartość pola
Wszystkie te atrybuty są dostępne w XHTML strict.
"Etykiety dla tych pół tworzy"
Poza tym label nie działa w IE
2. onReset => onreset