HTML5 űrlap

Minden weboldal elengedhetetlen kelléke egy kapcsolatfelvételi űrlap készítése. HTML5 által az adatellenőrzés sokkal könnyebbé vált, mert bevezetésre került az email és url, mely piros keretet kap az újabb böngészőkben, ha a felhasználó rosszul töltötte ki.
Az űrlap elemeket <form></form> közé tesszük. A form tagnek adhatunk name értéket. Az actiont általában üresen hagyjuk, ha ugyanabban a fájlban kezeljük az átadott értékeket. Amennyiben más fájlban, akkor annak neve kerül ide. A method POST, vagy GET értéket kap. (Ezt PHP keretein belül fogom részletezni).
Egy űrlapon belül megadhatunk egy-, vagy többsoros szöveges beviteli mezőket, legördülő listákat, vagy választókat, azon belül is ha egyetlen választ jelölhet be a látogató, akkor radiogombot használjuk, ha több válaszadási lehetősége van, akkor checkboxot.

<form name="mesterteam"  method="POST" action="">   
            <input type="text" name="nev" id="nev" placeholder="Neved"> 
            <input type="email" name="email" id="email" placeholder="E-mail címed" > 
            <input type="url" name="weblap" id="weblap" placeholder="Weboldal címed" > 
            <input type="tel" name="tel" id="tel" placeholder="Telefonszámod" > 
            <textarea name="uzenet" id="uzenet" placeholder="Ide írd az üzenetedet"></textarea> 
        <h3>Érdeklődés:</h3> 
        <select id="erdeklodes" name="erdeklodes"> 
            <option value="weboldal készítés">Weboldal készítés</option> 
            <option value="keresőoptimalizálás">Keresőoptimalizálás</option> 
            <option value="kódoptimalizálás">Kódoptimalizálás</option>  
            <option value="karbantartás">Karbantartás</option> 
        </select> 
        <h3>Sürgős:</h3> 
            <input type="radio" id="igen" name="surgos" value="igen"> 
            <label for="igen">Igen</label> 
            <input type="radio" id="nem" name="surgos" value="nem" checked="checked"> 
            <label for="nem">Nem</label>    
   
         <input type="reset" name="torles" id="torlogomb" value="Törlés"> 
        <input type="submit" name="kuldes" id="kuldogomb" value="Küldés"> 
   </form> 

Minden mezőnél fontos, hogy megadjuk a name attribútumot, mert azon keresztül tudunk hivatkozni rá az adatok feldolgozása során. Emellett ha formázni szeretnénk, megtehetjük id alapján, vagy class-t is adhatunk neki. A placeholder a kitöltendő mezőben jelenít meg szöveget.
Az input típusa lehet: text, email, url, tel.
A textarea több soros beviteli mező, rows és cols értékek megadásával tudjuk megadni a méretét. Ennek záró tagje is van, oda kell figyelni, hogy az input mezőkkel ellentétben ezt lezárjuk, valamint, hogy ne tegyünk közé sortörést, vagy üres szóközöket, mert az azt eredményezheti, hogy a mezőben nem a legelején fog villogni a kurzor.
A select mező által legördülő listát készíthetünk; ennek is meg kell adni a name változót. Értékeit option tagek között határozhatjuk meg.
Jelen esetben egy radio gombos választót mutatok be, de a checkbox is ugyanilyen elven működik. Alapértelmezetten a nem válasz van kijelölve, melyet a checked="checked" adtam meg.

Az űrlapok legfontosabb eleme a submit gomb, mert a formoknál ez indítja el a feldolgozást. A reset gomb törli az űrlapban megadott értékeket.

A későbbiek folyamán dizájnt is fogunk csinálni az űrlaphoz, ebben a részben csupán a html részt taglaltam.