jesteś w: Główna > XHTML > formularze
Ostatnia aktualizacja tej strony: 2022-03-28, 21:03:22

Nowe (ale stare) oblicze formularzy

Formatowanie v.1

Jak sformatować ładnie formularz nie używając do tego tabel? Zadanie wydaje się niemożliwe do wykonania. Używając warstw (div, layers) należałoby każdą oddzielnie pozycjonować. Skoro trzeba pozycjonować każdą warstwę oddzielnie to po co wogóle ich używać? I jak ustalić w prosty sposób ich położenie względem reszty dokumentu, gdy jego pozycja zależy od rozmiarów okna?

Książki, porady i kursy zapominają często o grupie atrybutów XHTML, których można użyć do stworzenia dobrze wyglądających formularzy, dającym im dodatkowo kilka przydatnych funkcji. Najpierw przykład formularza wykorzystującego element label i jego kod źródłowy.






<form method="post" action=""> 
<label for="p1">Imię</label> 
<input type="text" 
	id="p1" 
	name="p1" 
	size="20" 
	class="formNone" 
/><br /> 
<label for="p2">Nazwisko</label> 
<input type="text" 
	id="p2" 
	name="p2" 
	size="20" 
	class="formNone"
/><br /> 
<label for="p3">Adres</label> 
<input type="text" 
	id="p3" 
	name="p3" 
	size="50" 
	class="formNone" 
/><br /> 
<label for="p4">Ulubiona potrawa</label> 
<input 
	type="text" 
	id="p4" 
	name="p4" 
	size="10" 
	class="formNone" 
/><br /> 
<label for="p5">Ulubione zwierzę</label> 
<input type="text" 
	id="p5" 
	name="p5" 
	size="10" 
	class="formNone" 
/><br /> 
<label for="p6">Ulubiona roślinka</label> 
<input type="text" 
	id="p6" 
	name="p6" 
	size="10" 
	class="formNone" 
/> 
</form>

Na pierwszy rzut oka powyższy formularz nie różni się niczym od formularza wklepanego bez ładu i składu, ale wystarczy kliknąć na etykietę pola, żeby zauważyć, że bez żadnego JavaScript itp. możemy ustawić focus (aktywny kursor) na interesującym nas polu! Element label posiada atrybut for któremu należy przypisać id pola, do którego etykieta ma się odnosić.

W IE (także 7) label nie działa poprawnie jeśli zawiera w sobie tylko obrazek. Przeglądarka "odnotowuje" kliknięcie ale na nie nie reaguje. Tutaj można znaleźć więcej na ten temat (eng.).

Chociaż formularz nie wygląda sympatycznie to wystarczy trochę CSS dla elemantu label i wygląd znacznie się poprawił! Ponieważ zgodnie ze specyfikacją W3C przy projektowaniu zgodnym ze standardami nie można nadać żądanej szerokości atrybutowi typu INLINE, a wyświetlanie atrybutu jako BLOCK powoduję, że wszystko co jest po nim schodzi linijkę niżej, należy zastosować styl ze specyfikacji CSS 3. Jest on jednak poprawnie obsługiwany poprawnie przez większość nowych przeglądarek, więc nie powinien stanowić problemu. Ten styl to display: inline-block; i jak można domyślić się z jego wartości powoduje wyświetlanie elementów typu block w jednej linii. Dzięki temu wyświetlany formularz posiada ładnie sformatowane odległości. W przykładzie zastosowałem atrybut style, ale oczywiście lepiej zastosować class. Poniżej przykład i kod źródłowy. 






<form method="post" action=""> 
<label for="pa1" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Imię</label> 
<input 
	type="text" 
	id="pa1" 
	name="pa1" 
	size="20" 
	class="formNone" 
/><br /> 
<label for="pa2" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Nazwisko</label> 
<input type="text" 
	id="pa2" 
	name="pa2" 
	size="20" 
	class="formNone" 
