使用输入上方标签的样式表单

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分开并将它们彼此相邻.

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>

Answer 2

可能有点晚了，但这对我有用。我只是在标签和输入元素 HTML 上使用了列 flex-direction

<form id="survey-form">
    <label for="name">Name</label>
    <input type="text" id="name">
    
    <label>Email</label>
    <input type="email" id="email">
  </form>

CSS

label,input{
  display:flex;
  flex-direction:column;
}

Answer 3

我知道这是一个旧的答案，并且有一个已接受的答案，并且该答案效果很好。如果您没有设置背景样式并将最终输入浮动到左侧。如果是，那么表单背景将不包括浮动输入字段。

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

这：

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

Answer 4

你可以试试像

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