Űrlap alap kódok

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

• 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ékektext (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).