Forum PHP.pl > [xhtml] zastosowanie elementu label dla inputow

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [xhtml] zastosowanie elementu label dla inputow

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

wewior

5.02.2008, 13:40:40

stosuje element label dla pol formularzy mniej wiecej w taki sposob:

[HTML] pobierz, plaintext 
<div id="firstName">
 <label for="oFirstName">First name</label>
 <input type="text" name="sFirstName" id="oFirstName" />
</div>
[HTML] pobierz, plaintext

wg w3c mozna jeszcze korzystac z tego elementu w taki sposob:

[HTML] pobierz, plaintext 
<div id="firstName">
 <label>First name
  <input type="text" name="sFirstName" />
 </label>
</div>
[HTML] pobierz, plaintext

dla mnie oszczednosc kodu bo zwykle nie mam dodatkowych elementow w takiej strukturze, a nie mam nadmiarowych atrybutow, pytanie jednak jakie to ma wady i zalety... czy np bez problemu sobie bede mogl te elementy ustawic w stylach bo w drugim przypadku tekst "First name" juz nie jest w osobnym atrybucie... druga sprawa to jak z zaleceniami WAI, czy to tez jest poprawna konstrukcja?

Toadstyle

6.02.2008, 12:03:21

co do styli niema problemu -
#firstName {costam costam} <--ogolnie dla wszystkiego
#firstName input{costam costam} dla input
#firstName label{} itd itp wiec wszystko da sie ustawic css'em

co do wai niewiem szczeze mowiac : > . Przechodzi w3c?Sprawdz validiatorem jak przejdzie znaczy ze wszystko jest ok. Pozdro

wewior

6.02.2008, 14:08:09

dostac sie dostane do elementow ale nie ustawie np ustawic elementow w osobnych liniach, osobnego tla dla tekstu a osobnego dla inputa, tego typy rzeczy

gekon

6.02.2008, 19:03:58

Obydwa są poprawne jeśli chodzi o WAI. Z drugim sposobem IE ma problemy. No i oczywiście pierwszy łatwiej da się obrabiać CSSem.

Toadstyle

8.02.2008, 22:00:33

Cytat(wewior @ 6.02.2008, 14:08:09 )

dostac sie dostane do elementow ale nie ustawie np ustawic elementow w osobnych liniach, osobnego tla dla tekstu a osobnego dla inputa, tego typy rzeczy

pierwszy sposob jest jest prosty do przerobki,2gi jest problematyczny poniewaz nieda sie bezposrednio ustawic tla tylko pod tekstem-mozliwe jest naprzyklad ustawienie obrazu tła oraz odpowiednie wypozycjonowanie go.2gim rozwiazaniem jest dodanie jakiegokolwiek elementu - ja uzylem span.efekt:
http://www.toadstyle.yoyo.pl/1.gif

Jezeli zalezy ci na ograniczeniu elementow pozostaje ci tylko obrazek jako tlo.Moze to byc jednopixelowy obrazek koloru tla div'u lub inputu ktory bedziemy powielac od zakonczenia tekstu.Da to efekt o ktory prawodopodobnie ci chodzi tylko pytanie brzmi czy warto uzywac cssa do wklejania jednopixelowych obrazkow na stronie aby uzyskac jakis efekt .... to chyba cofanie sie w rozwoju

pozdrawiam

<style type="text/css">
body {background:black;}
#firstName {background:white;}
#firstName input{background:yellow;}
#firstName label{background:orange;}
#firstName span{background:red;}

</style>
</head>

<body>
<div id="firstName">
<label for="oFirstName">First name</label>
<input type="text" name="sFirstName" id="oFirstName" />
</div>

<div id="firstName">
<label>First name
<input type="text" name="sFirstName" />
</label>
</div>

<div id="firstName">
<label><span>First name</span>
<input type="text" name="sFirstName" />
</label>
</div>

</body>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.