Űrlapok készítése és formázása: CSS és jQuery trükkök

Írta: | 2010. augusztus 21. | kategóriák: (X)HTML, CSS, JavaScript, Speciális

Sokaknak a mai napig gondot vagy fejtörést okoz az (X)HTML űrlapok készítése. Régen táblázatokkal volt megoldva a formázás, természetesen ez nem helyes szemantikailag. Ha kinézetre nem is feltétlenül változtak a régebbi form-ok, jópár éve már az úgynevezett float-olt technikát használják. Az egyik legnagyobb előnye, hogy az űrlap kódja logikailag is helyes lesz, így az oldalunk elérhetőbb lesz a fogyatékos internetezők számára is (például a látássérülteknek, akik képernyő felolvasót használnak). Ez a leírás megmutatja, hogyan lehet egyszerű és mégis helyes form-okat készíteni, illetve néhány hasznos trükkre is felhívja a figyelmet, ami nem feltétlen a fogyatékos felhasználókat célozza meg, de az átlagfelhasználó életét nagyban megkönnyítheti, felgyorsíthatja annak munkáját.

Űrlap XHTML kódja

Vegyünk példának egy szimpla űrlapot, néhány mezővel. Minden mezőnek kell egy felirat, hogy mit is jelent. Ezt a címkét érdemes a label taggel jelölni, markup-olni, hogy ne csak vizuális értéke legyen majd formázás után, hanem a képernyőfelolvasók és egyéb automatizált weboldal feldolgozó rendszerek is jobban érthessék a form tartalmát. A címkéket úgy tudjuk hozzarendelni egy-egy elemhez, hogy az elem id mezőjének értékét beírjuk a label for mezőjébe. Mivel az id egyedi kell legyen, így egy címke csupán egy elemre vontakozhat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form method="post" action="#" id="tesztUrlap">
  <label for="csaladnev">Családnév</label>
  <input type="text" name="csaladnev" id="csaladnev" />
 
  <label for="keresztnev">Keresztnév</label>
  <input type="text" name="keresztnev" id="keresztnev" />
 
  <label for="szuletesiDatum">Születési dátum</label>
  <input type="text" name="szuletesiDatum" id="szuletesiDatum" />
 
  <label for="periodikusReklam">Fogadok ajánlatokat</label>
  <input type="checkbox" name="periodikusReklam" id="periodikusReklam" class="checkbox" />
 
  <div id="reklamlevelAdatok">
	<label for="emailCim">Email cím</label>
	<input type="text" name="emailCim" id="emailCim" />
 
	<label for="periodus">Periódus<span id="periodusHatarok"><br />(1, 2, 4, 6 hetenként)</span></label>
	<input type="text" name="periodus" id="periodus" value="1" />
	<div class="clear"></div>
  </div>
 
  <button name="elkuld" type="submit">Feliratkozás</button>
  <div class="clear"></div>
</form>

A CSS formázás

A formázás sem jelent túlnagy kihívást. Ahhoz, hogy a címkék egységesen jobbra legyenek igazodva mindössze annyit kell tenni, hogy megadni egy szélességet, amiben elfér a címke szövege, balra lebegtetni azt (float) és a szöveget jobbra igazítani a címkén belöl. A form elemeit balra kell float-olni és nem árt megadni egy fix szélsséget sem az elemeknek, bár ez nem kötelező.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#tesztUrlap {
  font: 10pt "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  line-height: 14pt;
  margin: 20px;
  width: 400px;
}
 
#tesztUrlap label {
  width: 150px;
  float: left;
  clear: left;
  text-align: right;
  margin: 13px 0;
}
 
#tesztUrlap input {
  width: 200px;
  height: 25px;
  border: 3px solid #9cf;
  float: left;
  clear: right;
  text-align: left;
  margin: 5px 0 5px 20px;
}
 
#tesztUrlap .checkbox {
  width: 20px;
}
 
#reklamlevelAdatok {
  clear: both;
  border: 1px solid #ccc;
}
 
#reklamlevelAdatok #periodusHatarok {
  color: #666;
  font-size: .9em;
}
 
#tesztUrlap button {
  float: right;
  margin-top: 20px;
  width: 150px;
  height: 35px;
}
 
.clear {
  clear: both;
  float: none;
  height: 0;
  overflow: hidden;
}

jQuery elemek

A különféle JavaScript trükkök is nagyot segíthetnek egy könnyen kezelhető űrlap készítésében. Két fontos dologra kell figyelni:

  1. A script ne elrontsa a felhasználói élményt, hanem javítson rajta
  2. A script támogatása nélkül is használható maradjon az űrlap

