Vlákno názorů k článku České weby jsou uživatelsky příjemná bezpečnostní katastrofa od Franta - Ad "Našel jsem ale několik případů, kdy na...

Ad "Našel jsem ale několik případů, kdy na jinak moderních webech byly použity tabulky například k umístění vstupního políčka a tlačítka vedle sebe, toto by se na webech vyrobených během posledních pár let nemělo objevovat."

Zajímalo by mne, jak by autor řešil zarovnání prvků formuláře, aby vypadal takto:

...Jméno: __________
Příjmení: __________
...Ulice: __________

(místo teček patří mezery - zdejší redakční systém je ale neumí zobrazit)

V CSS na to mám hack, ale ten má určitá omezení (maximální celkovou šířku si člověk musí stanovit předem). Vysázet to pomocí tabulky je čistější a takovým omezením to netrpí. Otázka je pouze sémantika - dá se formulář považovat za tabulku? Nebo je to fuj fuj zastaralé řešení, které za které by se měl autor stydět? IMHO to tabulka je: 1. sloupec: název, 2. sloupec: hodnota, případně 3. sloupec: popis. Ale pokud někdo ví, jak stejného výsledku dosáhnout bez tabulky...

nejsem clovek, ktery dela casto frontend, ale hned me napada:

1) definition list: dt obsahuje label, dd input
2) ciste label, a vedle nej input - s tim, ze label bude mit stanovenou sirku a text vpravo

tabulky jsou od toho, aby se v nich prezentovaly data...

1) to by asi šlo, ale těžko tam dostanu třeba třetí sloupec s popisem

2) o tom jsem právě psal, že je to omezené -- předem si stanovím šířku, do které se musím vejít -- zatímco tabulka se přizpůsobí obsahu

Ad "tabulky jsou od toho, aby se v nich prezentovaly data..."

A tohle nejsou data? V prvním sloupci názvy, v druhém hodnoty. Data lze upravovat na místě...

Já například používám následující strukturu prvku formuláře. Každý řádek má tři části - titulek, vlastní formulářový prvek a prostor pro dodatečné popisky (obvykle meze). Celá struktura může mít pevnou velikost, nebo se přizpůsobovat okolí a i bez CSS to vypadá rozumě. Obdobně jde zavést i styl pro elementy pro výběr (checkbox nebo radio).

HTML:
<div class="form_item">
<label class="form_label" for="col">Titu­lek</label>
<input class="text_box" type="text" name="col" />
<div class="info">další info</div>
</div>

CSS:
div.form_item {
width: 100%; clear: both;
position: relative;
}
label.form_label {
display: block; float: left; width: 29%;
text-align: right;
}
input.text_box {
width: 40%; margin: 0% 1%;
}
div.info {
float: right; width: 29%;
text-align: left;
}