如何在不使用太多 div 标签的情况下使用 css 创建所需的表单？

Question

我正在创建的邮件列表表单包含以下字段：名字、姓氏、街道地址、城市、州、邮编、电子邮件和电话号码。我使用列表项和 css NOT 表创建了表单。我想要第一行的名字和姓氏标签，第二行的街道地址，第三行的城市，州和邮政编码，第四行的电子邮件和电话号码线。每条线应相互正确排列。

起初我已经完成了这个，但是我几乎在每个标签周围都使用了很多 div 类，我想知道在不使用很多 div 标签的情况下是否可以做到这一点。以下是邮件列表的代码：

<h1>Join our Mailing List</h1>
{exp:freeform:form form_name="cogar_form" return="thankyou" mailing_list="cogar_mail"  required="first_name|last_name|street_address|city|state|postalcode|email|phone1" notify="kneeskeh81@herkimer.edu" template="cogar_mail"}
<ul>                        
<li><label for="first_name">First Name</label>
<br /><input type="text" id="first_name" name="first_name" value="" maxlength="30" /></li>

<li><label for="last_name">Last Name</label>
<br /><input type="text" id="last_name" name="last_name" value="" maxlength="30" /></li>

<li><label for="street">Street Address</label>
<br /><input type="text" id="street" name="street_address" value="" size="40" maxlength="50"/></li>

<li><label for="city">City/Town</label>
<br /><input type="text" id="city" name="city" value="" /></li>

<li><label for="state">State</label> <br /><select id="state" name="state">
<option>&nbsp;</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select></li>

<li><label for="postalcode">Zip</label>
<br /><input type="text" id="postalcode" name="postalcode" value="" size="11" maxlength="5" /></li>

<li><label for="email">Email</label>
<br /><input type="text" id="email" name="email" value="" maxlength="30" /></li>

<li><label for="phone">Phone Number</label>
<br /><input type="text" id="phone" name="phone1" value="" size="15" maxlength="14" /></li>
</ul>   
<p style="clear:left;"><input type="submit" name="submit" value="Submit" /></p>
{/exp:freeform:form}

有人知道如何在不使用太多 div 标签的情况下正确设置样式吗？

Answer 1

只使用表格。我们为什么要让自己遭受这种折磨？

Answer 2

如果您尝试在没有大量 div 的情况下执行此操作，则可以执行以下操作：

 <style type="text/css">
       fieldset
       {
        width: 550px;
        padding: 5px 0;

       }             
       fieldset label
       {
          float: left;
          width: 200px;
          margin-right: 15px;
       }
    </style>
    <fieldset>
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />

。 . . 等等......上面的css将使标签与表单元素很好地对齐。注意：马克赫德在我打字时发布了他的答案 - 他的答案与我的相似

Answer 3

您可以通过使用适当的表单标签（例如字段集和标签）来减少 div 标签的数量：

<form>
    <fieldset>
        <legend>Fieldset title</legend>
        <label for="input-id">
            <span class="label-title">Label Title <span class="required">*</span></span>
            <input id="input-id" class="text-input" type="text" name="input-name" />
        </label>
        <!-- etc -->
    </fieldset>

    <ul class="form-buttons">
        <li><input type="submit" value="Submit" /></li>
    </ul>
</form>

这种方法将为您提供广泛的挂钩：表单本身、字段集、图例、标签、标签标题、所需文本标题、某种类型的输入、表单按钮（分组和单独）等。

通过所有这些钩子，您可以非常有效地定位您的 CSS 和 JavaScript 验证。

Answer 4

我建议从Wufoo 的几个表格中查看源代码。例如，Emergency Contact and Medical Information 有许多以不同方式排列的字段。就像您的示例一样，为了拆分作者使用的字段组 <li> 元素。如果您愿意，我不明白为什么不能用<div>s 替换它们。

我认为那里的作者无论如何都不会使用“太多”<div>s。

也不错：The Man in Blue 中的 horizontal 和 margin 表单。创造性地使用<label>s。

表格布局有这么多技巧，我不认为有任何错误方式。

Answer 5

我不确定您所说的“每条线应正确对齐”是什么意思。如果您的意思是，每个标签都应该正确地位于其输入元素的上方，这相对容易，但确实需要嵌套 div：

<div class="field">
  <div class="label"><label for="firstname">First Name</label></div>
  <div class="control"><input id="firstname" name="firstname" type="text"></div>
</div>

如果您认为 div 层数过多，那么您显然从未看过博客引擎的源代码。 :)

然后，您可以按照自己的意愿安排字段 div。

但是，如果您的意思是不同行上的 div 应该对齐，那么除非您修复 div 的宽度，否则这将变得更加困难。有时这很实用，有时则不然。这只是表格比“纯”CSS 更擅长的一件事。

这里有自我推销的风险是my perspective on tables vs pure CSS。我采取务实的观点：如果您正在做的事情在纯 CSS 中很容易做到，那么就这样做，但是由于 CSS 的限制和浏览器的差异，有些效果是您无法做到的（或做得好）不使用表格。

Answer 6

我推荐BluePrint。它是一个 CSS 框架。如果您学会正确使用它，它将大大减少您需要的 div 数量。

Answer 7

您应该能够通过使用类来实现它，并通过仔细使用诸如display property 之类的东西（例如，您可以通过使列表项使用display: inline 来将前两个字段放在同一行）。

看看上面的东西，你根本不需要任何 div。