(X)HTML

Input

  • 2006-06-13 12:11
  • 3 komentarze
  • 3791 odsłon
  • Oceń ten tekst jako pierwszy

<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.
<right>Różnice między HTML i XHTML</right>


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 Textarea.

button


Tworzy przycisk:

<input type="button" value="napis" />


<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="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) 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" /><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="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" />

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

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


    <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
  • 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.

Główne atrybuty



Dostępne zdarzenia


3 komentarze

Ktos 2006-02-23 20:31

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...

Marooned 2006-02-23 18:07

Ś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

Bełdzio 2006-02-23 16:33

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