| Autor | Zpráva | ||
|---|---|---|---|
| m Profil * |
#1 · Zasláno: 20. 1. 2011, 20:25:47
Ahoj, mam nasledujici formular a potreboval bych nejak zarovnat ty textove pole aby byly pod sebou a neprecnivali. Da se to nejak udelat pomoci CSS, nebo to musim narvat do tabulky?
<fieldset>
<legend>Nastavení</legend>
<form name="wan-nastaveni" method="post" action="/martin/index.php?akce=wan&zpracovano=ano">
<label onClick="onOff(document.getElementById('staticky-schovat'), 0)">DHCP
<input
type="radio"
name="protokol"
value="dhcp"
/>
</label>
<div class="odsaditShora"></div>
<label onClick="onOff(document.getElementById('staticky-schovat'), 1)">Staticky
<input
type="radio"
name="protokol"
value="static"
checked="checked" />
</label>
<div id="staticky-schovat">
<div class="odsaditZleva">
<label class="povinne">IP adresa
<input
type="text"
name="ipaddr"
value="192.168.1.7" />
</label>
<label class="povinne">Maska
<input
type="text"
name="netmask"
value="255.255.255.0" />
</label>
<label class="povinne">Brána
<input
type="text"
name="gateway"
value="192.168.1.1" />
</label>
<label class="povinne">1. DNS
<div class="nezalamovat">
<input
type="text"
name="dns1"
value="8.8.8.8" />
<div class="nepouzity">
<img src="img/nepouzivat.png" width="16" height="16" alt="Tyto DNS záznamy nebudou použity." />
Tyto DNS záznamy nebudou použity.</div> </div>
</label>
<label>2. DNS
<div class="nezalamovat">
<input
type="text"
name="dns2"
value="8.8.4.4" />
<div class="nepouzity">
<img src="img/nepouzivat.png" width="16" height="16" alt="Tyto DNS záznamy nebudou použity." />
Tyto DNS záznamy nebudou použity.</div> </div>
</label>
<label>Broadcast
<input
type="text"
name="broadcast"
disabled="disabled"
value="" />
</label>
</div>
</div>
<div class="odsaditShora"></div>
<label>Změnit MAC adresu
<input
type="checkbox"
name="mac-check"
checked="checked" onClick="zobrazit(document.getElementById('zmenit-mac-schovat'))" />
</label>
<div class="odsadit">
<input
type="text"
id="zmenit-mac-schovat"
name="mac"
value="a:b:c:d" />
</div>
<div class="odsaditShora"></div>
<label>Použít vlastní DNS
<input
type="checkbox"
name="vlastni-dns-check"
checked="checked" onClick="zobrazit(document.getElementById('vlastni-dns-schovat'))" />
</label>
<div class="odsadit" id="vlastni-dns-schovat">
<label class="povinne">1. DNS
<input
type="text"
name="dns1-vlastni"
value="8.8.8.8" />
</label>
<label>2. DNS
<input
type="text"
name="dns2-vlastni"
value="8.8.4.4" />
</label>
</div>
<input type="submit" value="Odeslat" />
<!-- <input type="reset" value="Smazat" /> -->
</form>
</fieldset> |
||
| Venca V Profil |
#2 · Zasláno: 20. 1. 2011, 20:27:09
Udělat pomocí CSS to jde, ovšem toto je případ, kdy je použití tabulky naprosto v pořádku.
|
||
| m Profil * |
#3 · Zasláno: 20. 1. 2011, 20:39:40
Venca V:
A muzes mi prosim poradit, jak to pomoci CSS udelat? Me se do ty tabulky moc nechce. |
||
| m Profil * |
#4 · Zasláno: 20. 1. 2011, 23:26:23
Uz jsem to nasel - http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
|
||
| m Profil * |
#5 · Zasláno: 21. 1. 2011, 10:41:21
Tak si s tim porad hraju a porad mi to nejde :-(
Mam nasledujici formular: 
#prihlasovaciFormular {
margin-top: 5em;
margin-left: auto;
margin-right: auto;
width: 11em;
padding: 1em;
font-size: 125%;
background-color: white;
}
#prihlasovaciFormular legend {
border-width: 1px;
border-style: solid;
padding: 0em 0.25em 0em 0.25em;
background-color: #ffc3c3;
}
#prihlasovaciFormular label input {
width: 10em;
float: right;
margin-right: 0.5em;
text-align: right;
display: block;
}
#prihlasovaciFormular .submit input {
margin-left: 4.5em;
}
#prihlasovaciStranka {
background-image: url("img/login-pozadi.png");
background-repeat: repeat-x;
}
<body id="prihlasovaciStranka">
<fieldset id="prihlasovaciFormular">
<legend>Přihlášení</legend>
<form method="post" action="<?php echo ($_SERVER["PHP_SELF"])?>">
<label>Jméno <input type="text" name="login" value="admin" disabled="disabled" /> </label>
<label>Heslo <input type="password" name="pass" /> </label>
<div class="submit">
<input type="submit" value="Odeslat" />
<input type="reset" value="Smazat" />
</div>
</form>
</fieldset>
</body>
Nemuzete mi nekdo poradit? Ja uz jsem vazne bezradnej :-( Melo by to vypadat nejak podobne: 
|
||
| Kolda Profil * |
#6 · Zasláno: 21. 1. 2011, 13:00:32
Doporucuji tabulky, jinak me jeste napada to narvat do divu, kterym nastavis pevnou sirku.
Dalsi moznost je, ze urcit labelum napevno odsazeni z leva, takze projde i pres text a nebude na textu zavisle... |
||
| xmark Profil |
#7 · Zasláno: 21. 1. 2011, 13:09:30
m:
Máš nějaký zvláštní důvod dávat inputy do labelů? |
||
| m Profil * |
#8 · Zasláno: 21. 1. 2011, 13:28:58
xmark:
Nevim. Myslel jsem, ze kdyz uzivatel klikne na ten popisek, tak se mu hned aktivuje vstupni pole. Vadi to necemu? |
||
| xmark Profil |
#9 · Zasláno: 21. 1. 2011, 13:38:43
m:
To sice nevím, nechce se mně zkoumat ty kilometry kódu, ale vzhledem k tomu, že se to snažíš pozicovat tak nějak vůči sobě, řekl bych že ano. http://www.jakpsatweb.cz/html/formulare.html#label |
||
| habendorf Profil |
#10 · Zasláno: 21. 1. 2011, 13:50:19
Input v labelu je zcela v pořádku, ale pro tuto situaci je lepší ho mít mimo label.
Pokud nechceš použít tabulku, tak label i input nafloatovat doleva se zadanou šířkou, labelu dát text-align:right a padding-right. Plus clearovat. |
||
| m Profil * |
#11 · Zasláno: 21. 1. 2011, 14:00:42
habendorf:
>>Input v labelu je zcela v pořádku, ale pro tuto situaci je lepší ho mít mimo label. Kdyz to jen trochu pujde, tak chci mit input v labelu. Tak jsem to zkusil, ale porad mi to nejde .Muzes se na to prosim podivat? |
||
| habendorf Profil |
#12 · Zasláno: 21. 1. 2011, 14:06:01
m:
Já jsem popisoval jak to udělat, je-li label před inputem (myšleno v kódu). Pokud trváš na inputu uvnitř labelu, byla by dobrá struktura třeba label span Jméno /span input /label a v mé větě label i input nafloatovat doleva se zadanou šířkou, labelu dát text-align:right a padding-right si namísto label dej ten span. |
||
| Medvídek Profil |
#13 · Zasláno: 21. 1. 2011, 14:11:29
m:
Kdyz to jen trochu pujde, tak chci mit input v labelu. Můžu se zeptat proč? :) |
||
| habendorf Profil |
#14 · Zasláno: 21. 1. 2011, 14:12:47
Medvídek:
Občas k tomu je dobrý důvod. Ale tenhle případ to není. |
||
| m Profil * |
#15 · Zasláno: 21. 1. 2011, 14:25:35
Medvídek:
Kdyz uzivatel klikne na ten popisek, tak se mu hned aktivuje vstupni pole. |
||
| habendorf Profil |
#16 · Zasláno: 21. 1. 2011, 14:29:08
m:
To se aktivuje i když input není uvnitř labelu. Je to svázáno atributy for a id. |
||
| m Profil * |
#17 · Zasláno: 21. 1. 2011, 14:49:51
habendorf:
A v cem je to lepsi/horsi, nez zanorit input do labelu? <fieldset id="prihlasovaciFormular">
<legend>Přihlášení</legend>
<form method="post" action="neco-nekde.php">
<label for="a">Jméno <input type="text" name="login" id="a" value="admin" /> </label>
<label for="b">Heslo <input type="password" id="b" name="pass" /> </label>
<div class="submit">
<input type="submit" value="Odeslat" />
<input type="reset" value="Smazat" />
</div>
</form>
</fieldset> |
||
| Venca V Profil |
#18 · Zasláno: 21. 1. 2011, 14:54:04 · Upravil/a: Venca V
m:
„A v cem je to lepsi/horsi, nez zanorit input do labelu?“ V tvém případě je to naprosto jasné - kdybys měl label zvlášť před inputem, stačí ti dát oběma prvkům float: left; labelu pevnou šířku a clear: left; a máš problém se zarovnáním vyřešen, jak ti psal už habendorf přede mnou... |
||
| m Profil * |
#19 · Zasláno: 21. 1. 2011, 15:03:37
Venca V:
Udelal jsem to tak, ale porad neni ten text na stejnym radku s tim polem. |
||
| xmark Profil |
#20 · Zasláno: 21. 1. 2011, 17:42:30
input už není v labelu, oprav si to v css:
#prihlasovaciFormular input { |
||
|
Časová prodleva: 13 let
|
|||
0