HTML5 Forms 2.0 avagy “Form-áljuk” meg

Egy kis szünet után ismét jelentkezek egy cikkel. Remélem felkészültetek, ezúttal csinálunk egy komplett fizetési űrlapot, annak minden kellékével együtt.
Nem lesz egyszerű dolgunk, hiszen itt már komolyan kell az egyes strukturális elemeket használni, valamint fejest ugrunk a css3-ba is. Ha valamelyik parancsot nem érted és én nem láttam el commenttel, akkor sokat segíthet a CSS3 referencia. Találsz magyarul vagy angolul is. Valamint, javasolt a kód letöltése és ízekre szedése, átírása, ahogy jól esik.

Vágjunk is bele, kezdjük a HTML5 résszel, hiszen ez az egyszerűbb, itt csak az lesz fontos, hogy a struktúrát megfelelő logikával építsük fel, hogy a “csinosítás” egyszerűbb legyen.

A HTML5 beviteli elemeit fogom használni, értelemszerűen a következőket:

  • text
  • e-mail
  • tel

Valamint pár kiegészítő opciót, amiket már megnéztünk az előzőekben:

  • autofocus
  • required
  • placeholder

Az alap tagolást fieldset-ekkel oldottam meg, minden űrlaprész a végleges kódban kapott egy saját fieldset-et. Az egyes konkrét input mezőket <ol> – <li> tag-ekkel (lista elemek) definiáltam. Valamint használtam a legend tag-et, hogy az egyes űrlapcímek jól mutassanak majd, de ne szaladjunk ennyire előre.  Kezdjük egy egyszerű példával és annak alapfokú “csinosításával”.

Nézzük az alapadatok részt. Kérjük be a felhasználó nevét, e-mail címét és telefonszámát. Helyezzünk el placeholdereket és legyen az összes mező required, azaz kötelezően kitöltendő. Segítsük a felhasználót azzal, hogy az első mezőbe helyezzünk el egy autofocus-t, hogy gyorsabban tudjon az űrlap kitöltésébe belevágni.

A HTML5 forrás valahogy így néz ki.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Form demo</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body>
<h1>Egyszerű fizetési űrlap</h1>
<form id=fizetes>
<fieldset>
<legend>Alapadataid</legend>
<ol>
<li>
<label for=name>Név</label>
<input id=name name=name type=text placeholder="Családi és keresztnév" required autofocus>
</li>
<li>
<label for=email>E-mail</label>
<input id=email name=email type=email placeholder="[email protected]" required>
</li>
<li>
<label for=phone>Mobiltelefon</label>
<input id=phone name=phone type=tel placeholder="+36201234567" required>
</li>
</ol>
</fieldset>
</form>
</body>
</html>

CSS nélkül itt tudod megnézni.

Nézzük mit tudunk csinálni ezzel a form-al, hogy jobban mutasson. Adjunk neki egy kis CSS-t. Én már elhelyeztem a fenti kódban a megfelelő részt, hogy ne kelljen még egyszer bevágnom az alap kódot. A CSS fájlomat style.css-nek neveztem el. A CSS-ben a HTML5 tagolásunkra definiáltam az egyes stílus elemeket (form, fieldset legend, label, ol, li), megpróbáltam minél jobban teletűzdelni megjegyzésekkel, hogy jobban nyomon tudjátok követni. A forrásom a következőképpen néz ki:

/* CSS Reset, nem muszáj, de ártani nem árt */
{
margin: 0;
padding: 0;
}

/* Itt mondjuk el a böngészőnek, hogy a html5 element-eket block-ként kezelje */
html, body, h1, form, fieldset, legend, ol, li {
display: block;
margin-left: auto;
margin-right: auto;
}

body { /* definiáljuk az alaphátteret és még pár dolgot */
background: #F0F0F0; /* háttér szín */
color: #991111; /* betű szín */
padding: 0;
font-family: Georgia, serif;
}

h1 { /* az oldal címének csinosítása */
font-size: 28px; /* betűméret */
text-align: center; /* igazítás */
}

form#fizetes {
/* Form háttér és lekerekítés */
background: #96cedd;
-moz-border-radius: 20px; /* ha kerek akkor szép */
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
padding: 10px; /* a form-ot körülvevő rész paddingját beállítjuk */
width: 500px; /* állítunk egy szélességet */
}

form#fizetes fieldset { /* igazítjuk az alapadatok részt*/
border: none;
margin-bottom: 5px;
}

form#fizetes legend { /* "alapadataid" szöveg formázása */
color: #3b4e8c;
font-size: 16px;
font-weight: bold;
}

