Як вирівняти форми введення в HTML

117

Я новачок у HTML, і я намагаюся навчитися використовувати форми.

Найбільша проблема, яку я маю досі, - це узгодження форм. Ось приклад мого поточного файлу 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>

Проблема в цьому полягає в тому, що поле поля після "Електронної пошти" кардинально відрізняється з точки зору пробілу порівняно з іменем та прізвищем. Який "правильний" спосіб зробити так, щоб вони по суті були "складені"?

Я намагаюся практикувати гарну форму та синтаксис ... багато людей можуть це зробити з CSS. Я не впевнений, я до цих пір засвоїв лише основи HTML.

html forms alignment

— йошіош
джерело

між ними постійно виникає сутичка, коли таблиці (якщо вони взагалі є), відповіді на ваше запитання - це не виняток, середній шов - це те, що <таблиці> для табличних даних, більше тут: stackoverflow.com/questions/83073 /…

— Труфа

Точно таке ж питання , але відповідь передбачає використання <table> тег з цитування W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Інший приклад, для цього використовується CSS, я просто поміщаю форму в діву з класом контейнерів. І вказано, що вхідні елементи, що містяться всередині, повинні становити 100% від ширини контейнера і не мати елементів з обох боків.

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

Розгорніть фрагмент

— серіал
джерело

2

Ідеально, просто врятувало мене багато возитися.

— null

Це також розширює мою кнопку "подати" на ширину контейнера.

— Саурабх Рана

4

Це рішення, схоже, не працює. Вхідні елементи не вирівнюються ліворуч. Табличне рішення нижче працює.

— Джоні, чому

1

Я не є великим прихильником встановлення явної ширини, коли ви можете обійтися без одного (див. Мою відповідь нижче)

— Clément

1

Це дає дивні результати за допомогою перемикачів. Мітка перемикача відображає рядок після фактичної перемикача.

— словаззаду

134

Прийнята відповідь (встановлення явної ширини в пікселях) ускладнює внесення змін і розривів, коли ваші користувачі використовують інший розмір шрифту. Використання таблиць CSS, з іншого боку, чудово працює:

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>

Розгорніть фрагмент

Ось JSFiddle: http://jsfiddle.net/DaS39/1/

І якщо вам потрібні мітки вирівнювання праворуч, просто додайте text-align: rightдо міток: http://jsfiddle.net/DaS39/

EDIT: Ще одна швидка примітка: таблиці CSS також дозволяють грати зі стовпцями: наприклад, якщо ви хочете, щоб поля введення займали якомога більше місця, ви можете додати у свою форму наступне

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

ви можете додати white-space: nowrapдо цього labelsв цьому випадку.

— Клемент
джерело

4

Мені подобається це рішення. Це означає, що мені не потрібно турбуватися про те, що мої стовпці неминуче змінюють ширину, оскільки сторінка розвивається в процесі розвитку. +1

— Том Лорд

9

@MuhammadUmer Оскільки таблиці заплутають читачів екрану та багато допоміжних пристроїв, тоді як таблиці CSS розділяють презентацію та зміст. Таким чином, ваша форма залишається легко піддається читанню екрана чи асистентом читання, але при цьому відображається чудово.

— Клімент

3

Що ж, помітка мітки в td говорить про те, що це частина організованих табличних даних, як діаграм; це не так. Крім того, використання HTML-таблиць ускладнює зміни плану в майбутньому або адаптування його до різних розмірів екрана (подумайте, мобільні телефони та планшети).

— Клімент

4

Я наполегливо протистояв структурі таблиць CSS з тим же аргументом, який робив @MuhammadUmer, до сьогодні! Я заглибився і вирішив спробувати це і нарешті побачити значення перемикання! Плюс його CSS, таким чином, полегшує справи з часом

— BillyNair

2

Як можна прокласти колони за допомогою цього рішення? Щоб вирівняти по центру кнопку подання.

— eugenekr

31

Просте рішення для вас, якщо ви не новачок у HTML, - це просто використовувати таблицю, щоб вирівняти все.

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

— амонет
джерело

43

Швидке та просте рішення. Залиште релігійні дебати на CSS на обідню перерву і приступайте до роботи.