/><br /> 
<label for="pa3" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Adres</label> 
<input type="text" 
	id="pa3" 
	name="pa3" 
	size="50" 
	class="formNone" 
/><br /> 
<label for="pa4" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Ulubiona potrawa</label> 
<input type="text" 
	id="pa4" 
	name="pa4" 
	size="10" 
	class="formNone" 
/><br /> 
<label for="pa5" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Ulubione zwierzę</label> 
<input type="text" 
	id="pa5" 
	name="pa5" 
	size="10" 
	class="formNone" 
/><br /> 
<label for="pa6" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Ulubiona roślinka</label> 
<input type="text" 
	id="pa6" 
	name="pa6" 
	size="10" 
	class="formNone" 
/> 
</form>

Należy pamiętać, że strona przejdzie poprawnie walidację tylko dla CSS v3 (do linku walidacji należy dodać zmienną profile=css3)! Przy okazji walidator wyświetla komunikat z ostrzeżeniem Line : 0 Property display doesn't exist for media jeśli w sekcji @media znajdzie się właściwość display, co jest oczywiście błędem walidatora.

Tak naprawdę to tylko opera obsługuje w miarę poprawnie display: inline-block. Obsługa serwowana przez IE wystarcza do zrobienia formularza. Przeglądarki gecko (mozilla, ff) nie obługują inline-block mają jednak eksperymentalne style: display: -moz-inline-box; Od wersji gecko 1.9 (min. Firefox3) jest pełna obsługa inline-block w przeglądarkach opartych na gecko.

Kolejne 2 elementy sprawią że nasz formularz będzie jeszcze ładniejszy i umożliwią podpodział formularza na mniejsze, logiczne sekcje. Pierwszym elementem jest fieldset, który dzieli formularz na zestawy pól. Jeśli chcemy nadać mu nazwę musimy użyć drugiego atrybutu - legend - czyli legendy.

Dane osoby


Ulubione 

<form method="post" action=""> 
<fieldset 
	style="width: 500px;"
> 
<legend 
	style="margin-bottom: 10px;"
>Dane osoby</legend>
<label for="pa1" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Imię</label> 
<input 
	type="text" 
	id="pa1" 
	name="pa1" 
	size="20" 
	class="formNone" 
/><br /> 
<label for="pa2" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Nazwisko</label> 
<input type="text" 
	id="pa2" 
	name="pa2" 
	size="20" 
	class="formNone" 
/><br /> 
<label for="pa3" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Adres</label> 
<input type="text" 
	id="pa3" 
	name="pa3" 
	size="50" 
	class="formNone" 
/><br /> 
</fieldset>
<fieldset 
	style="width: 500px;"
> 
<legend 
	style="margin-bottom: 10px;"
>Ulubione</legend>
<label for="pa4" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Ulubiona potrawa</label> 
<input type="text" 
	id="pa4" 
	name="pa4" 
	size="10" 
	class="formNone" 
/><br /> 
<label for="pa5" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Ulubione zwierzę</label> 
<input type="text" 
	id="pa5" 
	name="pa5" 
	size="10" 
	class="formNone" 
/><br /> 
<label for="pa6" 
	style="display: inline-block; 
	width: 150px; 
	height: 18px; 
	background-color:#E5F2B8;"
>Ulubiona roślinka</label> 
<input type="text" 
	id="pa6" 
	name="pa6" 
	size="10" 
	class="formNone" 
/>
</fieldset>
</form>

W ten sposób uzyskaliśmy ładny i użyteczny formularz bez użycia tabel! Warto wspomnieć jeszcze o jednym elemencie używanym w polach typu select, a mianowicie optgroup, który dzieli opcje w grupy, sprawiając, że długie menu staje się badziej przejrzyste. Przy pomocy atrybutu label (wymaganego) poszczególnym grupom można nadać nazwy. Poniżej przykład i kod:

<select id="sel" name="sel"> 
<optgroup label="literki A-C"> 
	<option value="a">A</option> 
	<option value="b">B</option> 
	<option value="c">C</option> 
