Как стилизовать и выровнять формы без таблиц?

Question

Я привык использовать <table>s для идеального выравнивания полей формы. Вот как я обычно пишу свои формы:

<table border="0">
   <tr>
     <td><label for="f_name">First name:</label></td>
     <td><input type='text' id='f_name' name='f_name' /></td>
     <td class='error'><?=form_error('f_name');?></td>
   </tr>
</table>

Я знаю, что это плохая практика, и я хочу использовать CSS, <label>s, <div>s или более чистый метод. Однако факт в том, что <table>s работают очень хорошо для форм. Все выровнено точно, интервал идеален, все ошибки точно друг под другом и т. Д.

Недавно я пытался использовать теги <dt> и <dd> для формы, но в итоге я вернулся к таблицам только потому, что они выглядели намного лучше.

Как я могу получить такой тип выравнивания таблицы без использования <table> s?

Answer 1

Это может не получить большой поддержки, но вот мои два цента:

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

Processes and methodologies can make good servants but are poor masters.
   - Mark Dowd, John McDonald & Justin Schuh 
     in "The Art of Software Security Assessment"

Я считаю, что эта цитата очень сильно относится к этой ситуации. Если ваш макет таблицы работает для вас, не вызывает проблем с доступностью и не нарушен - не пытайтесь это исправить.

Фразы типа: «ты должен», «должен», «всегда» - пугают меня, потому что один размер не подходит всем! Возьмите фанатиков с зерном соли.

Answer 2

Да, используйте ярлыки и CSS:

<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>

CSS:

.FBLabel, .FBInput {
    display:block;
    width:150px;
    float:left;
    margin-bottom:10px;
}

См .: http://www.alistapart.com/articles/prettyaccessibleforms

Answer 3

Если вы не используете таблицы, вам нужно знать ширину ваших этикеток заранее. Это часто может быть проблемой для многоязычных сайтов (i18n).

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

Answer 4

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

<form id="login-form" action="#" method="post">
    <fieldset>
        <label id="for-email" for="email">
            <span class="label-title">Email Address <em class="required">*</em></span>
            <input id="email" name="email" type="text" class="text-input" />
        </label>

        <label id="for-password" for="password">
            <span class="label-title">Password <em class="required">*</em></span>
            <input id="password" name="password" type="password" class="text-input" />
        </label>
    </fieldset>

    <ul class="form-buttons">
        <li><input type="submit" value="Log In" /></li>
    </ul>
</form><!-- /#login-form -->

Answer 5

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

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

Answer 6

Есть множество способов сделать это без таблиц. Как только вы разберетесь с базовым форматом, с ним будет так же легко работать, как и с таблицами, это будет лишь начальная тренировка, которая может стать проблемой. Итак, просто посмотрите на других, которые уже проделали работу, чтобы выяснить все это для вас:

• http://www.alistapart.com/articles/prettyaccessibleforms
• http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

Я также задокументировал метод, на котором остановился на прошлой неделе (фрагмент):

<form action="/signup" method="post">
<fieldset>
<legend>Basic Information</legend>
<ol>
<li><label for="name">Name <span class="error">*</span>
    </label><input type="text" id="name" name="name" size="30" /></li>
<li><label for="dob">Date of Birth <span class="error">*</span></label>
    <div class="inputWrapper">
    <input type="text" id="dob" name="dob" size="10" />
    <span class="note">YYYY-MM-DD</span></div></li>
<li><label for="gender">Gender <span class="error">*</span></label>
    <select id="gender" name="gender">
    <option value=""></option>
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select></li>
</ol>
</fieldset>
</form>

И CSS:

fieldset { 
    margin: 0 0 20px 0; } 

fieldset legend { 
    font-weight: bold; 
    font-size: 16px; 
    padding: 0 0 10px 0; 
    color: #214062; } 

fieldset label { 
    width: 170px; 
    float: left; 
    margin-right:10px; 
    vertical-align: top; } 

fieldset ol { 
    list-style:none; 
    margin: 0;
    padding: 0;} 

fieldset ol li { 
    float:left; 
    width:100%; 
    padding-bottom:7px; 
    padding-left: 0; 
    margin-left: 0; } 

fieldset ol li input, 
fieldset ol li select, 
fieldset ol li textarea { 
    margin-bottom: 5px; } 

form fieldset div.inputWrapper { 
    margin-left: 180px; } 

.note { 
    font-size: 0.9em; color: #666; }

.error{ 
    color: #d00; }

Answer 7

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

Но CSS имеет display: table по этой самой причине:

HTML

<div class="form-fields">
  <div class="form-field">
    <label class="form-field-label" for="firstNameInput">First Name</label>
    <div class="form-field-control"><input type="text" id="firstNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
  <div class="form-field">
    <label class="form-field-label" for="lastNameInput">Last Name</label>
    <div class="form-field-control"><input type="text" id="lastNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
</div>

CSS

.form-fields {
  display: table;
}

.form-field {
  display: table-row;
}

.form-field-label,
.form-field-control,
.form-field-comment {
  display: table-cell;
  padding: 3px 10px;
}

Simple.

Answer 8

Действительно зависит от того, с кем вы говорите. Пуристы говорят, что используют CSS, потому что элемент таблицы не предназначен для разметки. Но для меня, если это работает, зачем это менять? Я сейчас использую CSS для разметки, но у меня все еще есть много унаследованного кода, которого у меня нет и не изменится.

Answer 9

У меня тоже была эта проблема, но с кокидилом, в котором у меня было меню слева (также с поплавком: слева).

Итак. Мое решение было: HTML

<div class="new">
   <form>
     <label class="newlabel">Name</label>
     <input type="text" name="myTextBox" id="myTextBox" />
   </form>
</div>

CSS

.new {
    display:block;
}
.newlabel {
    min-width: 200px;
    float: left;
}

Думаю, это будет работать и в классе форм, но на самом деле у меня было больше форм в "новом" классе.

Answer 10

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

<table>
  <tbody>
    <tr>
      <th scope="row"><label for="f_name">First name:</label></th>
      <td>
        <input type='text' id='f_name' name='f_name' />
        <?php form_error('f_name'); ?>
      </td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

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