Как выровнять формы ввода в 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

— yoshyosh
источник

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

— Trufa

Точно такой же вопрос, но ответ предполагает использование тега <table> со ссылкой на W3C: stackoverflow.com/questions/4707332

— Bossliaw 07

62

Другой пример, здесь используется CSS, я просто помещаю форму в div с классом контейнера. И указано, что входящие элементы, содержащиеся внутри, должны составлять 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>

Развернуть фрагмент

— serialk
источник

2

Отлично, просто избавил меня от лишних хлопот.

— null

Он также расширяет мою кнопку «Отправить» до ширины контейнера.

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

4

Это решение не работает. Элементы ввода не выровнены по левому краю. Таблица ниже работает.

— johny why

1

Я не большой поклонник установки явной ширины, когда вы можете обойтись без нее (см. Мой ответ ниже)

— Клеман

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/

РЕДАКТИРОВАТЬ: Еще одно небольшое примечание: таблицы CSS также позволяют вам играть со столбцами: например, если вы хотите, чтобы поля ввода занимали как можно больше места, вы можете добавить в свою форму следующее

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

в этом случае вы можете добавить white-space: nowrapк labels.

— Клеман
источник

4

Мне нравится это решение. Это означает, что мне не нужно беспокоиться о неизбежном изменении ширины моих столбцов по мере развития страницы в процессе разработки. +1

— Tom Lord

9

@MuhammadUmer Потому что таблицы будут сбивать с толку программы чтения с экрана и многие вспомогательные устройства, тогда как таблицы CSS разделяют представление и контент. Таким образом, ваша форма остается легко анализируемой программой чтения с экрана или помощником по чтению, и при этом отображается красиво.

— Clément

3

Ну, подходящая метка в td предполагает, что это часть организованных табличных данных, таких как диаграммы; здесь не так. Кроме того, использование таблиц HTML затрудняет изменение макета в будущем или адаптацию его к экранам различных размеров (например, для мобильных телефонов и планшетов).

— Clément

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>

— amonett
источник

43

Быстрое и простое решение. Оставьте религиозные дебаты по CSS на обеденный перерыв и делайте свою работу.

— Эммануэль Бург,

3

@ClarkeyBoy - кого это волнует, пока он выполняет свою работу.

— SolidSnake

1

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

— SolidSnake

2

@ClarkeyBoy - Прочтите этот ответ и сообщение от W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: Разве не для этого предназначены таблицы CSS? Получите макет таблицы, не запутывая программы чтения с экрана? Макет, который запрашивает OP, на самом деле довольно легко реализовать с помощью таблиц CSS (см. Ниже )

— Клеман,

17

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

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

— Byron
источник

9

Вам следует использовать стол. Что касается логической структуры данные являются табличными: вот почему вы хотите выровнять их, потому что вы хотите показать, что метки связаны не только со своими полями ввода, но и друг с другом в двумерной структуре.

[подумайте, что бы вы сделали, если бы вместо полей ввода отображались строковые или числовые значения.]

— Collin Street
источник

2

Я ценю ваш подход.

— Jono

2

Для этого я предпочитаю сохранять правильную семантику HTML и использовать CSS как можно проще.

Что-то вроде этого подойдет:

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

Однако есть один недостаток: вам, возможно, придется выбрать правильную ширину метки для каждой формы, и это непросто, если ваши метки могут быть динамическими (например, метки I18N).

— Сэмюэл ЮСТАЧИ
источник

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 (у a ddпросто левое поле ~ 40 пикселей) и избежать какой-либо семантической путаницы. Кроме того, ни один из них не выстраивает метки / входы в одной строке.

— Холлистер

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 в том, что вы можете использовать различные элементы. Из разделов, упорядоченного и неупорядоченного списка вы можете получить один и тот же макет.

В конце концов, вы захотите использовать то, что вам удобнее всего.

Подсказка: с таблицами легко начать работу.

— OV Web Solutions
источник

1

+1 за утверждение, что с ними легко начать ... но на самом деле разработчики должны прибегать только к таблицам для данных (см. Мой комментарий к другому ответу для полной разгадки!)

— ClarkeyBoy

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: проблемы с плавающей точкой в IE7.

— mauris
источник

спасибо за примеры, однако HTML-форма все еще не решает проблему. Если вы измените «Имя» в одном из них, например, просто «Имя», я

— столкнусь

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

— staticsan

1

@staticsan - если вы понимаете, что такое float, clear и div, вы отлично будете работать с таким макетом, и на самом деле они отображаются быстрее и более гибкие по сравнению с таблицами в современных браузерах.

— mauris

Ну, я думал, что понимаю float, clear и divs, но я не мог расширить форму, которую мне дали, без ее нарушения. Было ли это недоработкой в моем понимании или дизайнерской реализацией, факт остается фактом, что она была хрупкой. (Интересно, что в следующей версии будет больше гибридного дизайна с использованием ulтегов.)

— staticsan

0

Я знаю, что на это уже был дан ответ, но я нашел новый способ их красивого выравнивания - с дополнительным преимуществом - см. Http://www.gargan.org/en/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;    
}

вам не нужно беспорядочно валяться для разрывов строк - это означает, что вы можете быстро создать многоколоночный макет динамически
вся линия доступна для кликов. Это очень помогает, особенно для флажков.
Динамически отображать / скрывать строки формы легко (вы просто ищете ввод и скрываете его родительский элемент -> метку)
вы можете назначать классы для всей метки, чтобы она отображала ввод ошибок намного яснее (не только вокруг поля ввода)

— Niko
источник

Красиво, но нужна фиксированная ширина этикетки. Текст большой метки имеет приоритет над вводом.

— Мавретто

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), чтобы пример выглядел менее ужасно, но в реальном проекте это следует делать более осторожно (добавление отступов ко всем другим элементам также было бы хорошей идеей).

— Cyberknight
источник

-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

Вставляйте теги ввода внутри неупорядоченных списков. Не делайте style-type none. Вот вам пример.

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

Сработало у меня!

— Вивек Айер
источник

Это никогда не сработает. ULпросто будет отступать от поля, ничего не выравнивая. Ввод inputs LIпросто добавит перед ними маркер (да, они будут выровнены как список, а не по меткам). Кроме того, «Input2» будет придерживаться предыдущего inputэлемента, потому что LIони не закрыты (их нет </li>) и нет начала <li>для этой «метки», поэтому он будет обрабатываться так, как должен, поэтому общий текст будет объединен с предыдущий элемент. Наконец, в коде есть ошибка, закрытие <ul/>должно быть </ul>.

— Cyberknight

-2

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

В CSS вы должны объявить метку и ввод как display: inline-block и указать ширину в соответствии с вашими требованиями. Надеюсь, что это поможет вам. :)

— КТА
источник

-4

Просто добавьте

<form align="center ></from>

Просто вставьте выравнивание в открывающий тег.

— Зак Гилл
источник

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

— Cyberknight