Как выровнять формы ввода в HTML

Question

Как выровнять формы ввода в HTML

Я новичок в 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>

Проблема с этим заключается в том, что поле поля после "Email" кардинально отличается с точки зрения расстояния по сравнению с именем и фамилией. Каков "правильный" способ сделать так, чтобы они "выстраивались" по существу?

Я пытаюсь практиковать хорошую форму и синтаксис... многие люди могут делать это с помощью CSS. Я не уверен, я до сих пор изучил только основы HTML.

146

html forms alignment

Источник

user523686 30 ноя '10 в 02:14

18 ответов

Решение

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

175

Источник

user695591 19 май '14 в 15:00

Простое решение для вас, если вы новичок в 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>

50

Источник

user524557 30 ноя '10 в 02:25

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

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

22

Источник

user2666112 08 авг '13 в 21:55

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

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

9

Источник

user2273453 12 апр '13 в 07:56

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

Что-то вроде этого сделало бы работу:

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

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

3

Источник

user709881 21 ноя '12 в 15:22

Я большой поклонник использования списков определений.

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

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

2

Источник

user524621 30 ноя '10 в 03:06

Используя 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     |

2

Источник

user2171254 18 май '13 в 00:16

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

То, что вы можете использовать, это 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

1

Источник

user126039 30 ноя '10 в 02:20

Я знаю, что на этот вопрос уже дан ответ, но я нашел новый способ их правильного выравнивания - с дополнительным преимуществом - см. http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

в основном вы используете элемент label вокруг ввода и выравниваете его так:

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

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

1

Источник

user150740 17 окт '13 в 09:38

Это также можно сделать с помощью CSS и без таблиц, плавающих элементов или фиксированной длины, изменив направление содержимого на , а затем обратно на , но метки должны идти после каждого ввода.

Чтобы избежать этого переупорядочения разметки, просто установите текст метки в data-*атрибут и показать его с помощью псевдоэлемента. Думаю, станет намного понятнее.

Вот пример установки текста метки в пользовательском атрибуте с именем data-textи показывать их с помощью ::afterпсевдоэлемент, поэтому мы не возимся с разметкой при изменении directionк rtlа также ltr:

1

Источник

user1977836 29 дек '20 в 16:40

Ответ Клемана, безусловно, лучший. Вот несколько улучшенный ответ, показывающий различные возможные варианты выравнивания, включая кнопки с выравниванием по левому краю и правому краю:

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

Источник

user3360678 04 май '20 в 10:13

Традиционный метод заключается в использовании таблицы.

Пример:

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

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

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

1

Источник

user524120 30 ноя '10 в 02:28

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>

Это очень просто, и я только начинаю, но это работало довольно хорошо

-1

Источник

user3533999 16 апр '14 в 23:32

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

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

-1

Источник

user539023 07 фев '14 в 09:04

Вставьте теги ввода в неупорядоченные списки. Сделайте тип стиля нет. Вот пример.

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

Работал на меня!

-1

Источник

user5733941 17 дек '16 в 04:20

Я думаю, было бы проще, если бы вы использовали таблицу для структурирования своей формы. Может быть утомительно, но ничего "скопировать и вставить" с небольшим редактированием не может исправить.

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

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

-2

Источник

user4180326 05 ноя '14 в 11:14

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

<form align="center ></from>

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

-3

Источник

user8738258 07 окт '17 в 18:50

Другие вопросы по тегам html forms alignment

user375855 30 ноя '10 в 02:26 2010-11-30 02:26 · Accepted Answer · 2010-11-30 02:26

Другой пример, это использует 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>