Jak wyrównać formularze wejściowe w HTML

117

Jestem nowy w HTML i próbuję nauczyć się korzystać z formularzy.

Największym problemem, jaki mam do tej pory, jest wyrównanie formularzy. Oto przykład mojego obecnego pliku HTML:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

Problem polega na tym, że pole po `` E-mailu '' różni się znacznie pod względem odstępów w porównaniu z imieniem i nazwiskiem. Jaki jest „właściwy” sposób, aby to zrobić, aby zasadniczo „ustawili się w składzie”?

Próbuję ćwiczyć dobrą formę i składnię ... wiele osób mogłoby to zrobić za pomocą CSS Nie jestem pewien, jak dotąd nauczyłem się tylko podstaw HTML.

html forms alignment

— yoshyosh
źródło

toczy się nieustanna walka między tabelami (jeśli w ogóle), odpowiedzi na twoje pytanie nie są wyjątkiem, środkowy punkt jest taki, że <tables> dotyczy danych tabelarycznych, więcej tutaj: stackoverflow.com/questions/83073 /…

— Trufa

Dokładnie to samo pytanie, ale odpowiedź sugeruje użycie tagu <table> z cytatem z W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Inny przykład, to używa CSS, po prostu umieściłem formularz w div z klasą kontenera. I określono, że zawarte w nim elementy wejściowe mają stanowić 100% szerokości kontenera i nie mają żadnych elementów po obu stronach.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

Rozwiń fragment

— serialk
źródło

2

Doskonale, po prostu zaoszczędził mi wiele kłopotów.

— zerowy

To także rozszerza mój przycisk „Prześlij” do szerokości kontenera.

— Saurabh Rana

4

Wydaje się, że to rozwiązanie nie działa. Elementy wejściowe nie są wyrównane do lewej. Poniższe rozwiązanie tabeli działa.

— johny why

1

Nie jestem wielkim fanem ustawiania wyraźnej szerokości, kiedy można się bez niej obejść (patrz moja odpowiedź poniżej)

— Clément

1

Daje to dziwne wyniki w przypadku przycisków opcji. Etykieta przycisku opcji pokazuje wiersz po faktycznym przycisku opcji.

— wskazówek

134

Zaakceptowana odpowiedź (ustawienie wyraźnej szerokości w pikselach) utrudnia wprowadzanie zmian i przerywa, gdy użytkownicy używają innego rozmiaru czcionki. Z drugiej strony korzystanie z tabel CSS 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>

Rozwiń fragment

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

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

EDYCJA: Jeszcze jedna krótka uwaga: tabele CSS pozwalają również bawić się kolumnami: na przykład, jeśli chcesz, aby pola wejściowe zajmowały jak najwięcej miejsca, możesz dodać do formularza

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

możesz chcieć dodać white-space: nowrapdo labelsw takim przypadku.

— Łaskawy
źródło

4

Podoba mi się to rozwiązanie. Oznacza to, że nie muszę się martwić, że moje kolumny nieuchronnie zmieniają szerokość, gdy strona ewoluuje w miarę rozwoju. +1

— Tom Lord

9

@MuhammadUmer Ponieważ tabele wprowadzają w błąd czytniki ekranu i wiele urządzeń pomocniczych, podczas gdy tabele CSS oddzielają prezentację i zawartość. Dzięki temu Twój formularz jest łatwy do przeanalizowania przez czytnik ekranu lub asystenta czytania, a mimo to ładnie się wyświetla.

— Clément,

3

Cóż, pasująca etykieta w td sugeruje, że jest to część zorganizowanych, tabelarycznych danych, takich jak wykresy; tak nie jest w tym przypadku. Ponadto korzystanie z tabel HTML utrudnia zmianę układu w przyszłości lub dostosowanie go do różnych rozmiarów ekranu (pomyśl o telefonach komórkowych i tabletach).

— Clément

4

Do dziś mocno opierałem się strukturze tabeli CSS za pomocą tego samego argumentu, który przedstawiał @MuhammadUmer! Zawaliłem się i postanowiłem spróbować i wreszcie dostrzegłem wartość zmiany! Plus, jego CSS, więc na dłuższą metę ułatwia to

— BillyNair

2

Jak możesz połączyć kolumny za pomocą tego rozwiązania? W celu wyśrodkowania wyrównaj przycisk wysyłania.

— eugenekr

31

Prostym rozwiązaniem dla Ciebie, jeśli jesteś nowy w HTML, jest użycie tabeli, aby wszystko wyrównać.

<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>

— amonett
źródło

43

Szybkie i proste rozwiązanie. Zostaw religijne debaty CSS na przerwę obiadową i wykonaj swoje zadanie.

— Emmanuel Bourg,

3

@ClarkeyBoy - kogo to obchodzi, dopóki wykonuje swoje zadanie.

— SolidSnake

1

@ClarkeyBoy - najbardziej ignorancki komentarz? lol .. Nie chcę się kłócić z tobą tutaj .. jeśli chcesz to zrobić, zrób to jak divy. jeśli chcesz to zrobić, wszystko zależy od ciebie. ale nie zakładaj, że wszyscy klienci lub ludzie będą to obchodzić. większość z nich dba o wykonanie swojej pracy ..

— SolidSnake

2

@ClarkeyBoy - Przeczytaj tę odpowiedź i post z W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: Czy nie do tego właśnie służą tabele CSS? Uzyskanie układu przypominającego tabelę bez mylących czytników ekranu? Układ, o który prosi OP, jest w rzeczywistości dość łatwy do osiągnięcia za pomocą tabel CSS (patrz poniżej )

— Clément

17

O wiele łatwiej jest mi zmienić sposób wyświetlania etykiet na inline-block i ustawić szerokość

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

— Byron
źródło

9

Powinieneś użyć stołu. 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 z ich polami wejściowymi, ale także ze sobą nawzajem w strukturze dwuwymiarowej.

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

— Collin Street
źródło

2

Doceniam twoje podejście.

— Jono

2

W tym celu wolę zachować poprawną semantykę HTML i używać prostego CSS, jak to tylko możliwe.

Coś takiego załatwiłoby sprawę:

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

Jednak jedna wada: może być konieczne wybranie odpowiedniej szerokości etykiety dla każdego formularza, a nie jest to łatwe, jeśli etykiety mogą być dynamiczne (na przykład etykiety I18N).

— Samuel EUSTACHI
źródło

1

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.

— Andrzej
źródło

Jest to równie łatwe do wykonania za pomocą divs (a ddma tylko lewy margines ~ 40 pikseli) i pozwala uniknąć jakichkolwiek pomyłek semantycznych. Poza tym żadne z nich nie ustawia etykiet / wejść w tym samym wierszu.

— Hollister,

1

za pomocą css

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

to daje coś takiego:

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

— Gjaa
źródło

Musisz także użyć, clearaby uniknąć gromadzenia się formularzy, powiedzmy, mniejszych szerokości

— TheMaster

0

Tradycyjną metodą jest użycie stołu.

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 wolą CSS. Zaletą korzystania z CSS jest to, że możesz używać różnych elementów. Z div, uporządkowanej i nieuporządkowanej listy, można uzyskać ten sam układ.

W końcu będziesz chciał użyć tego, w czym czujesz się najlepiej.

Wskazówka: rozpoczęcie pracy z tabelami jest łatwe.

— OV Web Solutions
źródło

1

