20. HTML űrlapok — az alapok

By Szökőcs Csaba

Bevezető

Mindenki látott már űrlapot. Minden használt már űrlapot. De kódoltál már ilyet valaha?

Az online világban űrlapnak nevezünk minden olyan részt a weblapokon, ahová információt tudsz begépelni, például amikor szöveget és számokat írsz egy szövegmezőbe, amikor bejelölsz egy mezőt, amellyel ki tudsz választani egy pontot, vagy kiválasztasz egy lehetőséget egy listából. Az űrlap tartalmát ezután egy gombra kattintva küldheted el a weblapnak.

A weben nagyon sok helyen találkozhatsz űrlapokkal, például amikor meg kell adnod a felhasználóneved és a jelszavad egy belépéshez, ha hozzászólsz egy blogon, kitöltöd a profilodat egy közösségi oldalon, vagy amikor megadod a fizetési adatokat egy vásárlás során.

Űrlapot könnyű készíteni, de mi a helyzet a webes szabványoknak megfelelő űrlapokkal? Mostanra már remélhetőleg sikerült meggyőznünk arról a tanfolyam korábbi részeiben, hogy a követendő út mindig a szabványos megoldás kell legyen. Szerencsére a hozzáférhető, szabványos kód megírása egyáltalán nem igényel nagyobb ráfordítást, mint egy akármilyen űrlap összedobása.

Szóval kezdjük egy alapvető és egyszerű űrlap készítésével, amelyet már használni lehet, és ebből készítsünk egy összetettebb űrlapot. Ebben a leírásban bemutatjuk az alapokat, amelyek segítségével már képes leszel egy elegáns, hozzáférhető HTML-alapú űrlapot készíteni. A leírás felépítése a következő:

Első lépés: Az alap kód

Kezdjük egy valóban egyszerű hozzászólás űrlappal, amellyel lehetővé teszed a látogatóidnak, hogy megjegyzést fűzzenek a tartalomhoz, visszajelzést adjanak a cikkedre, vagy kapcsolatba lépjenek veled anélkül, hogy tudnák az e-mail címed. A kód a következőképpen néz ki:

<form>
Név: <input type="text" name="nev" id="nev" value="" />
E-mail: <input type="text" name="email" id="email" value="" />
Megjegyzés: <textarea name="megjegyzes" id="megjegyzes" cols="25" rows="3"></textarea>
<input type="submit" value="küldés" />
</form>

Ha ezt beírod egy HTML dokumentumba, majd megnyitod a böngészőben, akkor a kód úgy jelenik meg, ahogy az az 1. ábrán látható:

1. ábra: Az első, egyszerű űrlap példa

Próbáld ki te is — írd be a fenti kódot egy saját, egyszerű HTML dokumentumba, majd töltsd be a böngészőbe, vagy nézd meg itt a fenti űrlapot élesben. Játszadozz nyugodtan az űrlap részeivel, hogy lásd, miket tudsz tenni velük.

Ha megnézed a kódot, akkor az elején láthatsz egy nyitó <form> taget, a végén egy záró </form> taget, és a kettő között több elemet. Ezek között van két beviteli mező, ahol a látogató megadhatja a nevét és az e-mail címét, valamint egy szövegmező, amiben egy megjegyzést küldhet az oldal tulajdonosának.

Lássuk, mit is találunk itt:

<form></form>: Ez a két tag nélkülözhetetlen egy űrlap készítéséhez — ezek nélkül nem tudsz webes űrlapot létrehozni. Minden webes űrlap a <form> taggel kezdődik és a </form> taggel ér véget.

A <form> tagnek van néhány attribútuma is, amelyeket a következő lépésben fogunk bemutatni. Fontos tudni azt is, hogy nem ágyazhatsz egymásba több különböző űrlapot.
<input> (vagy XHTML doctype esetén <input />): Ez a tag adja meg azt a területet, ahol információt írhatsz be. A fenti példában az input tagek definiálják a beviteli mezőket, ahová a látogatók beírhatják a nevüket és az e-mail címüket.

