Autor | Zpráva | ||
---|---|---|---|
petey Profil |
#1 · Zasláno: 2. 1. 2013, 23:18:49
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 * |
#2 · Zasláno: 3. 1. 2013, 00:09:09
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 |
#5 · Zasláno: 4. 1. 2013, 16:20:33
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> <input>Text</input> .
|
||
panther Profil |
#6 · Zasláno: 4. 1. 2013, 16:40:41
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 |
#7 · Zasláno: 4. 1. 2013, 17:11:21
„Celý kód bude stejně dobře fungovat i bez nich.“
… akorát až 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 |
#9 · Zasláno: 4. 1. 2013, 19:46:37
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 input em.
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 |
#11 · Zasláno: 4. 1. 2013, 20:20:57
|
||
petey Profil |
#12 · Zasláno: 5. 1. 2013, 17:49:24
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 |
#13 · Zasláno: 5. 1. 2013, 17:59:22
petey:
Proč ses chtěl vyhnout tabulce? Když <label> nemá atribut class , proč ho tam nepřidáš?
|
||
margin Profil * |
#14 · Zasláno: 5. 1. 2013, 18:10:51
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 |
#15 · Zasláno: 5. 1. 2013, 18:17:48
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. :–)
|
||
Časová prodleva: 18 dní
|
|||
petey Profil |
#16 · Zasláno: 23. 1. 2013, 16:39:11
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í... :-)
|
||
Časová prodleva: 11 let
|
0