Форма стилизации с надписью выше Входы

Ответ 1

Я бы сделал так, чтобы элементы input и label display: block, а затем разделяли имя label и input и метку email и input на 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>

Ответ 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; }

Ответ 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>

Ответ 4

Я знаю, что это старый с принятым ответом, и этот ответ отлично работает. ЕСЛИ вы не укладываете фон и не плаваете конечные входы слева. Если вы, то фон формы не будет содержать поля ввода с плавающей точкой.

Чтобы избежать этого, разделите div с меньшими входными полями inline-block, а не плавайте влево.

Это:

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

Ответ 5

10 минут назад у меня была та же проблема метки места над входом

тогда я получил небольшое уродливое разрешение

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

Недостатком является то, что между меткой и входом имеется большое пустое пространство, конечно, вы можете настроить css

Демо на: http://jsfiddle.net/bqkawjs5/

Ответ 6

Я считаю самые простые/наименее кодирующие решения лучшими. Изменение <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">

Дали мне именно то, что я хотел.