— Еммануель Бург

3

@ClarkeyBoy - хто піклується до тих пір, як це виконує робота.

— SolidSnake

1

@ClarkeyBoy - найвідоміший коментар? хаха .. Я не хочу вступати в суперечки з тобою тут .. якщо ти хочеш це зробити діви так, як це зробити. якщо ти хочеш це зробити, то таблиці так залежать від тебе. але не припускайте, що всі клієнти чи люди будуть дбати про це. більшість із них дбають про те, щоб виконати роботу ..

— SolidSnake

2

@ClarkeyBoy - Do ця відповідь, і пост від W3C: stackoverflow.com/a/4707368/40411

— J. Польфер

6

@EmmanuelBourg: Це не саме те, для чого призначені таблиці CSS? Досягнення макетів, подібних до таблиці, не плутаючи читачів екрану? Макет, про який вимагає ОП, насправді досить легко досягти, використовуючи таблиці CSS (див. Нижче )

— Clément

17

Мені набагато простіше змінити відображення міток на вбудований блок і встановити ширину

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

— Байрон
джерело

9

Вам слід скористатися таблицею. Як питання логічної структури дані є табличними: саме тому ви хочете, щоб вони вирівнювались, оскільки ви хочете показати, що мітки пов'язані не лише зі своїми вхідними полями, а й між собою, у двовимірній структурі.

[врахуйте, що б ви зробили, якщо б у вас були рядкові або числові значення, а не поля введення.]

— Коллін-стріт
джерело

2

Я ціную ваш підхід.

— Jono

2

Для цього я вважаю за краще зберігати правильний семантичний HTML та використовувати CSS якомога простіше.

Щось подібне зробить цю роботу:

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

Однак один недолік: можливо, вам доведеться вибрати правильну ширину мітки для кожної форми, і це непросто, якщо ваші мітки можуть бути динамічними (наприклад, мітки I18N).

— Самуель EUSTACHI
джерело

1

Я великий фанат використання списків визначень.

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

Їх легко використовувати за допомогою CSS, і вони уникають стигми використання таблиць для компонування.

— Андрій
джерело

Це так само легко виконується за допомогою divs (у ddсправедливого - близько 40px лівий запас) і дозволяє уникнути будь-якої семантичної плутанини. Крім того, жоден з цих рядків не складається з міток / входів у тому ж рядку.

— Hollister

1

за допомогою css

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

це дає вам щось на кшталт:

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

— Gjaa
джерело

Ви також повинні використовувати, clearщоб уникнути складання форм для скажімо, меншої ширини

— TheMaster

0

Традиційний метод - використання таблиці.

Приклад:

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

Однак багато хто стверджує, що таблиці обмежують і віддають перевагу CSS. Перевага використання CSS полягає в тому, що ви можете використовувати різні елементи. Із списку divs, упорядкованих та не упорядкованих ви можете виконати той же макет

Зрештою, ви захочете використовувати те, що вам найбільше комфортно.

Підказка: Столи легко розпочати.

— Веб-рішення OV
джерело

1