</optgroup> 
<optgroup label="literki D-G"> 
	<option value="d">D</option> 
	<option value="e">E</option> 
	<option value="f">F</option> 
	<option value="g">G</option> 
</optgroup> 
<optgroup label="literki H-I"> 
	<option value="h">H</option> 
	<option value="i">I</option> 
	</optgroup> 
</select>

Formatowanie v.2

Drugim sposobem na sformatowany formularz jest zastosowanie stylu float, display: block oraz clear.

<label for="c1" style="
	display: block;
	width: 150px;
	float: left;"
>Imie:</label>
<input type="text" size="20" id="c1" /><br style="clear: left"/>
<label for="c2" style="
	display: block;
	width: 150px;
	float: left;"
>Nazwisko:</label>
<input type="text" size="20" id="c2" /><br style="clear: left"/>
<label for="c3" style="
	display: block;
	width: 150px;
	float: left;"
>Zawód:</label>
<input type="text" size="20" id="c3" /><br style="clear: left"/>

Styl float: left powoduje, że element do którego jest przypisany znajduje się po lewej stronie i jest "opływany" przez inne elementy. Styl clear: left powoduje, że do elementu, któremu jest przypisany nie stosuje się styl float, nadany elementom poprzednim. Mówiąc inaczej element nie będzie opływał innych elementów ze stylem float ale znajdzie się pod nimi. Styl clear należy zastosować do elementu br ponieważ w przypadku zastosowania go do elementu label formularz nie jest formatowany poprawnie, jeśli któryś z elementów label ma więcej niż jedną linijkę tekstu. I mały przykład:

Formularz sformatowany poprawnie także w Netscape


Więcej o formularzach można poczytać na stronach W3C pod adresem: http://www.w3.org/TR/REC-html40/interact/forms.html

form.submit()

obrazek - onclick="form.submit()"

javascript:form.submit() może się wydawać pomocne, ale w rzeczywistości można sobie spokojnie poradzić bez niego.

Jeśli chcesz użyć obrazka zamiast przycisku submit wcale nie musisz robić takich rzeczy jak: <a href="#" onclick="javascript:document.getElementById('myForm').submit(); return false;"><img src="submit.gif" alt="submit /></a>. Wystarczy <input type="image" src="submit.gif" alt="submit" />. Zalety takiego rozwiązania są oczywiste:

  1. prostota kodu
  2. znacznie mniejsza ilość kodu
  3. odporność na wyłączony javascript

Warto zauważyć atrybut alt zapewniający, podobnie jak w elemencie img, tekst alternatywny, gdy obrazek nie może być wyświetlony

Dodatkowo przesyłane są dwie zmienne: x i y określające współrzędne na obrazku, gdzie nastąpiło kliknięcie.

sprawdzanie pól formularza

W tym przypadku zamiast submit można wykorzystać atrybut onsubmit. Wystarczy, żeby funkcja sprawdzająca pola zwróciła false, a formularz nie zostanie zatwierdzony. Przykładowo <form ... onsubmit="return check_fields()"> lub <form ... onsubmit="return false"> (drugi przykład powoduje, że formularza nie uda się zatwierdzić).

niestandardowe, nieoficjalne i przyszłościowe opcje

Problemy z autouzupełnianiem - jak to wyłączyć?

Przeglądarki oferują opcję uzupełniania informacji ostatnio wprowadzonych do formularza, jednak w niektórych przypadkach pojawia się konieczność wyłączenia tej opcji. Oczywiście jak większość opcji decyzja o tym czy autouzupełnianie ma być włączone czy nie powinna być pozostawiona użytkownikowi, ale jeśli już taka konieczność zajdzie należy użyć parametru autocomplete dla znacznika <input .../>

<input type="text" size="10" name="my_field" id="my_field" autocomplete="off" />

domyślnie autocomplete jest ustawione na "on" czyli włączone.

Artykuły i linki

Menu

Działy:

Quick start:

Inne:

animacje Flash

Diablo 2: