Лучший способ структурировать форму HTML в два столбца? - PullRequest
Новая
       0

Лучший способ структурировать форму HTML в два столбца?

4 голосов
/ 16 марта 2012

Каков наилучший способ выровнять следующее?

Я хочу .inputTitle слева и inputInput справа с ошибкой между ними.

CSS: 

.crud_form{
    width:430px;
    margin:10px solid;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle{
    float:left;
    clear:left;
    margin:11px 10px 10px 0;
    width:95px;
    background:green;
}
.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}

HTML: 

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
<span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>

<span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>

<span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
<option value="Caps cost $15"></option>
<option value="Mugs cost $20"></option>
<option value="Childrens T-shirts, sizes 0 to 6">$10</option>
<option value="Ladies (no photo) cost $20"></option>
<option value="Men cost $20"></option>
</select></span>

<span class="inputError"></span>
<span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>

<input type="submit" value="Save" />

</form>

Ответы [ 5 ]

7 голосов
/ 16 марта 2012

Я не знаю, почему все используют div, span и li и т. Д. Все просто, посмотрите на пример ниже: 

label {
  width: 150px;
  padding-right: 20px;
  display: inline-block;
}
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
0 голосов
/ 16 марта 2012

Лучший способ структурировать форму с двумя столбцами - использовать элемент с двумя столбцами table внутри элемента form. Но так как вы говорите, что вам нужна «ошибка» (по-видимому, индикатор ошибки или сообщение об ошибке) между меткой ввода (заголовком) и полем ввода, вам на самом деле нужна форма трех -колонок, то есть таблица с тремя столбцами . 

<form ...>
<table>
<tbody>
  <tr><td class="inputTitle"><label for="first_name">First Name</label></td>
      <td class="inputError"><span></span></td>
      <td class="inputInput"><input type="text" name="first_name" id="first_name"  /></td></tr>
</tbody>
</table>
</form>

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

0 голосов
/ 16 марта 2012

Я хочу .inputTitle слева и inputInput справа с ошибкой между ними обоими.

Я всегда так делал, чтобы установить для них ширину.

Например:

Если бы у вас было 3 плавающих элемента, и вы хотели, чтобы они идеально совмещались внутри самого «Контейнера», Контейнеру, конечно, понадобится набор ширины.

После того, как вы задали ширину Контейнера, установите ширину этих трех плавающих элементов равной ширине Контейнера.

См. Ниже:

HTML: 

<div class="container">
     <div class="inputTitle"></div>
     <div class="inputError"></div>
     <div class="inputInput"></div>
     <div class="clear"></div>
</div>

CSS 

.container {
   width: 600px;
}
.inputTitle {
   width: 200px;
   float: left;
}
.inputError {
   width: 200px;
   float: left;
}
.inputInput {
   width: 200px;
   float: left;
}
.clear {
   clear: both;
}

В конечном итоге вы можете добавить клир: оба; Объявление CSS на контейнере, но я хотел бы прояснить: оба; Класс просто чтобы быть на безопасной стороне.

Конечно, вы всегда можете использовать метки, но установка предопределенной ширины для метки через CSS будет применяться ко всем меткам внутри класса и / или идентификатора.

Надеюсь, это поможет! Спасибо! Аарон

0 голосов
/ 16 марта 2012

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

HTML: 

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
  <div class="formdiv">
<span class="inputTitle">First Name</span>
<span class="inputInput">
  <input type="text" name="first_name" value="" id="first_name"  />
</span>
<span class="inputError"></span>
  </div>

  <div class="formdiv">
<span class="inputTitle">Last Name</span>
<span class="inputInput">
  <input type="text" name="last_name" value="" id="last_name"  /></span>
<span class="inputError"></span>
  </div>

  <div class="formdiv">
<span class="inputTitle">Address</span>
<span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>
  </div>

  <div class="formdiv">
  <span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>
  </div>

  <div class="formdiv">
  <span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
  <option value="Caps cost $15"></option>
  <option value="Mugs cost $20"></option>
  <option value="Childrens T-shirts, sizes 0 to 6">$10</option>
  <option value="Ladies (no photo) cost $20"></option>
  <option value="Men cost $20"></option>
  </select></span>

  <span class="inputError"></span>
  </div>

  <div class="formdiv">
  <span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>
  </div>

  <input type="submit" value="Save" />

</form>

CSS: 

.formdiv {
    float: left;
    width: 100%;
    margin-bottom: 1em;
}

.crud_form{
    width:430px;
    margin:10px solid;
    padding: 10px;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle {
    float:left;
    clear:left;
/*    margin:11px 10px 10px 0; */
    width:95px;
    background:green;
}

.inputInput {
    float: right;
}

.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}
0 голосов
/ 16 марта 2012

Аннотация

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

Ссылка

Чтобы увидеть полное описание того, как это делается, обратитесь к Справке W3C по этому , первоначально опубликованному в сообществе разработчиков Opera, в их учебной программе по веб-стандартам.

Пример кода / Реализация

HTML: 

<form>
  <ul>
    <li><label for="realname">Name:</label><input type="text" name="name" value="" class="medium" id="realname" /></li>
    <li><label for="address">Email:</label><input type="text" name="email" value="" class="medium" id="address" /></li>
    <li><label for="messageBody">Comments:</label><textarea name="comments" cols="32" rows="8" class="long" id="messageBody"></textarea></li>
  </ul>
</form>

CSS: 

/* base font size, other measures relay on seventh parts of this */
body {
    font-size: 14px;
    line-height: 1.714em;
}

/* form styles */
form {
    margin: 0;
    width: 35.929em;
}

/* reset list styles to be used as form layout mechanism */
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    clear: both;
    height: 1.714em;
    margin: 0;
}

/* form controls styles */
fieldset {
    height: 1.429em;
    margin: 0 0 -.143em 0;
    border: 0;
}
label {
    display: block;
    float: left;
    clear: left;
    width: 10.286em;
    overflow: auto;
    padding-right: 1.714em;
    text-align: right;
}
input {
    height: 1.143em;
    border: .071em solid rgb(96,96,96);
    padding: .071em;
    line-height: .929em;
}
textarea {
    height: 4.714em;
    margin-bottom: .286em;
    border: .071em solid rgb(96,96,96);
    padding: 0;
}
input,
textarea {    
    margin-top: 0;
    font-size: 100%;
    display: block;
    float: left;
    overflow: hidden;
    font-family: Futura,'Century Gothic',sans-serif;
    font-size: 1em;
}

/* input and textarea variants */
.medium {
    width: 11.714em;
}
.long {
    width: 20.429em;
}

Вы можете поиграть с примером полного кода в this jsFiddle (не содержит таблицы стилей IE).

Update

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

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

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

...