site logo

Webový formulář typu 1

V zásadě používám dva typy formulářů. První typ, vhodný pro rozsáhlejší formuláře, obvykle na samostatné stránce, někdy doplněný o krátkou nápovědu. Ukázka prvního typu formuláře pochází z aplikace laboratoř. Současně si ukážeme použití indexů pro chemické termíny, to se na webu příliš často nevyskytuje.

Druhý typ formuláře, kde na stránce je zobrazena celá databázová tabulka (typicky číselník), a formulář je otevřen jen pro jeden právě editovaný řádek, je popsán v následujícím článku.

alkalita [%]
K2CO3 [%]
Na2CO3 [%]
Na2O [%]
K2O [%]
KCl [%]
Cl- [%]
suma S [%]
Fe2O3 [%]
označení:
evidenční číslo vzorku:
datum odběru vzorku:
poznámka:

Hned v úvodu sekce CSS se dopustím hrubého přestupku proti přístupnosti a použitelnosti webu a zvolím fixní velikost písma. Formulářové prvky nedědí typ písma, proto musí být uvedeny v seznamu aby typ písma byl jednotný pro tabulku i pro formulář. Defaultní zobrazení indexů v jednotlivých browserech se docela liší, proto jsou přepsány zejména s ohledem na jednotnou výšku řádku. Přesto IE zobrazuje jinou velikost fontu než ostatní prohlížeče.

Zvolíme fixní layout tabulky a stanovíme jednotnou výšku řádku na 18 pixelů. Buňky th budeme používat pro nadpisy, buňky td jsou určeny pro formulářové prvky. Aby názvy i formulářová data nebyly přilepeny na okraj nastavíme buňkám tabulky padding: 0 4px;. Pro prvky texarea a select budeme muset padding ještě dále upravit.


<style type="text/css">

table, input, select, textarea {font: normal 13px Arial, SansSerif, Verdana;}
sub, sup {font: normal 10px Arial, SansSerif, Verdana;}
sub {vertical-align: baseline; position: relative; bottom: -3px;}
sup {vertical-align: text-top; position: relative; bottom: 3px;}

table {table-layout: fixed;}
th, td {height: 18px; margin: 0; border: 0; padding: 0 4px; color: black;}
th {background: #f0f0f0; font-weight: normal; text-align: left; }

/* ---- form ---- */
form {width: 546px; margin: 8px 0; border: 1px solid #aaa;
      padding: 0 16px 4px 16px; background: #ccc;}
.inp, .iL, .iR, .iA {background: #ffa;}
.iL, .iR {width: 100%; margin: 0; border: 0; padding: 0 1px 0 0;
          background: #ffa; float: left;}
.iL {text-align: left;}
.iR {text-align: right;}
.iA {width: 100%; height: 75px; margin: 0; border: 0; padding: 0;
     overflow: auto; float: left;}

.selectBox {width: 268px; height: 18px; margin: 0; border: 0; padding: 0;
            position: relative; overflow: hidden;}
.selectInp {width: 272px; height: 22px; top: -2px; left: -2px;
            position: absolute; background: #ffa;}

</style>

Layout formuláře

Základ formuláře je plocha vyhrazená elementem form se šedým pozadím, podobně jsou vytvořeny téměř všechny formuláře na intranetu. Do formuláře je vložena tabulka s pevnou šířkou. V našem ukázkovém příkladu jsou uvnitř formuláře tabulky dvě. Jedna "plave" vlevo a zobrazuje specifickou část formuláře pro zvolený typ protokolu (několik desítek typů), druhá, společná část formuláře "plave" vpravo a obsahuje data hlavičky.

Formulářové prvky jsou umístěny dovnitř políček tabulky se stylem <td class="inp">. Třídy .inp, .iL, a .iR mají nastavenu stejnou barvu pozadí a opticky splývají. Formulářové prvky mají nastavenu šířku na 100% a tedy zaberou celou šířku, kterou dostanou k dispozici od tabulky, v tomto případě od <td class="inp">. Tabulka proto musí mít pevný layout a v prvním řádku tabulky musíme definovat šířky jednotlivých sloupců.

Ideální řešení by byl CSS reset formulářových prvků, tedy nastavit margin, border, padding na nulu. Nulový padding bohužel způsobí mizení textového kurzoru na pravé straně textového prvku v browseru IE a Opera. Proto musíme nastavit padding: 0 1px 0 0;.

Ohraničení formuláře

Zatímco rámečky okolo tabulkových dat závisí na vkusu tvůrce, ohraničení formulářových políček je téměř povinné. Rámečky v tomto typu formuláře jsou vytvořeny pomocí kombinace několika vlastností: odstranění původních rámečků formulářových prvků, tmavší pozadí formuláře (tabulky), světlé pozadí buněk tabulky (světlá šedá, žlutá) a atributu tabulky cellspacing="1px". Výsledné jednotné rámečky formuláře šířky 1px jsou vlastně mezery mezi buňkami tabulky.


<body>
...
<form method="get" action="#" onsubmit="return checkForm(this);">

<table cellpadding="0" cellspacing="1px" border="0"
 style="float: left; width: 220px;">
<tr>
<td style="width:120px;"></td>
<td style="width: 60px;"></td>
<td style="width:    *;"></td>
</tr>

<tr>
<th>alkalita</th>
<td class="inp"><input type='text' class="iR" name="C1" value="98,1" /></td>
<td>%</td>
</tr>
...
</table">

<table cellpadding="0" cellspacing="1px" border="0"
 style="float: right; width: 270px;">
...
</table">

</form>

Ukázka velmi zkráceného HTML kódu naznačuje konstrukci formuláře. Na plochu formuláře jsou položeny dvě tabulky. Vytvoření "rámečků" pomocí cellspacing je označeno červeně. První řádek tabulky je prázdný řádek fixující rozložení sloupců. Skutečný formulář začíná až na dalších řádcích.

updated 18.12.2007