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，然后拆分名称标签＆amp;输入，以及电子邮件标签＆amp;输入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

您可以尝试类似

的内容

<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

我知道这是一个旧的答案，并且答案很有效。如果你没有设计背景并将最后的输入浮动。如果是，那么表单背景将不包括浮动的输入字段。

要避免这种情况，请使用较小的输入字段内联块而不是向左浮动来使用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 5

无需像其他人建议的那样添加任何额外的div包装器。

最简单的方法是将输入元素包装在相关的标签标记中，并将输入样式设置为display:block。

获得的奖励积分：现在，您无需设置标签for属性。因为每个标签都针对嵌套输入。

<form name="message" method="post">
    <section>
        <label class="left">
            Name
            <input id="name" type="text" name="name">
        </label>
        <label class="right">
            Email
            <input id="email" type="text" name="email">
        </label>
    </section>
</form>

https://jsfiddle.net/Tomanek1/sguh5k17/15/

Answer 6

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

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

10分钟前我在输入

上面有同样的地方标签问题然后我得到了一个小丑陋的决议

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

缺点是标签和输入之间有一个很大的空白区域，当然你可以调整css

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

Answer 8

我发现最简单/最少的编码解决方案是最好的。将<label>更改为<div>对我有用。例如

更改：

<label for="name">Name</label>
<input id="name" type="text" value="" name="name">

收件人：

<div for="name">Name</div>
<input id="name" type="text" value="" name="name">

给我我想要的东西。

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

8 个答案: