Autor Zpráva
petey
Profil
Ahoj, nevíte někdo jak ve formuláři formátovaného do Fieldset požít <label for="neco">Něco</label> pro několik výpisů <input type="radio" id="neco">. Při validaci mi samozřejmě hlásí duplicitu Labelu pro stejné ID.
Nějaký návrh jak na to?
margin
Profil *
Nevím, čeho chceš dosáhnout, nechápu, k čemu potřebuješ několik stejných ID a spojitost s HTML 5 taky nechápu. Mám tušení, že buď nevíš, jak se používá label, nebo že si pleteš u radiobutonů id s name.
petey
Profil
Tak tedy konkrétně. Mám stránky psané v HTML5, což je jen informativní, nemělo by to mít vliv na věc, se kterou potřebuji poradit.
Ve stránce mám například takový kód obalen do <form>, jehož hodnoty odesílám PHPkem na server:
<fieldset>
<legend>Vyhledej:</legend>
  <label for="jmeno">Jméno:</label>
   <input name="jmeno" id="jmeno" type="text" /><br>
  <label for="prijmeni">Příjmení:</label>
   <input name="prijmeni" id="prijmeni" type="text" /><br>
  <label for ="sex">Pohlaví:</label>
   <input type="radio" name="sex" id="sex" value="1">Muž</input>
   <input type="radio" name="sex" id="sex" value="2">Žena</input>
  <label for="kraj">Kraj:</label>
   <select name="kraj" id="kraj" >
    <option value="1">voba1</option>
    <option value="2">voba2</option>
   </select><br>
</fieldset>

Textový input i select je jednořádkový a nedělá problém. Ovšem přepínač "radio" pokud nemá před každou hodnotou vlastní <label for="">, tak se nevyrovná pod první přepínač. Pokud použiju <label for=""> se stejným "id", tak stránka nebude validní a bude logicky hlásit duplicitu.

Jak tedy dosáhnout zarovnání přepínačů pod sebe?
Plaváček
Profil
petey:

Edit: Strawberry odpověděl lépe, nejsem ve formě.

Přepínače pod sobe dostaneš třeba použitím BR.
Str4wberry
Profil
1) Atribut for není pro <label> povinný. U „Pohlaví:“ by bylo tedy vhodné jej neuvádět, vynechat celou značku, případně ho namířit na jednu z voleb <input type=radio>.
2) Text vztahující se k <input type=radio> je pro pohodlné použití vhodné o<label>ovat, tedy:
 <label>Pohlaví:</label>
   <label for=muz><input type="radio" name="sex" id="muz" value="1">Muž</label>
   <label for=zena><input type="radio" name="sex" id="zena" value="2">Žena</label>
3) Nemá smysl zkoušet něco jako <input>Text</input>.
panther
Profil
petey:
ve Str4wberryho bodu 2) je zbytečné atribut for a id uvádět. Celý kód bude stejně dobře fungovat i bez nich.
<label>Pohlaví:</label>
   <label><input type="radio" name="sex" value="1">Muž</label>
   <label><input type="radio" name="sex" value="2">Žena</label>
Str4wberry
Profil
Celý kód bude stejně dobře fungovat i bez nich.

… akorát od Exploreru 7. :–)
petey
Profil
Str4wberry:
1) ad1) Pravda, <label for=""> používám dle toho jak jsem se to naučil a nekoukal, zda je atribut "for" nutný. Zbytečná věc, možná je k přehledosti, nebo při použití společně s atributem form="" při zápisu mimo.
ad2) pokud použiju <label for=""> na jeden z inputů, tak se mi stejně jako v případě použití tagu <br>, jak píše Plaváček dostane každý další přepínač nikoliv pod ten na prvním řádku, ale pod název štítku (<label>)
2) dobrý tip, snažší zápis, začnu používat! :-) Nicméně to pořád neřeší řazení radio buttonů pod sebe, jak jsem už vysvětlil o řádek výš. :-(

Jinak tenhle tip validitu vyřeší, vzhledu jako u nevalidního kódu ale pořád nedocílím :-(
Str4wberry
Profil
Vzhled závisí na tom, co máte v CSS, to my nevidíme, tedy netušíme, jak to má vypadat. :–) Nejlepší by byla živá ukázka.
petey
Profil
Str4wberry:
Právě že <label> mi zajišťuje ten odskok. :-( Proto jsem se ho snažil použít před každým inputem.
Zatím mohu nabídnout jen CSS, ukázku zpracuji až doma a dodám.

fieldset {
    width:600px;
    border:1px solid #3079ED;
    padding:5px;
    margin:0 auto;
}
legend {
    text-decoration:bold;
    text-transform:uppercase;
    color:#1e90ff;
    padding:10px;
}
label {
    min-width:150px;
    padding:10px 15px;
    color:black;
    text-align:left;
    vertical-align:middle;
    display:inline-block;
}
Str4wberry
Profil
Když se na to tak dívám, tak asi bude nejlepší použít tabulku. Třeba takto.
petey
Profil
Str4wberry:
Super stránka na odkazu pro živé ukázky! :-)

Já se chtěl právě tabulce vyhnout. Škoda, že <label> nemá atribut class, dal by se tam dát padding-left. Tak jedině mě napadá trochu záplatové řešení vložit prázdný prvek s pevnou šířkou, aby tvořil odskok na každém řádku od druhého dál.
jenikkozak
Profil
petey:
Proč ses chtěl vyhnout tabulce? Když <label> nemá atribut class, proč ho tam nepřidáš?
margin
Profil *
petey:
Škoda, že <label> nemá atribut class, dal by se tam dát padding-left.
To, že ti u labelu nefunguje padding-left, má jinou, obecnější příčinu, není to nic výjimečného.
Str4wberry
Profil
Proč se chcete tabulce vyhnout? Přijde mi to lepší než se defekovat s vytvářením tabulky pomocí CSS a cpát tam nějaké placeholdery. :–)
petey
Profil
Str4wberry:
Tabulce jsem se chtěl vyhnout jen z toho důvodu, že když lze "snadno" použít <label> k <input>, nemusím si stylovat tabulku a obalovat prvky řádkama a sloupkama. Nicméně po těchto peripetiích uznávám, že "stará dobrá" tabulka by ve výsledku sebrala míň času k řešení. Ale tak dokud to člověk nezkusí, neví... :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: