Jak wyrównać formularze wejściowe w HTML

Zaakceptowana odpowiedź (ustawianie jawnej szerokości w pikselach) utrudnia wprowadzanie zmian i łamie się, gdy użytkownicy używają innego rozmiaru czcionki. Korzystanie z tabel CSS, z drugiej strony, działa świetnie:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Oto JSFiddle: http://jsfiddle.net/DaS39/1/

I jeśli potrzebujesz etykiet wyrównanych do prawej, po prostu dodaj text-align: right do etykiet: http://jsfiddle.net/DaS39/

EDIT: jeszcze jedna szybka Uwaga: tabele CSS również pozwalają Graj kolumnami: na przykład, jeśli chcesz, aby pola wejściowe zajmowały jak najwięcej miejsca, możesz dodać następujące elementy w formularzu

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

Możesz dodać white-space: nowrap do labels w takim przypadku.

Prostym rozwiązaniem dla Ciebie, jeśli jesteś nowy w HTML, jest po prostu użycie tabeli do wyrównania wszystkiego.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

Znacznie łatwiej jest zmienić wyświetlanie etykiet na inline-block i ustawić szerokość

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

Powinieneś użyć tabeli. Ze względu na strukturę logiczną Dane są tabelaryczne: dlatego chcesz, aby były wyrównane, ponieważ chcesz pokazać, że etykiety nie są powiązane wyłącznie ze swoimi polami wejściowymi, ale także ze sobą, w strukturze dwuwymiarowej.

[zastanów się, co byś zrobił, gdybyś miał do wyświetlenia wartości łańcuchowe lub liczbowe zamiast pól wprowadzania.]

W tym celu wolę zachować poprawny semantyczny HTML i używać prostego CSS.

Coś takiego załatwiłoby sprawę:

label{
  display: block;
  float: left;
  width : 120px;    
}

Jedna wada : być może będziesz musiał wybrać odpowiednią szerokość etykiet dla każdego formularza, a nie jest to łatwe, jeśli etykiety mogą być dynamiczne (na przykład etykiety I18N).

Using css

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

To daje coś w stylu:

           label1 |input box             |
    another label |another input box     |

Dobrze dla samych podstaw można spróbować wyrównać je w tabeli. Jednak użycie tabeli jest złe dla układu, ponieważ tabela jest przeznaczona dla zawartości.

Możesz użyć technik CSS floating.

Kod CSS

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

Rozwinięty artykuł, który napisałem, można znaleźć odpowiadając na pytanie o problem IE7 float: IE7 float right problems

Wiem, że już na to odpowiedziałam, ale znalazłem nowy sposób, aby je ładnie wyrównać - z dodatkową korzyścią-patrz http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

Zasadniczo używasz elementu etykiety wokół wejścia i wyrównuj używając tego:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

I wtedy z css po prostu wyrównujesz:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

• nie potrzebujesz żadnych brudnych breloków do linebreaks - co oznacza, że możesz szybko wykonać układ wielokolumnowy dynamicznie
• cała linia jest zdolna do klikania. Szczególnie w przypadku pól wyboru jest to ogromna pomoc.
• dynamiczne wyświetlanie / ukrywanie linii formularza jest łatwe (wystarczy wyszukać dane wejściowe i ukryć ich rodzica -> Etykietę)
• możesz przypisać klasy do całej etykiety, dzięki czemu wyświetlanie błędów jest dużo wyraźniejsze (nie tylko wokół pola wprowadzania)

Tradycyjną metodą jest użycie tabeli.

Przykład:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

Jednak wielu twierdzi, że tabele ograniczają i preferują CSS. Zaletą korzystania z CSS jest to, że można używać różnych elementów. Z listy div, ordered i un-ordered można osiągnąć ten sam układ.

W końcu, będziesz chciał użyć tego, co Ci najbardziej odpowiada.

Wskazówka: tabele są łatwe do rozpoczęcia.

Jestem wielkim fanem używania list definicji.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

Są łatwe do stylizacji za pomocą CSS i unikają piętna używania tabel do układu.

Css, którego użyłem do rozwiązania tego problemu, podobny do Gjaa, ale stylizowany lepiej

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Oto mój HTML, używany specjalnie do prostego formularza rejestracyjnego bez kodu php

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

To bardzo proste, a ja dopiero zaczynam, ale działało całkiem ładnie

Wstaw znaczniki wejściowe wewnątrz list nieuporządkowanych.Zrób styl-wpisz none. Oto przykład.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

Zadziałało dla mnie !

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

W CSS musisz zadeklarować zarówno label jak i input jako display: inline-block i podać szerokość zgodnie z Twoimi wymaganiami. Mam nadzieję, że to ci pomoże. :)

Myślę, że byłoby łatwiej, gdybyś użył tabeli do struktury formularza. Może być wyczerpujące, ale nic "Kopiuj i wklej" z małą edycją nie może naprawić.

<form>
<table>
<tr>
<td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr>
<tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr>
<tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr>
</table>
</form>

Możesz dodać wyściółkę lub unosić zawartość komórki, aby wyglądała bardziej przestronnie.

Po prostu dodaj

<form align="center ></from>

Po prostu umieść wyrównanie w znaczniku otwierającym.