+1 za stwierdzenie, że są łatwe do rozpoczęcia ... ale tak naprawdę programiści powinni tylko uciekać się do tabel danych (zobacz mój komentarz do innej odpowiedzi, aby uzyskać pełną

— listę

1

Korzystanie z tabel CSS jest równie łatwe i nie wiąże się z nimi problem z dostępnością. Zobacz moją odpowiedź poniżej.

— Clément

0

Cóż, jeśli chodzi o podstawy, możesz spróbować wyrównać je w tabeli. Jednak użycie tabeli jest złe dla układu, ponieważ tabela jest przeznaczona dla zawartości.

To, czego możesz użyć, to techniki pływające CSS.

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>

Szczegółowy artykuł, który napisałem, można znaleźć w odpowiedzi na pytanie o problem z floatem w IE7: problemy z floatem w IE7

— Mauris
źródło

dziękuję za przykłady, jednak formularz HTML nadal nie rozwiązuje problemu. Jeśli zmienisz

— ``

Pracowałem z tym od projektantów i jest to trochę kruche, IME. W przypadku tego podstawowego układu będzie dobrze w 98% przypadków. Spróbuj uzyskać zbyt skomplikowany układ, np. Dwukolumnowy układ lub etykiety wieloliniowe, a staje się to trudne.

— staticsan

1

@staticsan - jeśli rozumiesz elementy zmiennoprzecinkowe, czyści i elementy div, będziesz dobrze pracować z takim układem i faktycznie renderują się szybciej i są bardziej elastyczne w porównaniu do tabel w nowoczesnych przeglądarkach.

— Mauris

Cóż, myślałem, że rozumiem elementy float, clear i div, ale nie mogłem przedłużyć otrzymanej formy bez jej zerwania. Niezależnie od tego, czy była to wada w moim zrozumieniu, czy implementacja projektanta, fakt pozostawał kruchy. (Co ciekawe, następna wersja będzie bardziej hybrydowa z użyciem ultagów.)

— staticsan

0

Wiem, że na to już udzielono odpowiedzi, ale znalazłem nowy sposób ich ładnego dopasowania - z dodatkową korzyścią - patrz http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

w zasadzie używasz elementu label dookoła wejścia i wyrównaj używając tego:

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

a następnie za pomocą css po prostu wyrównaj:

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 żadnego bałaganu leżącego w pobliżu dla łamania linii - co oznacza, że możesz szybko uzyskać dynamiczny układ wielokolumnowy
cała linia jest klikalna. Szczególnie w przypadku pól wyboru jest to ogromna pomoc.
Dynamiczne pokazywanie / ukrywanie linii formularza jest łatwe (po prostu wyszukujesz dane wejściowe i ukrywasz ich rodzica -> etykietę)
możesz przypisać klasy do całej etykiety, dzięki czemu będzie znacznie wyraźniej pokazywać błędy (nie tylko wokół pola wejściowego)

— Niko
źródło

Ładnie, ale potrzebuję stałej szerokości etykiety. Tekst dużej etykiety zastępuje dane wejściowe.

— mauretto

0

Odpowiedź Clémenta jest zdecydowanie najlepsza. Oto nieco poprawiona odpowiedź, pokazująca różne możliwe wyrównania, w tym przyciski wyrównane do lewej, środkowej i prawej:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Rozwiń fragment

Dodałem trochę dopełnienia po prawej stronie wszystkich etykiet ( padding-right:8px), aby przykład był nieco mniej okropny, ale w prawdziwym projekcie należy to zrobić ostrożniej (dodanie dopełnienia do wszystkich innych elementów również byłoby dobrym pomysłem).

— Cyberknight
źródło

-1

css Kiedyś rozwiązałem ten problem, podobnie jak w Gjaa, ale lepiej wystylizowany

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

Oto mój kod 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 i dopiero zaczynam, ale zadziałało całkiem nieźle

— PA_Commons
źródło

-1

Wstaw znaczniki wejściowe wewnątrz nieuporządkowanej listy. Oto przykład.

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

Pracował dla mnie!

— Vivek Iyer
źródło

To nigdy by się nie udało. ULpo prostu odciąłby treść od marginesu, a niczego nie wyrównywała. Wstawienie inputs LIspowodowałoby po prostu dodanie przed nimi punktora (tak, byłyby wyrównane jako lista, a nie względem etykiet). Ponadto „Input2” przylgnęłoby do poprzedniego inputelementu, ponieważ LInie są zamknięte (nie ma </li>) i nie ma początku <li>dla tej „etykiety”, więc zostanie potraktowane tak, jak powinno, więc wspólny tekst, połączony z poprzedni element. Na koniec kod zawiera błąd, <ul/>powinno to być zamknięcie </ul>.

— Cyberknight

-2

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

W CSS musisz zadeklarować zarówno etykietę, jak i dane wejściowe jako display: inline-block i podać szerokość zgodnie z własnymi wymaganiami. Mam nadzieję, że to ci pomoże. :)

— kta
źródło

-4

Po prostu dodaj

<form align="center ></from>

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

— Zak Gill
źródło

To nie zadziała, ponieważ formnie ma alignatrybutu (a nawet gdyby miał, zostałoby wycofane z użycia stylu / CSS). Ponadto tag zamykający jest nieprawidłowy, a powinien </form>. style="text-align:center"Wewnątrz można zdefiniować form, co wyrównałoby całą zawartość formularza w centrum, ale nie o to chodziło w pierwotnym pytaniu. To nigdy nie wyrówna etykiet z ich polami wejściowymi (tak, testowałem na Firefoksie 75, dla pewności).

— Cyberknight