与标签上面输入

Question

样式表我想产生以下表单样式：

 
Name     Email 
[.................]  [.................] 

Subject 
[.................] 

Message 
[.........................................] 
[.........................................] 
[.........................................] 
[.........................................] 

的HTML代码，我拥有的是：

<form name="message" method="post"> 
    <section> 
    <label for="name">Name</label> 
    <input id="name" type="text" value="" name="name"> 
    <label for="email">Email</label> 
    <input id="email" type="text" value="" name="email"> 
    </section> 
    <section> 
    <label for="subject">Subject</label> 
    <input id="subject" type="text" value="" name="subject"> 
    <label for="message">Message</label> 
    <input id="message" type="text" value="" name="message"> 
    </section> 
</form> 

目前，它正在生产：

 
Name [...................] 
Email [...................] 
Subject [...................] 
Message 
[.........................................] 
[.........................................] 
[.........................................] 
[.........................................] 

这样做的最好方法是什么？我一直在糊弄我的花车！

Answer 1

我会做两个input和label元素display: block，再拆名称标签&输入，和电子邮件标签&投入div's旁边漂浮它们彼此。

HTML：

<form name="message" method="post"> 
    <section> 

    <div style="float:left;margin-right:20px;"> 
     <label for="name">Name</label> 
     <input id="name" type="text" value="" name="name"> 
    </div> 

    <div style="float:left;"> 
     <label for="email">Email</label> 
     <input id="email" type="text" value="" name="email"> 
    </div> 

    <br style="clear:both;" /> 

    </section> 

    <section> 

    <label for="subject">Subject</label> 
    <input id="subject" type="text" value="" name="subject"> 
    <label for="message">Message</label> 
    <input id="message" type="text" value="" name="message"> 

    </section> 
</form> 

CSS

input, label { 
    display:block; 
} 

Answer 2

你可以尝试像

<form name="message" method="post"> 
    <section> 
    <div> 
     <label for="name">Name</label> 
     <input id="name" type="text" value="" name="name"> 
    </div> 
    <div> 
     <label for="email">Email</label> 
     <input id="email" type="text" value="" name="email"> 
    </div> 
    </section> 
    <section> 
    <div> 
     <label for="subject">Subject</label> 
     <input id="subject" type="text" value="" name="subject"> 
    </div> 
    <div class="full"> 
     <label for="message">Message</label> 
     <input id="message" type="text" value="" name="message"> 
    </div> 
    </section> 
</form> 

，然后CSS它像

form { width: 400px; } 
form section div { float: left; } 
form section div.full { clear: both; } 
form section div label { display: block; } 

Answer 3

我不想使用仅HTML5元素，如<section>。如果您尝试使用代码生成表单，也可能会对输入字段进行分组。为每个标记生成类似的标记总是会更好，并且只更改类名称。因此，我建议一个解决方案，看起来像这样：

CSS

label, input { 
    display: block; 
} 
ul.form { 
    width : 500px; 
    padding: 0px; 
    margin : 0px; 
    list-style-type: none; 
} 
ul.form li { 
    width : 500px; 
} 
ul.form li input { 
    width : 200px; 
} 
ul.form li textarea { 
    width : 450px; 
    height: 150px; 
} 
ul.form li.twoColumnPart { 
    float : left; 
    width : 250px; 
} 

HTML

<form name="message" method="post"> 
    <ul class="form"> 
     <li class="twoColumnPart"> 
      <label for="name">Name</label> 
      <input id="name" type="text" value="" name="name"> 
     </li> 
     <li class="twoColumnPart"> 
      <label for="email">Email</label> 
      <input id="email" type="text" value="" name="email"> 
     </li> 
     <li> 
      <label for="subject">Subject</label> 
      <input id="subject" type="text" value="" name="subject"> 
     </li> 
     <li> 
      <label for="message">Message</label> 
      <textarea id="message" type="text" name="message"></textarea> 
     </li> 
    </ul> 
</form> 

Answer 4

11分钟前我有地方标签上面输入了同样的问题

然后我得到了一个小丑的分辨率

<form> 
    <h4><label for="male">Male</label></h4> 
    <input type="radio" name="sex" id="male" value="male"> 
</form> 

缺点是有标签和输入之间有很大的空白，当然你也可以调整CSS在

演示： http://jsfiddle.net/bqkawjs5/

Answer 5

我知道这是一个旧有一个公认的答案，而且这个答案很好。如果你没有对背景进行造型并将最终输入留下来。如果你是，那么表单背景将不包含浮动的输入字段。

为了避免这种情况，可以使用内嵌块的较小输入字段而不是向左浮动。

此：

<div style="display:inline-block;margin-right:20px;"> 
    <label for="name">Name</label> 
    <input id="name" type="text" value="" name="name"> 
</div> 

不是：

<div style="float:left;margin-right:20px;"> 
    <label for="name">Name</label> 
    <input id="name" type="text" value="" name="name"> 
</div>