A választólistákon keresztül kínálhattok látogatóknak egy listát bejegyzésekből, amelyek közül választhatnak egy bejegyzést.
<select name="nyelvek"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
A választólistákat a select-elemek definiálják. Itt ismét érvényes: Minden választólistát egy azonosítóval (name) kell egyértelműen azonosítani a dokumentumban. A lista egyes elemeit minden egyes bejegyzés esetében az option-elemekkel határozzuk meg. Az <option> nyitó és záró tage között szerepel a lista bejegyzésének a szövege.
Az űrlap elküldésekor alapértelmezetten a kiválasztott lista bejegyzésének a szövege kerül továbbításra. Ennek alternatívájaként azonban más elküldési értéket is megadhattok. Ennek megadása a value-attribútumon keresztül történik.
<select name="nyelvek"> <option value="s1">HTML</option> <option value="s2">JavaScript</option> <option value="s3">CSS</option> <option value="s4">XML</option> <option value="s5">Java</option> </select>
Egyszerűen adhatjátok meg a kívánt elküldési értéket a value-nak.
Általában csak egy bejegyzés látható egy választólistából. Ha szeretnétek, több bejegyzést is megjeleníthettek.
Erről a select-elemre a size attribútumot kell használnotok. Ez a size meghatározza a választólista megjelenítésének a méretét.
<select name="nyelvek" size="3"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Ha a lista több bejegyzést tartalmaz, mint amennyit meg lehet jeleníteni, akkor görgethető lesz a lista.
Egy választólistából alapértelmezetten csak egy bejegyzés választható ki. Azonban szükség esetén több választás is megvalósítható.
<select name="nyelvek" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
A többszörös választást a multiple attribútum hozzárendelésével tehetitek lehetővé a select-elemhez.
A választólistában elsődlegesen nincs előre kiválasztott bejegyzés. Azonban ezt is megváltoztathatjátok egy megfelelő attribútum használatával.
<select name="nyelvek" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option selected>CSS</option> <option>XML</option> <option>Java</option> </select>
A kívánt bejegyzés előre kiválasztásához az adott option-elemnek a selected attribútumot kell használni.
Tehát több bejegyzést is előre kiválaszthattok. Ehhez egyszerűen többször használjátok a selected attribútumot.
Rádiógombok
Az úgynevezett rádiógombokkal csoportokat definiálhattok gombokból.
<form action="form.php" method="post">
<p>Feliratkoznál a hírlevélre?:</p>
<p>
<input type="radio" name="hirlevel" value="igen" /> Igen<br />
<input type="radio" name="hirlevel" value="nem" /> Nem
</p>
</form>
Itt ismét azt figyeljétek meg, hogy azonosítóval (name) látjátok el a rádiógombokat. Minden gomb, amely ugyanazt az azonosítót kapja, ugyanazon csoportba tartozik. Ezek közül egyet pontosan kiválaszthattok.
Az value attribútumon keresztül meghatározhatjátok az egyes gombok elküldési értékét.
Egy gomb előre kiválasztásához használjátok a checked attribútumot.
<form action="form.php" method="post">
<p>Feliratkoznál a hírlevélre?:</p>
<p>
<input type="radio" name="hirlevel" value="igen" /> Igen<br />
<input type="radio" name="hirlevel" value="nem" checked /> Nem
</p>
</form>
Vegye figyelembe, hogy egy előválasztás csak egy gomb esetében végezhető el.
Jelölőnégyzetek
Az emlékeztető jelölőnégyzetekről számos űrlapon találkozhattok.
Ez egy olyan csoport kijelölhető négyzetekből áll, amelyek közül a felhasználók egyet, egyiket sem vagy többet is kiválaszthatnak.
<p>Mely témák érdekelnek még benneteket?:</p>
<p>
<input type="checkbox" name="thema" value="html" /> HTML<br />
<input type="checkbox" name="thema" value="css" /> CSS<br />
<input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>
A jelölőnégyzeteket az input-elemek definiálják, amelyeknek a type="checkbox" attribútum-érték párost kell hozzárendelni. Minden jelölőnégyzetnek egy egyedi azonosítót kell adni a name attribútumon keresztül. Azonos nevű jelölőnégyzetek egy csoportba tartoznak. A value attribútum segítségével határozzuk meg az egyes jelölőnégyzetek elküldési értékét.
Rejtett beviteli mezők
Az űrlapokban olyan mezőket is definiálhattok, amelyek láthatatlanok a látogatók számára. Az űrlap elküldésekor az ilyen rejtett mezőkben lévő értékek is továbbításra kerülnek. Ez például akkor érdekes, ha PHP segítségével értékeket kell meghatározni és ezeket szeretnénk továbbítani anélkül, hogy a felhasználók észlelnék.
A rejtett beviteli mezők input elemek segítségével definiálhatók, amelyeknek a type="hidden" attribútum-érték párost kell hozzárendelni.
<input type="hidden" name="id" value="">
Az elemnek egy egyedi azonosítót kell adni a name attribútumon keresztül. A mező értékét a value hivatkozással adjuk meg. Ez lehet statikus érték. Ugyancsak lehet például dinamikusan megadni PHP vagy JavaScript segítségével.
Feltöltési mezők
Ha lehetővé szeretnéd tenni a látogatóknak fájlok feltöltését, akkor egy megfelelő mezőt is kínálhatsz nekik. Íme egy példa arra, hogy egy ilyen alkalmazás hogyan nézhet ki:
<form action="form.php" method="post" enctype="multipart/form-data"> <p>A választásod:<br> <input name="Fájl" type="file" /></p> </form>
A böngészőben a következőképpen fest:
A fájl feltöltő mezők input elemek segítségével vannak meghatározva, amelyeknek a type="file" attribútum-érték párost kell hozzárendelni. Ebben a mezőtípusban használjuk az <form> elem megnyitásakor a method="post" képletet. Ezenfelül az enctype="multipart/form-data" attribútum-érték páros is ott kell legyen. Csak így lesznek ténylegesen átvittek a fájlok. Ha ezt a megjegyzést kihagyjuk, akkor csak a fájl neve lesz továbbítva.
Küldés és Mégse gombok
Az űrlapadatok küldéséhez természetesen szükség van megfelelő gombra is.
Űrlapok elküldéséhez a következő szintaxist használjuk:
<input type="submit" value="Küldés" />
A gombon szereplő szöveg a value attribútum értékével kerül meghatározásra.
A küldés gombnak megfelelő visszavonás gombok is léteznek.
Ha az egyik ilyen gombra kattintunk, minden űrlaptartalom törlésre kerül. Az ilyen gombok szintaxisa a következő:
<input type="reset" value="Mégse" />
Itt is érvényes: A feliratot a value attribútum értéke határozza meg.
Egyébként a button elem segítségével is definiálhatunk gombokat.
Ezen változat előnye: nagyon rugalmasak vagytok vele. Valójában az ilyen gombok megjelenését és funkcionalitását magatok állíthatjátok be.
<button name="klick" type="button" value="Meglepetés" onclick="alert('Biztos vagy benne?');">Kattints rám</button>
Az aktuális példa esetében az onclick eseménykezelővel azt érjük el, hogy amikor a gombra kattintanak, megjelenik egy JavaScript üzenetablak. A gomb megjelenését a kezdő és záró <button> közötti tartalom határozza meg. Ebben az esetben bármilyen tartalmazás megengedett. Tehát nem csak szöveg megengedett. Ezenkívül adhatunk meg itt egy img elemet is, hogy generáljunk egy grafikus gombot.