Minden input tagnek kell legyen egy type attribútuma, amely megadja a mező típusát: a lehetséges értékek text (szöveg), button (gomb), checkbox (jelölőnégyzet), file (fájl), hidden (rejtett), image (kép), password (jelszó), radio (választógomb), reset (visszaállítás) és submit (küldés).

Minden <input> tagnek kell legyen egy neve (kivéve néhány speciális esetben, amikor a value attribútum mindig ugyanarra van állítva, mint a type attribútum, például a tpye="submit" vagy "reset" esetében), amelyet te állíthatsz be kedved szerint. A name attribútum adja meg az űrlap elküldésekor az adatokat fogadó oldalnak (ami lehet egy adatbázis, vagy egy szerver-oldali szkripten keresztül küldött e-mail az adminisztrátornak), hogy mi a neve az input mezőben megadott információnak. Az űrlap elküldésekor a szkriptek általában a name attribútumot használják fel arra, hogy az adatot elhelyezzék egy adatbázisban, vagy olvasható formában elküldjék egy személynek.

Éppen ezért, ha az input elem célja az, hogy a látogató megadhassa benne a nevét, akkor a name attribútum ennek megfelelően lehet name="nev" vagy name="csaladnev". Ha az input elem egy e-mail cím megadására szolgál, akkor a name attribútum legyen name="email". Hogy megkönnyítsd a saját és az űrlapot feldolgozó személy dolgát, mindig szemantikusan nevezd el az input elemeket.

A szemantikus alatt itt azt értem, hogy a szerint nevezd el, hogy mi az elem funkciója, amint azt a fenti példában láthatod. Ha az input egy e-mail címet vár, akkor nevezd el ennek megfelelően name="email" formában. Ha egy utcacímet kérsz a látogatótól, akkor nevezd el name="utcanev" formában. Minél pontosabban nevezed el őket, annál könnyebb dolgod lesz később egy esetleges frissítés vagy módosítás során, ráadásul ezzel megkönnyíted a fogadó adatbázis vagy személy dolgát is, hogy könnyebben megértse a kapott űrlapot. Gondolkodj egyszerűen és törekedj a pontos elnevezésre.
Minden <input> tagnek kell legyen egy value (érték) attribútuma. Ezt állíthatod üresre — value="" —, ami azt jelzi a feldolgozó szkriptnek, hogy egyszerűen állítsa be, amit a felhasználó beírt a mezőbe. A jelölőnégyzetek, rádiógombok, rejtett-, küldés- és más típusú attribútumok esetén itt adhatod meg azt az értéket, amelyet alapesetben a mezőnek adni akarsz. Más esetekben, például küldés- és rejtett mezők esetében megadhatod azt az értéket, amely az elküldött érték lesz. Például value="yes" az igen gomb, value="submit" a küldés gomb, value="reset" a visszaállítás gomb, vagy value="http://www.opera.com" a rejtett átirányítás esetében.

Néhány példa a value attribútum használatára:

Lássunk egy üres értéket, amikor a felhasználó adja meg majd az attribútum értékét:
- A kód így néz ki: <input type="text" name="keresztnev" id="keresztnev" value="" />
- A felhasználó ezt írja be: Katalin
- Az űrlap elküldésekor a keresztnev mező értéke „Katalin” lesz.
Egy előre beállított érték:
- A kód így néz ki: <input type="checkbox" name="levelezo-lista" id="levelezo-lista" value="no" />
- A felhasználó bejelöli a jelölőnégyzeten, hogy csatlakozni szeretne a levelezőlistához.
- A „levelezo-lista” értéke az űrlap elküldésekor yes lesz.
A két <input> elem után találhatsz valami mást — a textarea elemet.

A textarea egy szép, új, továbbfejlesztett szövegmezőt bocsát a rendelkezésedre a szövegek megadásához. Nem csak egy egyszerű, egysoros szövegmezőt, mint amit a barátja, az input biztosít. A textarea elem több soros bevitelt tesz lehetővé, sőt azt is megadhatod, hogy hány sorban adhasd meg a szövegedet a beviteli mezőben. Figyeld meg a cols és rows attribútumokat — ezeket minden textarea elemben meg kell adnod, mivel ezekkel definiálhatod, hogy hány oszlopa és hány sora legyen a beviteli mezőnek. Az értékek karakterszámra vonatkoznak.
Végül, de nem utolsósorban van egy speciális input elem is egy value="submit" attribútummal. Ahelyett, hogy ez egy egysoros beviteli mezőt készítene, az elem egy küldés gombot hoz létre, amelyre ha rákattint a felhasználó, akkor az elküldi az űrlapot arra a címre, amelyet az űrlap létrehozásakor megadtunk (jelen esetben ezt még egyáltalán nem adtuk meg, így az űrlap elküldésekor nem történik semmi).

