[HTML] Formularz i link w jednym wierszu

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [HTML] Formularz i link w jednym wierszu

Post autor: Stig »

Zarówno element input jaki i a, są elementami liniowymi, co oznacza, że zachowując pierwotnie formatowanie, w przypadku gdy znajdują się obok siebie, zawsze wyświetlą się w jednej linii. Prawdopodobnie zmieniasz styl dla tych elementów lub gdzieś między nimi znajduje się element blokowy. W pierwszym przypadku należy każdemu elementowi nadać pierwotną wartość atrybutu display. Przykład:

Kod: Zaznacz cały

<input type="text" id="id1"style="display: inline;" /><input type="text" id="id2" style="display: inline;" /><a href="#" title="tytuł" style="display: inline;">nazwa</a>
W drugim przypadku można posłużyć się tzw. float positioning. Przykład:

Kod: Zaznacz cały

<fieldset style="display: left;"><input type="text" id="id1" /><input type="text" id="id2" /></fieldset><p style="display: left;"><a href="#" title="tytuł">nazwa</a></p><hr style="clear: both;" />
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [HTML] Formularz i link w jednym wierszu

Post autor: Stig »

Jeżeli nie używasz formatowania żadnego z tych trzech elementów (form, input, a) to wystarczy, że umieścisz hiperłącze za forumularzem. Przykład:

Kod: Zaznacz cały

<form method="post" action="xxx">' 
 <input type="text" name="username" /> 
 <input type="password" name="password" /> 
  <input type="submit" value="login" />' 
  <input type="hidden" name="p" value="xxx" />'
 </form>
 <a href="#" title="tytuł">nazwa</a>
W innym przypadku musisz postąpić analogicznie jak w przytoczonych przeze mnie przykładach. Np.

Kod: Zaznacz cały

<form method="post" action="xxx" style="display: inline">' 
 <input type="text" name="username" /> 
 <input type="password" name="password" /> 
  <input type="submit" value="login" />' 
  <input type="hidden" name="p" value="xxx" />'
 </form>
 <a href="#" title="tytuł" style="display: inline">nazwa</a>
lub:

Kod: Zaznacz cały

<form method="post" action="xxx" style="display: block; float: left">' 
 <input type="text" name="username" /> 
 <input type="password" name="password" /> 
  <input type="submit" value="login" />' 
  <input type="hidden" name="p" value="xxx" />'
 </form>
 <a href="#" title="tytuł" style="display: block; float: left">nazwa</a>
BTW, w przypadku tworzenia formularzy polecam używania elementów fieldset i label.
ODPOWIEDZ