Как выровнять формы ввода в HTML - PullRequest
Новая
       48

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

104 голосов
/ 30 ноября 2010

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

Ответы [ 16 ]

115 голосов
/ 19 мая 2014

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

55 голосов
/ 30 ноября 2010

Другой пример, это использует 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>
26 голосов
/ 30 ноября 2010

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

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

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
6 голосов
/ 12 апреля 2013

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

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

3 голосов
/ 21 ноября 2012

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

Примерно так будет работать: 

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

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

2 голосов
/ 18 мая 2013

с использованием 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     |
1 голос
/ 17 октября 2013

Я знаю, что на этот вопрос уже дан ответ, но я нашел новый способ их правильного выравнивания - с дополнительным преимуществом - см. 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;    
}
  • вам не нужны беспорядочные помехи для переноса строк - это означает, что вы можете быстро создать многостолбцовый макет динамически
  • вся строка доступна по клику. Особенно для флажков это огромная помощь.
  • Динамическое отображение / скрытие строк формы легко (вы просто ищете вход и скрываете его родительский элемент -> метку)
  • Вы можете назначить классы всей метке, чтобы она показала ввод ошибок намного яснее (не только вокруг поля ввода)
1 голос
/ 30 ноября 2010

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

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

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

1 голос
/ 30 ноября 2010

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...