Második lépés: Struktúra és funkció

Szóval, eddig már kipróbáltad a fenti példa űrlapot, kitöltötted és megnyomtad a küldés gombot — de miért nem történt semmi, és miért néz ki ennyire rondán, miért van az egész egy sorban? A válasz az, hogy még nem strukturáltuk, és nem adtuk meg azt a helyet, ahová az űrlap az adatokat a kitöltés után elküldhetné.

Most térjünk vissza a tervezőasztalhoz:

<form id="contact-form" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <ul>
        <li>
            <label for="nev">Név:</label>
            <input type="text" name="nev" id="nev" value="" />
        </li>
        <li>
            <label for="email">E-mail:</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="megjegyzes">Megjegyzés:</label>
            <textarea name="megjegyzes" id="megjegyzes" cols="25" rows="3"></textarea>
        </li>
        <li>
            <input type="submit" value="küldés" />
            <input type="reset" value="visszaállítás" />
        </li>
    </ul>
</form>

Ez az űrlap a 2. ábrán látható módon jelenik meg a böngészőben:

2. ábra: A második űrlap példa — már jobban néz ki, de még nem tökéletes

Próbáld ki élesben a fenti űrlapot, és játszadozz vele nyugodtan.

Néhány módosítást tettem az eredeti, egyszerű űrlapoz képest. Nézzük meg ezeket egyenként:

