H71: Űrlapvezérlők csoportjának a leírása mezőkészlet és jelmagyarázat elemek használatával
Alkalmazás
HTML és XHTML
Ez a technika az alábbiakra vonatkozik:
- 1.3.1 teljesítési feltétel (Információ és relációk/összefüggések)
- 3.3.2 teljesítési feltétel (Címkék vagy utasítások)
Leírás
A technika célja az adott űrlapvezérlők szemantikus csoportosítása. Ez lehetővé teszi a felhasználóknak a vezérlők kapcsolatainak értelmezését, valamint az űrlapok gyors és hatékony kezelését.
Az űrlapvezérlők a mezőkészlet elembe ágyazva csoportosíthatók. Az adott mezőkészletben lévő vezérlők mind kapcsolatban állnak egymással. A mezőkészlet első eleme a jelmagyarázat lehet, amely az adott csoporttal kapcsolatban tartalmaz címkét vagy utasításokat. A mezőkészletek lehetnek beágyazottak, habár ennek eltúlzása zavarokhoz vezethet.
A vezérlők csoportosítása a rádió gombok és a jelölőnégyzetek esetében a legfontosabb. A rádiógombok vagy jelölőnégyzetek akkor állnak kapcsolatban, ha ugyanarról a mezőről továbbítanak értékeket. A választási listákkal megegyező módon működnek, amely lehetővé teszi a felhasználók számára az opciók közüli választást. A különbség annyi a kategóriák között, hogy míg a választási listák egyéni vezérlők, addig a rádiógombok és jelölőnégyzetek összetett vezérlők. Mivel az utóbbiak összetett vezérlők, az egységes vezérlőként történő kezelésük megkönnyítése érdekében, esetükben kiemelten fontos a szemantikus csoportosítás. A felhasználói programok gyakran a vezérlő címkéje előtt jelenítik meg az adott vezérlő jelmagyarázatát, amellyel a felhasználót emlékeztetik arra, hogy a vezérlő ugyanannak a csoportnak a tagja.
Azokat a vezérlőket is célszerű lenne csoportosítani, amelyek között nem olyan erős a kapcsolat, mint a rádiógombok és a jelölőnégyzetek közötti. A felhasználók címeit gyűjtő mezőket például a "Lakcím" jelmagyarázattal lehetne egymáshoz csoportosítani.
A szerkesztők bizonyos esetekben kerülik a mezőkészletek alkalmazását, mivel a böngésző alapértelmezett megjelenítési beállítása szegélyt húz a csoportosított elemek köré. A vizuális csoportosítás szintén rendkívül hasznos lehet, és a szerkesztőknek javasolt az alkalmazásuk megfontolása (vagy a vizuális valamely típusának használata). CSS esetén a vizuális hatás a mezőkészlet "szegély", valamint a jelmagyarázat "pozíció" tulajdonságainak felülbírálatával módosítható.
Abban az esetben nem szükséges a mezőkészletek és jelmagyarázat használata, ha a rádiógombok csoportja világos utasításokat és határozott választási lehetőségeket tartalmaznak. A H44: címke-elemek használata szövegcímkék és űrlapvezérlők társítása céljából című részben foglaltak szintén elégségesek lehetnek.
Példák
1. példa: Egy többszörös választási teszt
Az alábbi példában egy olyan kérdés szerepel,
amelynek öt lehetséges válasza van. Minden választ egy
rádiógomb jelenít meg (bevitel
type="radio"). A rádiógombok a mezőkészleten
belül találhatók. A teszt kérdés a jelmagyarázat
elemmel került megjelölésre.
Példa kód:
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset>
2. példa: Ellenőrző dobozok csoportja
A weboldalak felhasználói profil oldala lehetővé
teszi a felhasználóknak, hogy ellenőrző dobozok
kiválasztásával jelöljék az érdeklődési körüket. Minden
ellenőrző doboz rendelkezik egy címkével (bevitel
type="checkbox"). Az ellenőrző dobozok a
mezőkészleten belül találhatók, míg a jelmagyarázat
tartalmazza az ellenőrző dobozok csoportjának
promptját.
Példa kód:
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
3. példa: A rádiógombok ugyanahhoz a mezőhöz vezetnek
Ebben a példában a felhasználónak egy gondolkodót kell kiválasztania. Fontos, hogy mindegyik mezőnek ugyanaz a "név" attribútuma, amely azt jelzi, hogy a rádiógombok kapcsolatban állnak egymással (ugyanahhoz a mezőhöz vezetnek), és a példának megfelelően kell csoportosítani őket. Szintén lényeges, hogy míg a "név" attribútumok ugyanazok, az "id" attribútumoknak egyedieknek kell lenniük.
Példa kód:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred philosopher</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">Socrates</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">Plato</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form>
Megjegyzés: Az összetartozó jelölőnégyzetek csoportjai ugyanúgy működnek, azt az esetet kivéve, ha a felhasználó az adott mezővel kapcsolatban több beállítást is használhat.
4. példa: Logikusan összetartozó vezérlők
Az alábbi példában a lak- és levelezési címek rögzítésére szolgáló űrlapmezőket a mezőkészlet csoportosításának jelmagyarázat értéke különbözteti meg.
Példa kód:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
-
HTML 4.01 Checkboxes
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Ellenőrizze, hogy a logikusan összetartozó beviteli elemek a mezőkészleten belül helyezkednek-e el.
-
Ellenőrizze, hogy a
type="radio"vagytype="checkbox"tagekhez tartozó és ugyanazzal a név attribútummal rendelkező beviteli elemek bármilyen csoportja az mezőkészleten belül helyezkedik-e el. -
Ellenőrizze, hogy minden mezőkészletnek van-e az adott csoportot leíró jelmagyarázat eleme.
Elvárható eredmények
- A fenti ellenőrzések igazak.