Formularze#
Pole tekstowe#
<form action="..."> <input type="text" name="nazwa"> </form>
lub
<form action="..."> <input name="nazwa"> </form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skrócony opis lub treść pytania), która nie powinna być jednak zbyt długa. Zostanie ona później wysłana wraz z formularzem.
Atrybut name powinien być unikatowy w obrębie formularza, tzn. żadne dwie kontrolki w tym samym formularzu nie powinny mieć takiej samej nazwy.
Większość rodzajów kontrolek w formularzach definiuje się za pomocą pustego elementu input z odpowiednią wartością atrybutu type (ewentualnie z dodatkowymi specyficznymi atrybutami). Najprostszym przedstawicielem tej grupy jest pole tekstowe (atrybut type="text", którego podawać nie trzeba).
Pole tekstowe to prostokąt, w którego obrębie można wprowadzić jedną linię danych tekstowych. Dane zostaną wysłane wraz z formularzem, jako odpowiedź na zadane pytanie. Kontrolka ta ma kilka dodatkowych atrybutów:
value- pozwala zdefiniować wartość domyślną. Zostanie ona dołączona do formularza, jeśli użytkownik nie wpisze innej.size- określa widoczną długość pola tekstowego w znakach. Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków. Domyślna wartość zależy od stosowanej przeglądarki.maxlength- określa maksymalną liczbę znaków jaką można wpisać do pola tekstowego (domyślnie jest to nieskończoność). Wartośćmaxlengthmoże być większa odsize– wtedy przeglądarka umożliwia przewijanie w obrębie pola tekstowego.readonly- tylko do odczytu. Domyślny tekst (zdefiniowany za pomocąvalue) nie może zostać zmieniony. Wartość pola jest jednak normalnie przesyłana w formularzu.disabled- blokada pola tekstowego. Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Najlepiej zobaczyć działanie poszczególnych atrybutów na żywych przykładach.
Domyślna kontrolka input:
<form action="">
<div>
<input name="example" />
</div>
</form>Efekt:
Sztywna deklaracja za pomocą type="text":
<form action="">
<div>
<input type="text" name="example" />
</div>
</form>Efekt:
Wartość domyślna (value):
<form action="">
<div>
<input type="text" value="To jest domyślny tekst" name="example" />
</div>
</form>Efekt:
Określenie widocznej długości (size):
<form action="">
<div>
<input type="text" size="40" name="example" />
</div>
</form>Efekt:
Określenie maksymalnej liczby znaków (maxlength):
<form action="">
<div>
<input type="text" maxlength="10" name="example" />
</div>
</form>Efekt:
Maksymalna liczba znaków większa od widocznej długości pola:
<form action="">
<div>
<input type="text" size="10" maxlength="20" name="example" />
</div>
</form>Efekt:
Ustawienie pola tylko do odczytu (readonly):
<form action="">
<div>
<input type="text" readonly="readonly" value="Nie wolno zmieniać" name="example" />
</div>
</form>Efekt:
Wyłączenie pola (disabled):
<form action="">
<div>
<input type="text" disabled="disabled" value="Pole zostało zablokowane" name="example" />
</div>
</form>Efekt: