Label címke hozzáadása

<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:

• 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-formlett.
• 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áulhttp://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 forattribú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 nameattribú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.