Mai cikkünkben a HTML-formokkal (űrlapokkal) fogunk megismerkedni. Bemutatjuk, hogyan kell létrehozni egy egyszerű formot a megfelelő HTML-elemek alkalmazásával, és hogyan küldhetőek az adatok a szerverre.
Mik a HTML-formok?
A HTML-formok alkotják a felhasználó és a weboldal interakciójának a kulcsfontosságú pontjait. Lehetővé teszik, hogy a felhasználó adatokat küldjön a weboldalra — ezek az adatok leggyakrabban a szerverre kerülnek.
A HTML-form egy vagy több alkotóelemből áll. Ezek lehetnek szövegmezők, gombok, jelölő négyzetek stb. Az alkotóelemeket címkékkel szoktuk kiegészíteni, melyek leírják, mire valóak.
A form megtervezése
Mielőtt még hozzálátnánk a kódoláshoz, érdemes alaposan átgondolni, milyen formot szeretnénk készíteni, és az sem árt, ha rajzolunk magunknak egy vázlatot. Fontos előre meghatároznunk, milyen adatokat fogunk elkérni a felhasználóktól, és azt is érdemes szem előtt tartani, hogy a hosszú formok növelik annak lehetőségét, hogy elveszítjük a felhasználót, mert untatjuk a végtelennek tűnő kérdéssorozattal. Éppen ezért érdemes az egyszerűség elvét követve rövid és velős formokat létrehozni.
A HTML-form felépítése
Egy egyszerű űrlap felépítéséhez a következő HTML-elemekre lesz szükségünk: <form>, <label>, <input>, <textarea>, <button>, <fieldset> és <legend>.
A <form> elem
Minden HTML-űrlap a <form> elemmel kezdődik. Ez az elem definiálja az űrlapot. Egy olyan konténerelemről van szó, mint amilyen a <div> vagy a <p> is. Minden attribútuma opcionális, de ajánlott legalább az action és a method attribútumok beállítása. Az action attribútum határozza meg azt a lokációt (URL), ahova az űrlap által összegyűjtött adatokat kell küldeni. A method attribútum definiálja azt a HTTP-módszert, amellyel az adatokat küldjük (lehet “get” vagy “post”).
A <label>, <input> és <textarea> elemek
A <label> elemmel tudjuk megcímkézni a form alkotóelemeit. A for attribútum segítségével kapcsolható össze a címke a megfelelő alkotóelemmel — ez az attribútum utal a megfelelő alkotóelem id-jára. A címke és az alkotóelem összekötésével megkönnyítjük a felhasználók és a képernyőolvasók dolgát is.
Az <input> elem legfontosabb attribútuma a type. Ez az attribútum határozza meg, hogyan fog az <input> elem viselkedni. A type attribútum leggyakoribb értéke a text — ez azt jelenti, hogy egy egysoros szövegmezőről van szó, mely bármilyen textuális bemeneti értéket elfogad. A másik gyakori érték az email, mely egysoros mező csak helyesen strukturált e-mail-címeket fogad el. Ez az attribútum az egyszerű szövegmezőt “intelligens” mezővé változtatja, mely ellenőrzi a felhasználó által beírt adatot.
Amíg az <input> elem üres elem (nem kell bezárni), és mindig mellé kell helyezni az értékét, addig a <textarea> elemet be kell zárni a megfelelő zárójelöléssel. A <textarea> elem értékét egyszerűen a nyitó- és a záró jelölés közé kell helyezni.
A <button> elem
A <button> elem segítségével tudjuk hozzáadni azt a gombot az űrlaphoz, amelynek segítségével a felhasználó el tudja küldeni a válaszait. A <button> elem közvetlenül a </form> záróelem fölé kerül. A <button> elemnek is van type attribútuma, mely a submit, reset és button értékeket használja. A submit gomb az adatokat az action elem segítségével definiált lokációra küldi. A reset gomb visszaállítja az űrlap mezőit az alapbeállítottra. A button gomb pedig — nem csinál semmit! Furcsán hangzik, de hihetetlenül hasznos a JavaScript-gombok létrehozásakor.
A <fieldset> és a <legend> elemek
A <fieldset> elem segítségével könnyen csoportosíthatjuk azokat az űrlapelemeket, amelyeknek ugyanaz a céljuk. A <fieldset> elemet meg is címkézhetjük a <legend> elem segítségével. A <legend> elemtartalma a <fieldset> céljának leírására való.
A <fieldset> elemet leggyakrabban a rádiógombos kérdések csoportosítására használjuk, de számos más felhasználási módja is van. Segítségével fel is oszthatjuk a formot a jobb felhasználói élmény érdekében.
A <fieldset> elem a képernyőolvasók miatt is fontos. Ha jól van megszerkesztve, segítségével a képernyőolvasók sokkal érthetőbben olvassák fel az űrlapot.
Az adatok elküldése a webszerverre
Most jön a trükkös rész — az adatok átküldése a szerverre. Ahogy már említettük, a <form> elem action és method attribútumai felelősek az adatok küldéséért. Ez azonban nem elég, az adatoknak nevet is kell adnunk. Az adatok elnevezéséhez a name attribútum használata szükséges. Ez a böngésző és a szerver szempontjából is fontos. A böngésző ennek köszönhetően tudja, hogyan nevezze el a különféle adatokat, a szervernek pedig segít a kezelésükben.
Összegzés
Most már megvan az alaptudásod ahhoz, hogy helyesen szerkesztett, egyszerű HTML-formokat hozhass létre. Fontos azonban megemlíteni, hogy ezzel a cikkel csak betekintettünk a formok világába. A HTML-űrlapok bonyolult és fontos eszközök, számos felhasználási módjuk van, ám ezeket a mai leckénk során nem fedtük le.
NYEREMÉNYJÁTÉK!
A form elem method attribútuma milyen értékekkel bírhat?
Néhány szó rólunk:
Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.