Egy nagyon jó társ a jQuery és a jQuery UI kiegészítő framework-ja. Olyan érdekességekkel egészíthetjük ki az űrlapot és tehetjük használhatóbbá, mint naptárak, slider-ek, űrlap részek dinamikus elrejtése és megjelenítése, felhasználó oldali űrlap ellenőrzés, stb.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*< ![CDATA[*/
jQuery(document).ready(function($){
  $('#periodikusReklam').
    attr('checked', false).
    bind('change',function(){
      $('#reklamlevelAdatok').toggle(500);
    });
  $('#periodus').
    after('<div id="periodusSlider">');
  $('#periodusSlider').
    slider({
      step: 1,
      min: 1,
      max: 6,
      animate: true,
      value: $('#periodus').val(),
      change: function(event,ui) {
        if (ui.value == 3) {
          ui.value = 4;
        } else if (ui.value == 5) {
          ui.value = 6;
        }
 
        $('#periodus').
          val(ui.value);
        $('#periodusSlider a').
          text(ui.value);
 
        $('#periodusSlider').slider('value', ui.value);
      }
    }).
    outerWidth($('#periodus').outerWidth()).
    offset($('#periodus').offset()).
    offset({top: $('#periodusSlider').offset().top + 10});
  $('#periodus').
    hide();
  $('#periodusSlider a').          
    css('text-align', 'center').
    css('text-decoration', 'none').
    text($('#periodus').val());
  $('#reklamlevelAdatok').
    toggle();
 
  $('#szuletesiDatum').
    val('').
    datepicker({
      constrainInput: true,
      maxDate: new Date()
    });
 
  $('#csaladnev').
    effect('highlight', 2000);
});
/*]]>*/


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Tényleg sokat dob rajta a JQuery, még nem használtunk soha ilyen scriptet, de nagyon meggyőző a látvány!

smink 2010. augusztus 26. - 17:26

Próbáld ki, meg fogsz lepődni mennyivel szebb és kezelhetőbb lesz majd az űrlapod!

Adam 2010. augusztus 31. - 19:59

Pont a napokban kerestem, hogyan lehet designolni ürlapot. Szerintem azért ebbe a minta ürlapba egy alap felhasználó oldali ellenőrzést bele lehetett volna azért még tenni, hogy még jobban lehesen szemléltetni.
Én ugy szoktam, legalább azt leellenőrzőm, hogy kivan e töltve az amit kikel, egy each funkcioval ellenőrzőm, hogy üresenmaradt-e az input és amit nem töltötek ki ott bepirositom az input szélét. Annyi, hogy ilyenkor nem submitot rakok hanem csak egy sima gombot és a javasript küldi el az ürlapot. Feltételezem senki se tiltja le a javasriptet és igy meni fog neki.

  $("#bekuld input:button").click(function(){
    HIBA = 0;
    $("input.kotelezo").each(function (){
       if($(this).val() == ""){
         $(this).css({"border-color":"#FF0066","border-width":"2px"});
         HIBA = 1;
       }else{
         $(this).css({"border-color":"","border-width":""});
       }
    });
    if(HIBA == 0){
      $("#bekuld form").submit();
    }
  });
AutóHifi 2010. október 26. - 10:53

Koszonjuk a kodreszletet 🙂 A leiras celja a formazas volt, de igazad van, ellenorizni is lehet. Erre tobb kiegeszito is van jQueryhez, ha osszetettebb dolgokat akarsz ellenorizni, pl. email cim validalas.

Avatar Tupacko
2010. október 26.
20:46

Köszönöm a tartalmas cikket!

AutóHifi által említett form ellenőrzésről is össze lehetne dobni egy kis leírást pl. legnépszerűbb jquery pluginok és szépen végighaladva rajtuk egy cikksorozat keretében.

KépHost 2010. november 2. - 11:19

Sziasztok :)))

Sajnos nagyon friss vagyok még Css es terén 🙂 Ezért kérnék egy kis segítséget ha nem baj 😀 :$

Azt szeretném megkérdezni, hogy maga a kódot a “jQuery” a phph ba teszem ahol van a form, vagy egy másik oldalba.

Előre is köszi 😛
Dual

Dual 2011. november 2. - 16:18

Udv az odalon!

Elso korben, a jQuery javascript keretrendszer, nem kell hozza CSS tudas. A JS kodot vagy script tagok koze illeszted az oldalban vagy egy kulso javascript allomanyba es betoltod az oldalba. Gyorstalpalo: http://www.w3schools.com/Js/js_howto.asp

Sok sikert!

Avatar Tupacko
2011. november 2.
20:02

Hú, ez elég bonyolultnak néz ki nekem, mivel nem vagyok programozó. Én az urlapkeszito.hu-t használom űrlap készítésére.

Gergő 2011. december 18. - 19:55

Látom elég új az oldal, szóval sok sikert hozza! 🙂

Avatar Tupacko
2011. december 18.
20:27

Én az ucoz.hu honlapszerkesztőt használom, abba van űrlapkészítő is, mindent belehet rajta állítani, programozói tudás nélkül.

Girl531 2011. december 21. - 15:43