HTML-formok

HTML-formok

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?

1. send vagy put
2. get vagy post
3. submit vagy deliver
 
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
 

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.

Szeretne értesülni, ha új cikk jelenik meg Számtek rovatunkban? Iratkozzon fel értesítőnkre!

E-mailben értesíteni fogjuk Önt az új cikkekről. Feliratkozáshoz kérjük adja meg a nevét és az e-mail címét.

Hozzászólások

Kapcsolódó cikkek

HTML-formok
Számtek
  • Erdsoft
  • 2019.10.03.
  • LXXIV. évfolyam 39. szám
HTML-formok
Számtek
  • Erdsoft
  • 2019.09.25.
  • LXXIV. évfolyam 38. szám
Facebook

Támogatóink