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

Ответ 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"

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

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

Ответ 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

Ответ 3

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

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

Ответ 4

A List Apart имеет хорошую статью об этом. Это не так просто, как вы могли бы надеяться, но я нашел, что дополнительная работа стоит того, насколько сильно ваши формы будут.

Ответ 5

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

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

Ответ 6

Я использую следующий метод большую часть времени, и это позволяет мне настроить все мои настройки таким образом, как мне это нравится. Как вы можете видеть, это дает мне большое количество крючков для 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 -->

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

Но 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.

Ответ 11

Я использовал это в прошлом довольно эффективно:

HTML:

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

CSS

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

Единственное, что действительно получилось - это Firefox 2, который изящно деградирует. (см. -moz-inline-box, который немного взломан, но не так уж плохо)

Ответ 12

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

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

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

Ответ 13

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

Итак. Мое решение было: 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;
}

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