form#fizetes ol li { /* megformázzuk a form egyes sorait, és a körülvevő területet */
background: #59cfac;
background: rgba(255,255,255,.2); /* egy kis trükk, hogy szebb legyen. rgba - átlátszóság definicióval*/
border-color: #aab092;
border-color: rgba(255,255,255,.2);
border-style: solid;
border-width: 2px;
-moz-border-radius: 10px; /* ismét kerekítések, mert szeretjük a kerek formákat */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 10px; /* sor magasság definiálása */
list-style: none; /* hozzá tartozó stílus */
padding: 6px 12px; /* egy kis igazítás */
margin-bottom: 1px;
}

form#fizetes label { /* a form cimkéinek igazítása */
float: left;
font-size: 13px;
width: 150px;
}

Az elkészült részünk így néz ki.

Ha ezzel megvagyunk, akkor bővítsük az űrlapunkat a címadatok résszel, tegyünk egy “megveszem” gombot a végére, valamint lássuk el egy számlálóval az egyes legend-eket. A bővítésnél az előzőekhez hasonló struktúrát kövessünk. Nálam ez így néz ki:

...
<fieldset>
<legend>Cím</legend>
<ol>
<li>
<label for=address>Cím</label>
<textarea id=address name=address rows=5 required></textarea>
</li>
<li>
<label for=postcode>Írányítószám</label>
<input id=postcode name=postcode type=text required>
</li>
<li>
<label for=country>Ország</label>
<input id=country name=country type=text required>
</li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Megveszem!</button>
</fieldset>
</form>
</body>
</html>

A kibővített CSS pedig így:

/* CSS Reset, nem muszáj, de ártani nem árt */
{
margin: 0;
padding: 0;
}

/* Itt mondjuk el a böngészőnek, hogy a html5 element-eket block-ként kezelje */
html, body, h1, form, fieldset, legend, ol, li {
display: block;
margin-left: auto;
margin-right: auto;
}

body { /* definiáljuk az alaphátteret és még pár dolgot */
background: #F0F0F0; /* háttér szín */
color: #991111; /* betű szín */
padding: 0;
font-family: Georgia, serif;
}

h1 { /* az oldal címének csinosítása */
font-size: 28px; /* betűméret */
text-align: center; /* igazítás */
}

form#fizetes {
/* Form háttér és lekerekítés */
background: #96cedd;
-moz-border-radius: 20px; /* ha kerek akkor szép */
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
counter-reset: fieldsets; /* nullázzuk a számlálót */
padding: 10px; /* a form-ot körülvevő rész paddingját beállítjuk */
width: 500px; /* állítunk egy szélességet */
}

form#fizetes fieldset { /* igazítjuk a számlálót */
border: none;
margin-bottom: 5px;
}

form#fizetes legend { /* számlálóhoz tartozó szöveg formázása */
color: #3b4e8c;
font-size: 16px;
font-weight: bold;
}

form#fizetes > fieldset > legend:before { /* számláló utáni szöveg formázása, hogy mégis mit írjon ki */
content:  counter(fieldsets)"." " Lépés:"; /* ezt érdemes kipróbálni, állítgassátok, csak úgy lehet memorizálni */
counter-increment: fieldsets; /* mikor is nőveljük a számlálónkat ? Hát persze, fieldsets-enként */
}

form#fizetes ol li { /* megformázzuk a form egyes sorait, és a körülvevő területet */
background: #59cfac;
background: rgba(255,255,255,.2); /* egy kis trükk, hogy szebb legyen. rgba - átlátszóság definicióval*/
border-color: #aab092;
border-color: rgba(255,255,255,.2);
border-style: solid;
border-width: 2px;
-moz-border-radius: 10px; /* ismét kerekítések, mert szeretjük a kerek formákat */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 10px; /* sor magasság definiálása */
list-style: none; /* hozzá tartozó stílus */
padding: 6px 12px; /* egy kis igazítás */
margin-bottom: 1px;
}

form#fizetes label { /* a form cimkéinek igazítása */
float: left;
font-size: 13px;
width: 150px;
}

form#fizetes textarea { /* cím beviteli mező kinézetének/formázásának definiálása */
background: #ffffff;
border: none;
-moz-border-radius: 10px; /* újabb kerekítés.. */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
font: italic 13px Georgia, serif;
outline: none;
padding: 5px;
width: 200px;
}

form#fizetes button { /* megveszem gomb alaptulajdonságai */
background: #4b676e;
border: none;
-moz-border-radius: 40px; /* még mindig kerek */
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
color: #ffffff;
display: block;
font: 18px Georgia, serif;
letter-spacing: 2px; /*betűk közötti hely növelése */
margin: auto;
padding: 7px 25px;
text-transform: uppercase; /* írjuk át nagybetűsre bármi is kerül a gombra */
}

form#fizetes button:hover { /* megveszem gomb egér felette tulajdonságai */
background: #384d52;
cursor: help; /*ez csak egy kis példa, hogy a kurzor kinézetén is tudunk változtatni. */
}

A működő példa itt megtekinthető.

Ha eddig megvagyunk, akkor már csak a fizetés módjának megválasztása van hátra. Én a radio típusú gombot választottam. A kész forrásunk pedig a következőképpen néz ki:

