HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

Webáruház sablonok készítése

Kapcsolatfelvételi űrlap


    Egy kapcsolatfelvételi űrlap elkészítésén keresztül megismerkedünk a HTML5 és CSS3 űrlapelemek használatának megkönnyítéséhez kínált elemeit és tulajdonságait.                         

Programozott tananyag:


Kapcsolatfelvételi űrlap 1
A következő oldalakon egy kapcsolatfelvételi űrlapot készítünk, amely webáruházunk tartalmi területére illeszthető.

Az űrlap HTML kódja
A felhasználóknak segít a placeholder tulajdonságnál megadott szöveg, az elvárt formátum begépelésében mindaddig, amíg el nem kezdi a gépelést. Ekkor eltűnik. Éppen ezért a segítséget span-ben is elhelyezzük, amit viszont csak akkor fo

Méretezés és pozicionálás
Elrendezzük űrlapunk elemeit.

Képes nyomógomb kialakítása
A linkek vizsgálatánál már megtanultunk háttérképek segítségével nyomógombot készíteni. Most ugyanúgy járunk el, de egy input nyomógomb esetén.

Elemcsoportok csinosítása
A CSS3 lehetőségeit kihasználva felöltöztetjük elemcsoportjainkat.

Elemek csinosítása
Beállítjuk a beviteli elemek kereteit, árnyékait és sarkaik kerekítését.

Placeholder kezelése
A placeholder megjelenítése böngészőfüggő. Érdemes jellemzőit beállítani, így jobba be is simul weboldalunkba.

Körvonal kezelése
Saját kezünkbe vesszük az input elemek körvonalának kezelését.

Hibakezelés
Ikonok segítségével jelezzük a felhasználó számára, hogy mely elemeket kötelező kitöltenie, és éppen hol tart a kitöltésben.