Néhány új attribútum került be a <form> tag mellé. Hozzáadtam egy id attribútumot, nem csak a szemantikai okokból, hogy az űrlapnak legyen egy neve, hanem azért is, hogy legyen egy egyedi azonosítója, amellyel könnyebben lehet stílust rendelni hozzá CSS-ből, vagy módosítani rajta valamit JavaScriptben. Minden ilyen azonosítóból csak egy darab lehet egy adott névvel a lapon belül; jelen esetben az űrlap neve contact-form lett.
Fény, kamera, próba! Amikor az első űrlapon megnyomtad a küldés gombot, és nem történt semmi, az azért volt, mert nem adtunk meg hozzá semmilyen műveleted vagy metódust. A method attribútum szabja meg, hogy hogyan lesznek elküldve az adatok a feldolgozó szkriptnek. A két leggyakoribb metódus a „GET” és a „POST”. A „GET” metódus az adatokat a lap URL-jében küldi át (néha láthatsz ilyen hosszú URL-eket, mint például http://www.pelda.hu/page.php?data1=ertek1&data2=ertek2...; ezek mind olyan adatok, amelyek a „GET” metódussal továbbítódnak). Ha nincs konkrét indokod a „GET” metódus használatára, és érzékeny információkat akarsz továbbítani, akkor inkább ne használd ezt, mivel az URL-ből bárki láthatja ezeket az értékeket. A „POST” metódus az adatokat az űrlap szkriptjén keresztül küldi, vagy egy e-mailben az oldal adminisztrátorának, vagy az adatokat egy később hozzáférhető adatbázisba mentve, nem pedig az oldal URL-jében, mint a „GET”. A „POST” éppen ezért jóval biztonságosabb, így általában ez a jobb lehetőség.

Ha számodra nagyon fontos az űrlap adatainak biztonsága, például hitelkártya számokat küldessz át egy kereskedő oldalról, akkor neked érdemes a https protokollt használnod, amely támogatja az SSL-t (Secure Socket Layert). Alapvetően ez csak annyit jelent, hogy az adatok a https protokollon keresztül lesznek elküldve, nem pedig a http protokollon. Legközelebb, amikor fizetsz valamiért a neten vagy online bankolsz, nézd meg az oldal URL-jét — valószínűleg a címe a https:// jelöléssel fog kezdődni, nem a megszokott http:// jelöléssel. A https kapcsolat valamivel lassabb, mint a http, viszont az adatok titkosítva vannak, így ha valaki lehallgatja az adatfolyamot, képtelen lesz bármilyen értelmes információt kinyerni belőle. Lépj kapcsolatba a tárhely szolgáltatóddal, hogy tudnak-e neked https-et és SSL-t biztosítani.
Az action attribútum adja meg, hogy melyik szkript fájl számára legyenek elküldve az adatok feldolgozásra. Sok tárhely szolgáltató biztosít egy alap e-mail küldő vagy más hasonló szkriptet (nézd meg a tárhely leírását), amelyeket a szervereikhez állítottak be. Másrészről használhatsz olyan szerver-oldali szkripteket is, amelyeket te vagy valaki más hozott létre az űrlap feldolgozására. Sok esetben ilyen célokra PHP, Perl vagy Ruby szkripteket használnak az űrlap adatainak feldolgozásához — például küldhetsz egy e-mailt, amely az űrlap adatait tartalmazza, vagy beírhatod az adatokat egy adatbázisba, későbbi felhasználás céljából.

A szerver-oldali szkriptek írása túlmutat a jelen kurzus keretein, így most azt tudjuk ajánlani, hogy lépj kapcsolatba a tárhely szolgáltatóddal, hogy ők milyen hasonló szolgáltatásokat nyújtanak, vagy barátkozz össze egy programozóval.

Az alábbi oldalakon találhatsz néhány leírást ahhoz, hogy elindulhass a szerver-oldali szkriptek írásában:
- Perl: http://www.perl.com/
- PHP: http://www.php.net
- PHP Forms dokumentáció: http://uk3.php.net/manual/en/tutorial.forms.php
- Python: http://python.org/
- Ruby: http://www.ruby-lang.org
- Sendmail: http://www.sendmail.org/
- ASP.NET: http://www.asp.net/
A második sor, amit az új űrlaphoz hozzáadtunk, egy „rejtett” (hidden) beviteli mező — ami egy átirányítás. Mi van?

Abból a célból, hogy szétválasszuk a jelölés struktúráját a megjelenéstől és a működéstől, érdemes úgy megadni az űrlapot feldolgozó szkriptet, hogy az átirányítsa a felhasználót az űrlap elküldésekor. Valószínűleg nem akarod ilyenkor magukra hagyni a felhasználóidat bámulni az űrlapot, és azon gondolkodni, hogy most mégis mihez kezdjenek; gondolom te is egyetértesz, hogy jobb a felhasználót átirányítani egy köszönő oldalra, ahol egyúttal biztosíthatsz neki néhány „következő” linket is, miután elküldte az űrlapot. Ez a sor pontosan ezt teszi: miután az űrlapot elküldték, a felhasználót átirányítja az Opera főoldalára.
Az űrlap megjelenésének javításához az összes űrlapelemet egy rendezetlen listába tettem, így felhasználhatom ezt a jelölést, hogy világosan szétválasszam őket, majd CSS-ben megadjam a megjelenésüket.

Néhányan talán ellenkeznek, hogy az űrlap elemeit nem egy rendezetlen listában, hanem egy definíciós listában kellene megadni. Mások azt mondhatják, hogy egyáltalán ne tegyük bele az elemeket semmilyen listába, hanem használjuk CSS-ben a <label> és <input> tageket. Én nem akarok erről senkivel vitatkozni, hanem rád hagyom, hogy eldöntsd, szerinted melyik megoldás helyesebb szemantikailag. Ehhez az egyszerű példához én rendezetlen listát használtam.
Végezetül, a második űrlapon már elneveztem az űrlap elemeit. Mind az érhetőség, mind a széleskörű hozzáférhetőség szempontjából nagyon jó ötlet, hogy neveket adj az űrlap elemeinek — a label elem segítségével — mivel ezek hozzákapcsolódnak a megfelelő textarea és input elemekhez, az egyedi azonosítókon keresztül (az id attribútumban), amelyeknek az értéke megegyezik a label elem for attribútumával. Ez nem csak azért jó, mert vizuálisan jelöli a különböző űrlapmezők funkcióját a képernyőn, hanem szemantikailag is értelmet ad a mezőknek. Például így egy képernyő-felolvasót használó látogató is pontosan tudni fogja, hogy melyik űrlap elem mit takar. Az id értékeket pedig felhasználhatod a CSS-ben a különböző mezők stílusozására is.

Talán elgondolkodtál azon, hogy miért adtunk meg az űrlap elemekben egyszerre egy id és egy name attribútumot is. A válasz az, hogy a name attribútum nélküli input elemek nem lesznek elküldve a kiszolgálóra, így azokra mindenképp szükség van. Az id attribútumokra pedig azért van szükség, hogy összekapcsoljuk az űrlap elemeket a megfelelő label elemekkel. Ezért mindkettőt használnunk kell.

A második űrlap már valamivel szebben jelent meg, de még mindig egyszerű, mint egy bot. Ideje hozzáadni néhány varázsbitet, hogy igazi stílust kapjon.

Harmadik lépés: Szemantika, stílus és még egy kis struktúra

Most pedig befejezzük, amit a cikk elején elkezdtünk, a példa űrlapunk végleges változatával:

<form id="contact-form" action="script.php" method="post"> 
  <fieldset>
    <legend>Kapcsolat:</legend>
    <ul>
      <li>
        <label for="nev">Név:</label>
        <input type="text" name="nev" id="nev" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="megjegyzes">Megjegyzés:</label>
        <textarea name="megjegyzes" id="megjegyzes" cols="25" rows="3"></textarea>
      </li>
      <li>
        <label for="levelezo-lista">Feliratkozik a levelezőlistánkra is?</label>
        <input type="checkbox" checked="checked" id="levelezo-lista" value="Igen, feliratkozom!" />
      </li>
      <li>
        <input type="submit" value="küldés" />
        <input type="reset" value="visszaállítás" />
      </li>
    </ul>
  </fieldset>
</form>

Ha ezt megnyitod a böngészőben, akkor a 3. ábrán látható képet kapod.

3. ábra: A harmadik, végleges példa űrlap, teljes pompájában

Ha meg akarod nézni élőben a fenti példát, nyisd meg az űrlapot a böngésződben, és játszadozz vele nyugodtan.

A két nagyobb elem, amit most hozzáadtunk az űrlaphoz, az a fieldset és a legend. Egyik elemet sem kötelező használni, de nagyon hasznosnak a komplex űrlapok és prezentációk esetében.

A fieldset elem segítségével szemantikus egységekbe rendezheted az űrlapot. Egy bonyolultabb űrlapon például használhatsz különböző fieldset-eket a címekhez, a számlázási adatokhoz, a felhasználói szokásokhoz, és így tovább. A legend elemmel pedig elnevezheted a különböző fieldset részeket.

Ezen kívül most CSS-t is adtunk az űrlaphoz, hogy stílust kapcsoljunk a jelöléshez. Ez csak a harmadik űrlapon aktív, egy külső stíluslap használatával — itt találod a stílus definíciókat. Két dolgot tettem meg a CSS-ben: hozzáadtam egy kis margót a label és input dobozokhoz, valamint kitöröltem a lista pontjait. A külső stíluslapon ez a kód szerepel:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input  {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

Mit is csinál ez pontosan? Az első sor a fieldset keretét állítja be, hogy ne foglalja el a teljes lapszélességet; azt is beállíthatod, hogy egyáltalán ne legyen kerete a {border: none;} tulajdonsággal. A második sor egy 10 pixeles margót állít be az li elemeknek, hogy egy kis helyet teremtsen a listaelemek között. A harmadik és a negyedik sor egy bal margót állít be az input és textarea elemeknek, hogy ne folyjanak össze a nevekkel, és egymás alá kerüljenek. Ha többet is szeretnél tudni az űrlapok stílusozásáról, akkor erről még lesz sokkal bővebben is szó az Űrlapok stílusozása leírásban ennek a kurzusnak a kereteiben, vagy olvasd el A List Apart oldalon Nick Rigby cikkét a szép és hozzáférhető űrlapokról. A margókról és a keretekről is lesz még bővebben szó ebben a kurzusban.

Összefoglaló

Ebben a leírásban három lépésben raktunk össze egy webes szabványoknak megfelelő űrlapot. Sok minden van még az űrlapok világában, amiről most nem volt szó, ezeket már neked kell felfedezned. Vannak még gyorsbillentyűk, jelölőnégyzetek és választógombok, egyedi küldés és visszaállítás gombok, választó dobozok.

A harmadik űrlaphoz hozzáadtam egy jelölőnégyzetet is, hogy megmutassam, hogyan használhatod az input elem attribútumait az egyszerű és a többsoros szövegmezőn túl. A checkbox és a radio button attribútum értékek használatával lehetőséged van egyszerű kérdések feltevésére, és egy sor lehetséges válasz megadására is az űrlapon belül (a jelölőnégyzetekkel egyszerre több választ is ki lehet jelölni, a választógombokkal csak egyet). A választógombok különösen hasznosak például közvélemény kutatáskor.

A select elem — amelyről nem volt szó a leírásban — használható egy több elemet tartalmazó lenyíló menü létrehozására (például az országok listájával).

További olvasnivalók

Cameron Adams: Hozzáférhető, stílusos űrlapszerkezetek
Brian Crescimanno: Ésszerű űrlapok: használhatósági feladatlista
Simon Willison: Egyszerű űrlapellenőrzés PHP-vel
A specifikáció. Nem valami régi, hanem A W3C SPECIFIKÁCIÓ. Ha bármikor olyan álmatlanságban szenvednél, amikor sem a csésze meleg tej, sem a bárányok számolgatása, sem az altató nem segít, akkor csak kapd elő a HTML 4.01 vagy az XHTML 1.0 specifikációit a w3.org-ról. Olcsóbb és hatékonyabb, mint bármilyen gyógyszer. [Helyettesítsd be az istened nevét] áldja meg a világ mérnökeit.
A W3.org kedves munkatársai leírták a különbséget a „GET” és a „POST” között, valamint hogy mikor melyiket kell használni.
Hálás köszönet Mr. Rigbynek.

Tesztkérdések

Itt az ideje, hogy elkészítsd a saját űrlapodat.

Készíts egy egyszerű kapcsolat űrlapot, amelyben bekéred a felhasználó nevét, e-mail címét, valamint egy hozzászólást.
Adj hozzá egy jelölőnégyzetet (checkbox), amellyel megkérdezed a felhasználót, hogy fel akar-e iratkozni a levelező listádra.
Készíts CSS-t az űrlap stílusozására: állítsd be az űrlap szélességét, igazítsd a neveket balra, adj meg egy háttérszínt, stb.

Pluszponért: minél többet játszol az űrlapelemekkel és a különböző CSS tulajdonságokkal, annál többet tanulsz meg abból, hogy mit lehet tenni egy egyszerű űrlappal.

További pluszpontokért: ha szeretnél ismeretlen területeket is felfedezni, akkor keress egy szkriptet vagy válassz egyet azok közül, amiket a tárhely szolgáltatód biztosít, és küldd el magadnak az űrlapot. Ha a szkriptes résszel nem tudnál megbirkózni, akkor ideje összebarátkoznod egy programozóval.

A szerzőről

Az üzleti webdesigner és webfejlesztő, fényképész, moblogger és professzionális művészkülönc, Ms. Jen a design- és művészeti karrierjét egy magasított székben kezdte a ételek művészi átrendezésével valamint falra helyezésével 11 hónapos korában. 1996-ban tanította meg magát a HTML-re, mivel egy számítógépes sznob azt mondta neki, hogy egy művész nem tud megtanulni kódolni, azóta is rajong a webdesign mindenféle formájáért.

Ms. Jen a Black Phoebe Designs alapítója és tulajdonosa, amely egy web- és mobil designer cég. Ms. Jennek mesteri fokozata van számítástechnikából és multimédiás rendszerekből a dublini Trinity Fősikolától (Írország), és webdesignt tanult egy LA környéki egyetemen 2001–2005 között. Részt vett két Nokia mobil blogoló projektben: Wasabi Lifeblog (2004–2005) és Nokia Urbanista Diaries (2008). Ms. Jen mindig megtalálható online a blackphoebe.com vagy blackphoebe.mobi oldalakon.

p /

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.