H91: HTML űrlapvezérlők és hivatkozások alkalmazása
Alkalmazás
HTML űrlapvezérlők és hivatkozások
Ez a technika az alábbiakra vonatkozik:
Leírás
A technika célja az, hogy szabványos HTML űrlapvezérlők és hivatkozáselemek útján biztosítsa az interaktív felhasználói interfész elemek billentyűzet műveleteit és ezek együttműködését a segítő technológiákkal.
A HTML űrlapvezérlők és hivatkozások billentyűzet műveleteit a felhasználói programok biztosítják. Ezen kívül a felhasználói programok egy akadálymentesítési csatlakozási felületen keresztül rendelik egymáshoz az űrlapvezérlőket és hivatkozásokat. A segítő technológiák az akadálymentesítési csatlakozási felületen keresztül jutnak hozzá és jelenítik meg az olyan akadálymentesítési információkat, mint a szerep, név, állapot és érték. A szerepet a HTML elem jeleníti meg, a nevet pedig az elemhez társított szöveg adja meg. Az értékhez és állapothoz tartozó elemek szintén különböző mechanizmusokon keresztül jelenítik meg az említett tulajdonságokat.
Bizonyos esetekben a szöveg már társításra került a vezérlővel a kötelező attribútumon keresztül. Az elküld gombok például a gomb elem szövegét, képét vagy alt attribútumát használják névként. Űrlap vezérlők esetében a címke-elemek vagy cím attribútumok a használatosak. A következő táblázatban az szerepel, hogyan kerülnek meghatározásra a HTML hivatkozásokkal és űrlapvezérlőkkel együtt használatos szerep, név, érték és tulajdonság elemek.
| HTML elem | Szerep | Név | Érték | Tulajdonság |
|---|---|---|---|---|
| <a> | hivatkozás | 'cím' attribútum, szöveg az <a> elemen belül vagy képi hivatkozás esetén 'alt' attribútum. Szöveges és képi 'alt' attribútum esetében egymás után kerülnek feltüntetésre. | 'href' attribútum | |
| <button> | nyomógomb | szöveg a <button> elemen belül vagy 'cím' attribútum | ||
| <fieldset> | csoportosítás | <legend> elem | ||
| <input type = "button", "submit", vagy "reset"> | nyomógomb | 'érték' attribútum | ||
| <input type = "image"> | nyomógomb | 'alt' attribútum vagy 'cím' attribútum | ||
| <input type = "text"> | szerkeszthető szöveg | társított <label> elem vagy 'cím' attribútum | 'érték' attribútum | |
| <input type = "password"> | szerkeszthető szöveg | társított <label> elem vagy 'cím' attribútum | ||
| <input type="checkbox"> | jelölőnégyzet | társított <label> elem vagy 'cím' attribútum | 'ellenőrzött' érték | |
| <input type="radio"> | rádió gomb | társított <label> elem vagy 'cím' attribútum | 'ellenőrzött' érték | |
| <select> | kombó doboz, lista, vagy legördülő lista | társított <label> elem vagy 'cím' attribútum | <option> elem beállított 'választott' attribútummal | |
| <textarea> | szerkeszthető szöveg | társított <label> elem vagy 'cím' attribútum | szöveg a <textarea> elemen belül |
Példák
1. példa: Hivatkozások
A felhasználói programok biztosítják a hivatkozások közötti navigációhoz és a kiválasztásukhoz szükséges mechanizmust. Az alábbi példák mindegyikében a <a href> elemből a "hivatkozás" szerep következik. Fontos, hogy a <a name> tag nem adja meg egy "hivatkozás" szerepét. Az URI értéke a 'href' attribútumban található.
1a. példa
Az 1a példában szereplő hivatkozás szövegében található név ebben az esetben "Example Site".
Példa kód:
<a href="www.example.com">Example Site</a>
1b. példa
Az 1b példában szereplő hivatkozásban lévő kép nevét az 'alt' attribútum adja meg. Az API-k megtekintésére szolgáló néhány eszköz, mint pl. a Microsoft Inspect Objects, nem tárja ezt fel, de a segítő technológiák igen.
Példa kód:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
1c. példa
Az 1c példában a név kiválasztásra kerül a hivatkozás többi eleme közül az "Example Text" szöveg olvashatósága érdekében.
Példa kód:
<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>
2. példa: Gombok
Számos HTML módszer létezik a gombok megalkotására, és ezek mindegyike társítható a "nyomógomb" szereppel.
2a. példa
A 2a példában a szöveg a gomb elemen belül helyezkedik el. Ebben az esetben a név: "save". Érték nem szerepel a példában.
Példa kód:
<button>Save</button>
2b. példa
A 2b példában a "Save", "Submit" és "Reset" nevekhez az 'érték' attribútum tartozik.
Példa kód:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
2c. példa
A 2c példában a "save" névhez az 'alt' attribútum tartozik.
Példa kód:
<input type="image" src="save.gif" alt="save" />
2d. példa
A 2d példában nincs 'alt' attribútum ezért a "save" névhez a cím attribútum került felhasználásra.
Példa kód:
<input type="image" src="save.gif" title="save" />
2e példa
A 2e példában a "save" névhez a beviteli elemek 'alt' attribútuma tartozik. A cím attribútum nem került felhasználásra.
Példa kód:
<input type="image" src="save.gif" alt="save" title="save" />
3. példa:
3a. példa
A 3a példában a beviteli mező a "szerkeszthető szöveg" szereppel bír. A cím elem a 'for' attribútumon keresztül kerül társításra a beviteli elemhez, hivatkozással a beviteli elem azonosító attribútumára. Ebben az esetben a "Type of fruit" név a cím elemből következik. Az értéke a "bananas" érték attribútumból következik.
Példa kód:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
3b. példa
A 3b példában a beviteli mezőnek ugyanaz a szerepe és értéke, mint a 3a példában, de a nevét a cím attribútumból kapja.
Példa kód:
<input id="text_1" type="text" value="bananas" title="Type of fruit">
4. példa: Jelölőnégyzet
A 4. példában a jelölőnégyzet szerep a beviteli elem típus attribútumából kerül megadásra. A címke-eleme a 'for' attribútumon keresztül kerül társításra a beviteli elemhez. A 'for' attribútum a beviteli elem azonosító attribútumára hivatkozik. A "cheese" név ebben az esetben a címke-elemből következik. Állapota, amely a "jelölt" attribútumból következik, lehet jelölt vagy jelöletlen. Az állapotot a vezérlők segítségével a felhasználó tudja megváltoztatni.
Példa kód:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
5. példa: Rádió gombok
Az 5. példában a "rádió gomb" szerep a beviteli elem típus attribútumából következik. A név a cím elem segítségével határozható meg. A jelölt vagy jelöletlen állapot a jelölt attribútumból következik. Az állapotot a felhasználó tudja megváltoztatni.
Példa kód:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
6. példa:
6a példa
A 6a példában a kombó doboz szerep a választás elemből következik. A "Numbers" név a címke-elemből következik. Általános hibaként említhető az, ha a választás nem kap nevet. Az értéket a beállítás elem tartalmazza, amelynek a választott attribútuma a választott állásba került beállításra. Ebben az esetben a "Two" az alapértelmezett érték.
Példa kód:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
6b példa
A 6b példában szereplő név, szerep, és érték megegyezik a fentiekkel, de a nevet a választás elem cím attribútuma adja meg. Ez a technika akkor használható, ha nem ajánlatos a látható címke használata.
Példa kód:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
7. példa: Szövegmező
7a példa
A 7a példában a szerkeszthető szöveg szerep a szövegmező elemből következik. A "Type your speech here" név a címke-elemből kerül megadásra. A szövegmezőben elhelyezkedő tartalom értéke ebben az esetben a: "Four score and seven years ago".
Példa kód:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
7b példa
A 7b példában a szerep, név, és érték megegyezik a fentiekkel, de a nevet a 'cím' attribútum adja meg.
Példa kód:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
8. példa:
Rádió mezőkészlet
A 8. példában szereplő a rádió mezőkészlet a csoportosítás szereppel rendelkezik. A név a jelmagyarázat elemből kerül megadásra.
Példa kód:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Vizsgálja meg a HTML forráskódot.
-
Minden hivatkozás- és űrlapelem esetében, a fenti táblázat alapján ellenőrizze a nevet, értéket és tulajdonságot.
Elvárható eredmények
- A 2. pont igaz.