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

我不确定你的意思是“每条线路应该相互正确排列。”如果你的意思是，每个标签应该正确地位于它的输入元素之上，这相对容易，但需要嵌套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 2

我建议在Wufoo处查看几种形式的来源。例如，Emergency Contact and Medical Information有许多字段以不同方式排列。与您的示例一样，为了拆分字段组，作者使用了<li>个元素。如果你愿意，我不明白为什么你不能用<div>替换它们。

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

也很好：来自horizontal的margin和The Man in Blue表单。创造性地使用<label> s。

有很多技巧来布置表单，我认为没有任何错误的方式。

Answer 3

如果你在没有很多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将使标签与表单元素很好地对齐。注意：Mark Hurd在我打字时发布了他的答案 - 他的回答与我的相似

Answer 4

只需使用表格。为什么我们要经历这种折磨呢？

Answer 5

你应该能够通过使用类来实现它，并且通过谨慎使用诸如display property之类的东西（例如，你可以通过使列表项使用{{1}来将前两个字段放在同一行上}）。

你应该不需要任何div，看看上面的东西。

Answer 6

我建议BluePrint。它是一个css框架。如果你学会正确使用它，它会减少你需要的div数量。

Answer 7

您可以使用适当的表单标记（如字段集和标签）来减少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验证。

如何使用css创建所需的表单而不使用太多的div标签？

7 个答案: