如何设置没有表格的窗体的样式和对齐方式?

这可能得不到很多支持,但我的两分钱是:

在某些情况下,表格是 更容易的 对于布局;例如三列或表单(尽管这里有一些关于进行纯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"

我相信这句话非常适用于这种情况。如果您的表布局对您有效,不会导致可访问性问题,并且没有损坏,那么不要修复它。

像“你应该”、“必须”、“永远”这样的短语-让我害怕,因为一个尺码不适合所有人!拿一粒盐给狂热者吃。

是,使用标签和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

如果你不使用表格,你需要事先知道标签的宽度。对于多语言站点(i18n),这通常是一个问题。

对于桌子,它们可以拉伸以适合不同尺寸的标签。仅CSS还不能以一种良好的支持方式做到这一点。

为什么不使用表格?听上去他们现在对你很有效。你担心无障碍问题吗?仅仅因为它是一个表并不意味着易访问性会受到影响。

我要提醒你,不要为了纯粹的缘故而为一个已解决的问题创建一个新的解决方案。即使你担心语义学,哪种语义学描述的形式呢?

我经常使用以下方法,它允许我精确地设置我喜欢的所有对齐方式。如您所见,它为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 -->

在没有桌子的情况下,有很多方法可以做到这一点。一旦你得到了基本的格式,它就像桌子一样容易使用,它只是最初的游戏,可能是一个痛苦。所以,看看那些已经为你完成了全部工作的人:

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

我也记录了 the method I've settled on 上周(一个片段):

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

这取决于你和谁说话。纯粹主义者说使用CSS是因为table元素不是用于布局的。但对我来说,如果成功了,为什么要改变它?我现在确实在布局中使用了CSS,但是我仍然有很多我没有也不会更改的遗留代码。

这里大多数非基于表格的答案都依赖于预先确定的固定宽度,这对于国际化或任何其他无法确定标签所需宽度的情况都是一种痛苦。

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

简单。

没有一种尺寸适合这一切。您使用的表示例可以改进,但是:

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

对于错误部分不太确定;我认为将它放在输入旁边比为它单独列更有意义。

我过去使用这个相当有效:

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>

唯一真正让人抓狂的是Firefox2,它优雅地降级了。(请参阅-moz内联框,这有点黑客行为,但也不错)

我也有这个问题,但是我的cocidil在左边有一个菜单(也有float:left在里面)。

所以。我的解决方案是: 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;
}

我认为,它也可以在形式类中使用,但实际上我在“新”类中有更多的形式。