Html 输入上方带有标签的样式表

Styling Form with Label above Inputs

提问by xylar

I would like to produce the following form style:

我想生成以下表单样式：

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

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

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

The HTML code I have is:

我拥有的 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>

At the moment it is producing:

目前它正在生产：

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

What would be the best way to do this? I keep getting in a muddle my floats!

什么是最好的方法来做到这一点？我的花车总是一团糟！

回答by fin1te

I'd make both the inputand labelelements display: block, and then split the name label & input, and the email label & input into div'sand float them next to each other.

我会同时制作 theinput和labelelements display: block，然后将名称标签 & 输入和电子邮件标签 & 输入拆分为div's并将它们彼此相邻浮动。

input, label {
    display:block;
}

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

回答by ErsatzRyan

You could try something like

你可以尝试类似的东西

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

and then css it like

然后CSS它喜欢

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

回答by Diadistis

I'd prefer not to use an HTML5 only element such as <section>. Also grouping the input fields might painful if you try to generate the form with code. It's always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :

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

CSS

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

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>

回答by Chris

I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.

我知道这是一个旧答案，答案已被接受，并且该答案效果很好。如果是，则表单背景将不包括浮动输入字段。

To avoid this make the divs with the smaller input fields inline-block rather than float left.

为了避免这种情况，使具有较小输入字段的 div 行内块而不是向左浮动。

This:

这个：

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

Rather than:

而不是：

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

回答by MingXiao

10 minutes ago i had the same problem of place label above input

10 分钟前，我在输入上方遇到了同样的地方标签问题

then i got a small ugly resolution

然后我得到了一个丑陋的小决议

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

The disadvantage is that there is a big blank space between the label and input, of course you can adjust the css

缺点是label和input之间有很大的空白，当然可以调整css

Demo at: http://jsfiddle.net/bqkawjs5/

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