Input

Kooba

`<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" /><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 [[(X)HTML/Label]].

Dodanie atrybutu [[(X)HTML/Atrybuty/checked]] powoduje zaznaczenie danej opcji.

<h3>file</h3>

Tworzy selektor plików:

<code class="html4strict">
<input type="file" name="nazwa" />
<input type="file" name="nazwa" />

Zapoznaj sie z atrybutem [[(X)html/Atrybuty/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" />

<h3>image</h3>

Definiuje pole w postaci obrazka.

<code class="html4strict">
<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" />

<h3>radio</h3>

Tworzy listę opcji

<code class="html4strict">
<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 [[(X)HTML/Atrybuty/checked]] powoduje zaznaczenie danej opcji.

reset

Powoduje wywołanie zdarzenia [[(X)Html/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" />
<input type="checkbox" name="nazwa" id="checkbox2" value="drugi" checked="checked" />
<input type="checkbox" name="nazwa" id="checkbox3" value="trzeci" />
<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>

<h3>submit</h3>

Wysyła formlularz:

<code class="html4strict">
<form action="index.php">
    <input type="submit" value="wyslij" />
</form>

Isnieje kilka alternatywnych sposobów wysyłania formularzy. Zobacz [[(X)HTML/wysylanie_formularzy]].

Opcjonalne atrybuty

[[(X)HTML/Atrybuty/accept]] - lista nagłówków MIME, atrybut używany z polem typu file</li> [[(X)HTML/Atrybuty/alt]] - tekst alternatywny dla pola typu image</li> [[(X)HTML/Atrybuty/checked]] - zaznacza element typu checkbox lub radio</li> [[(X)HTML/Atrybuty/disabled]] - blokuje pole formularza (nie może być użyte tylko z polem typu hidden)</li> [[(X)HTML/Atrybuty/maxlength]] - maksymalna długość wpisanego tekstu</li> [[(X)HTML/Atrybuty/name]] - nazwa pola</li> [[(X)HTML/Atrybuty/readonly]] - definiuje pole jako "tylko do odczytu"</li> [[(X)HTML/Atrybuty/size]] - rozmiar pola</li> [[(X)HTML/Atrybuty/src]] - źródło obrazka w polu typu image</li> [[(X)HTML/Atrybuty/type]] - typ pola</li> [[(X)HTML/Atrybuty/value]] - definiuje zawartość pola</li> </ul>

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

Główne atrybuty

[[(X)HTML/Atrybuty/Id]] - identyfikator</li> [[(X)HTML/Atrybuty/Class]] - klasa CSS</li> [[(X)HTML/Atrybuty/Style]] - przypisany styl CSS</li> [[(X)HTML/Atrybuty/title]]</li> [[(X)HTML/Atrybuty/dir]]</li> [[(X)HTML/Atrybuty/lang]]</li> xml:lang</li> </ul>

Dostępne zdarzenia

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

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