+1, заявивши, що з ними легко почати ... але насправді розробники повинні вдаватися лише до таблиць для даних (дивіться мій коментар до іншої відповіді на повну

— рент

1

Використовувати таблиці CSS так само просто, і у них немає проблем із доступністю. Дивіться мою відповідь нижче.

— Clément

0

Ну а для самих основ ви можете спробувати вирівняти їх у таблиці. Однак використання таблиці погано для компонування, оскільки таблиця призначена для вмісту.

Можна використовувати плаваючі прийоми CSS.

Код 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>

Розроблену я написану статтю можна знайти, відповідаючи на питання проблеми IE7 float: IE7 float right problemi

— маври
джерело

дякую за приклади, проте форма HTML все ще не вирішує проблему. Якщо ви зміните "Ім'я" в одному з них на "Ім'я", наприклад, я закінчуюсь тією ж проблемою, що і вперше

— yoshyosh

Я працював з цим від дизайнерів, і це трохи крихко, IME. Для цього базового планування це буде добре 98% часу. Спробуйте отримати занадто складний, наприклад, макет з двома стовпцями або багаторядкові мітки, і це стає важким.

— статистика

1

@staticsan - якщо ти розумієш, що плаває, очищає та дівеш, ти будеш чудово працювати з такою компонуванням, і насправді вони роблять швидше та гнучкішими порівняно з таблицями в сучасних браузерах.

— mauris

Ну, я думав, що розумію поплавки, очищення та діви, але не зміг продовжити форму, яку мені дали, не порушивши її. Незалежно від того, чи було це недоліком у моєму розумінні чи дизайнерською реалізацією, факт залишався фактом неміцним. (Цікаво, що наступна версія буде більш гібридною конструкцією з використанням ulтегів.)

— staticsan

0

Я знаю, що на це вже відповіли, але я знайшов новий спосіб їх красивого вирівнювання - з додатковою перевагою - див. Http://www.gargan.org/uk/Web_Development/Form_Layout_with_CSS/

в основному ви використовуєте елемент мітки навколо вводу та вирівнюєте за допомогою цього:

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

а потім за допомогою css ви просто вирівняєте:

label {
    display:block;
    position:relative;
}

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

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

вам не потрібен жодний безладний бруд, який лежить навколо, щоб переламати рядки - це означає, що ви зможете швидко здійснити розкладку в кілька стовпців динамічно
вся лінія може натискати. Особливо для прапорців це величезна допомога.
Динамічно показувати / приховувати рядки форм легко (ви просто шукаєте вхід і ховаєте його батьківський -> мітка)
Ви можете призначити класи цілій етикетці, щоб вона відображала введення помилок набагато чіткіше (не лише навколо поля введення)

— Ніко
джерело

Приємно, але потрібна фіксована ширина етикетки. Текст великої мітки перекриває введення.

— маурето

0

Відповідь Клемента на сьогодні найкраща. Ось дещо вдосконалена відповідь, що показує різні можливі вирівнювання, включаючи кнопки, вирівнювані праворуч у центрі:

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>

Розгорніть фрагмент

Я додав трохи накладки праворуч від усіх міток ( padding-right:8px) просто для того, щоб зробити приклад легким менш жахливим виглядом, але це потрібно зробити більш ретельно в реальному проекті (додавання прокладки до всіх інших елементів також було б хорошою ідеєю).

— Кіберночі
джерело

-1

css Я використовував для вирішення цієї проблеми, схожу на Gjaa, але стилю краще

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

Ось мій HTML, який використовується спеціально для простої реєстраційної форми без 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>

Це дуже просто, і я тільки починаю, але це спрацювало досить непогано

— PA_Commons
джерело

-1

Вставте теги вводу всередині упорядкованих списків. Зробіть тип стилю жодним. Ось приклад.

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

Працювали для мене!

— Вівек Ієр
джерело

Це ніколи не вийде. ULпросто відступить вміст подалі від поля, нічого не вирівнюючи. Якщо поставити inputs LI, просто додасте перед ними кулю (так, вони будуть вирівняні, як список, а не проти міток). Крім того, "Input2" буде дотримуватися попереднього inputелемента, тому що " LIне закриті" (немає </li>) і немає "запуску" <li>для цієї "мітки", тому вона буде оброблена як слід, загальний текст, отже, приєднаний до попередній елемент. Нарешті, у коді є помилка, закриття <ul/>має бути </ul>.

— Кіберночі

-2

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

У CSS ви повинні оголосити і мітку, і введення як дисплей: вбудований блок і надати ширину відповідно до ваших вимог. Сподіваюся, що це вам допоможе. :)

— kta
джерело

-4

Просто додайте

<form align="center ></from>

Просто покладіть вирівнювання в тег відкриття.

— Зак Гілл
джерело

Це не буде працювати, так як formне має alignатрибута (і навіть якби він був, він буде застарілим у напрямку використання стилю / CSS). Також закриваючий тег неправильний, він повинен бути </form>. style="text-align:center"Всередині можна визначити form, що б вирівняло весь вміст форми в центрі, але це не те, про що було в первісному питанні. Це ніколи не буде вирівнювати мітки з полями їх введення (так, я тестував на Firefox 75, просто напевне).

— Кібернеч