Jedním z běžných problémů, se kterým se potkávám, je zobrazený dat v tabulkové formě. Například z databáze. Každý řáádek tabulky reprezentuje jeden řádek v databázové tabulce.

V kódu zobrazíme tabulku podle vzoru:

<form>
  <table>
    <caption></caption>
    <thead>
      <tr>…</tr>
    </thead>
    <tfoot>
      <tr>…</tr>
    </tfoot>
    <tbody>
      <tr>…</tr>
    </tbody>
    </table>
</form>

Část textu tabulky bude zakoódována přímo v programu, ale části, zejména ta s daty v tělě, budeme určitě vytvářet programově. Myšlenka práce s tabulkou je taková, že v tabulce rozmístníme vstupní pole a tlačítka, podlo toho co chcem uživateli nabídnout za akce. Většinou to dělám tak, že poslední, úplně pravý, sloupec vyhradím pro příkazy a dávám do něj tlačítka pro jednotlivé akce které se týkají řádku tabulky. Na konec tabulky, ve vzoru je to část <tfoot>, vložím pole pro zadávání hodnoty a v poslední buňce, která je vlastně ve sloupečku pro příkazy dám tlačítko „Zapsat“. Tolik tedy na úvod a nyní se začneme zabývat jednotlivými částmi.

První věc je samotný formulář. Jak je vidět na ukázce, tabulka je ve formuláři celá, a všechny prvky které budeme dávat do tabulky budou tedy v jednom formuláři. Formulář může obsahovat ve svém otevíracím tagu několik atributů. Zmíním zde jen url a method. Attribut url obsahuje adresu na kterou se data z formuláře odešlou při stisknutí odesílacího, nebo některého z více odesílacích tlačítek. Pokud nebude vyplněn, odešlou se data na tu samou stránku ve které je formulář. Z našeho pohledu to znamená že data z formuláře bude zpracovávat ta samá .kl1 stránka. Atribut method pak určuje jakým způsobem se budou data odesílat. V mém případě jsem použil tuto kombinaci:

<form method="post">
    …
</form>

Tedy data fe formuláři se pošlou ke zpracování té samé stránce (.kl1), která formulář zobrazuje a k odeslání se použije metoda POST.

Dále do formuláře/tabulky rozmístníme jednotlivá pole. Uvedu jako příklad pole v posledním řádku tabulky pro zadání hodnot k vytvoření nového řádku.

<tfoot><tr>
    <td><input type="text" id="dny" size="3" maxlength="3" /></td>
    <td><input type="text" id="limit" size="3" maxlength="3" /></td>
    <td><button name="tlacitko" value="new">Zapsat</button></td>
</tr></tfoot>

V této ukázce jsou dve políčka pro zadání hodnoty a ve sloupci s příkazy je tlačítko jenž má nápis „Zapsat“. Políčka jsou vytvářena html tagem <input type="text"> a můžeme a zajisté vaužijeme také ostatních variant tagu input které nám HTML nabízí. Můžeme také použít tag select pro vytvoření komboboxu s výběrem hondot. Zvláštností je odesílací tlačítko které generuji, v tomto případě možná zbytečne, tagem <button>. Běžne se používá kód

<td><input type="submit" value="Zapsat" /></td>

V tomto případě si mohu vybrat, který způsob použiji. V příkazových tlačítcích jenž jsou na každém řádku ovšem jde použít jen varianta s tagem <button>.

A co že je tedy v těch řádcích, tam generuji html kód jako tento:

<td>
  <button name="remove" value="klíč-řádku">Odstranit</button>
  <button name="edit"   value="klíč-řádku">Upravit</button>
</td>

Klíč-řádku je hodnota, která jednoznačně identifikuje data na řádku. Může to být například id pole z databáze, nebo jen číslo řádku tabulky. Atribut name pak identifikuje operaci kterou s daným řádkem chceme provést. Tím máme popsána vstupní pole formuláře a tlačítka, a zbývá nám zajistit zpracování dat z odeslaného formuláře.

if (request_get_arg(request, "new")) {
    …  Uživatel stiskl tlačítko „Zapsat“ na poslendím řádku tabulky.
    …  Vybereme tedy z request pole dny a limit a zapíšeme například do databáze.
} else if (key=request_get_arg(request, "remove")) {
    …  Uživatel stisk tlačítko odstranit na řádku s daty jehož identifikace je v key.
    …  Odstraníme tento řádek z databáze.
} else if (key=request_get_arg(request, "edit")) {
    …  Uživatel stisk tlačítko „edit“ na řádku s daty jehož identifikace je v key.
    …  Zajistíme tedy zobrazení formuláře s daty jednoho řádku.
}