...
<fieldset>
<legend>Fizetés módja</legend>
<ol>
<li>
<fieldset>
<ol>
<li>
<input id=paypal name=cardtype type=radio>
<label for=paypal>Paypal</label>
</li>
<li>
<input id=skrill name=cardtype type=radio>
<label for=skrill>Skrill</label>
</li>
</ol>
</fieldset>
</li>
</ol>
</fieldset>

A kibővített CSS forrás pedig a következő:

/* CSS Reset, nem muszáj, de ártani nem árt */
{
margin: 0;
padding: 0;
}

/* Itt mondjuk el a böngészőnek, hogy a html5 element-eket block-ként kezelje */
html, body, h1, form, fieldset, legend, ol, li {
display: block;
margin-left: auto;
margin-right: auto;
}

body { /* definiáljuk az alaphátteret és még pár dolgot */
background: #F0F0F0; /* háttér szín */
color: #991111; /* betű szín */
padding: 0;
font-family: Georgia, serif;
}

h1 { /* az oldal címének csinosítása */
font-size: 28px; /* betűméret */
text-align: center; /* igazítás */
}

form#fizetes {
/* Form háttér és lekerekítés */
background: #96cedd;
-moz-border-radius: 20px; /* ha kerek akkor szép */
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
counter-reset: fieldsets; /* nullázzuk a számlálót */
padding: 10px; /* a form-ot körülvevő rész paddingját beállítjuk */
width: 500px; /* állítunk egy szélességet */
}

form#fizetes fieldset { /* igazítjuk a számlálót */
border: none;
margin-bottom: 5px;
}

form#fizetes legend { /* számlálóhoz tartozó szöveg formázása */
color: #3b4e8c;
font-size: 16px;
font-weight: bold;
}

form#fizetes > fieldset > legend:before { /* számláló utáni szöveg formázása, hogy mégis mit írjon ki */
content:  counter(fieldsets)"." " Lépés:"; /* ezt érdemes kipróbálni, állítgassátok, csak úgy lehet memorizálni */
counter-increment: fieldsets; /* mikor is nőveljük a számlálónkat ? Hát persze, fieldsets-enként */
}

form#fizetes ol li { /* megformázzuk a form egyes sorait, és a körülvevő területet */
background: #59cfac;
background: rgba(255,255,255,.2); /* egy kis trükk, hogy szebb legyen. rgba - átlátszóság definicióval*/
border-color: #aab092;
border-color: rgba(255,255,255,.2);
border-style: solid;
border-width: 2px;
-moz-border-radius: 10px; /* ismét kerekítések, mert szeretjük a kerek formákat */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 10px; /* sor magasság definiálása */
list-style: none; /* hozzá tartozó stílus */
padding: 6px 12px; /* egy kis igazítás */
margin-bottom: 1px;
}

form#fizetes ol ol li { /* Fizetés módja beviteli rész igazítása */
background: none;
border: none;
float: left;
}

form#fizetes label { /* a form cimkéinek igazítása */
float: left;
font-size: 13px;
width: 150px;
}

form#fizetes fieldset fieldset label { /* fizetés módja beviteli rész cimkéje, annak csinosítása */
background:none no-repeat left 60%;
line-height: 20px;
padding: 0 0 0 30px;
width: 30px;
}

form#fizetes input:not([type=radio]), /* Fizetés módja rész radio típusának definiálása */
form#fizetes textarea { /* beviteli mező kinézetének/formázásának definiálása */
background: #ffffff;
border: none;
-moz-border-radius: 10px; /* újabb kerekítés.. */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
font: italic 13px Georgia, serif;
outline: none;
padding: 5px;
width: 200px;
}

form#fizetes input[type=radio] { /* Fizetés módja radio gomb helyzete */
float: left;
margin-right: 5px;
}

form#fizetes button { /* megveszem gomb alaptulajdonságai */
background: #4b676e;
border: none;
-moz-border-radius: 40px; /* még mindig kerek */
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
color: #ffffff;
display: block;
font: 18px Georgia, serif;
letter-spacing: 2px; /*betűk közötti hely növelése */
margin: auto;
padding: 7px 25px;
text-transform: uppercase; /* írjuk át nagybetűsre bármi is kerül a gombra */
}

form#fizetes button:hover { /* megveszem gomb egér felette tulajdonságait */
background: #384d52;
cursor: help; /*ez csak egy kis példa, hogy a kurzor kinézetén is tudunk változtatni. */
}

A kész űrlapunk megtekinthető itt.

Innen pedig le tudjátok tölteni a kész kódot a CSS-el együtt.

Amennyiben bármi hibát találtok vagy kérdésetek van, kérlek jelezzétek a kapcsolatnál megadott e-mail címre vagy írjatok ide.

Jó szerkesztgetést mindenkinek!

Creative Commons Licenc
HTML5 Forms 2.0 avagy “Form-áljuk” meg a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...