Форма для укладки с надписью над входами

Я хотел бы создать следующий стиль формы:

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
[.........................................]
[.........................................]
[.........................................]
[.........................................]

что было бы лучшим способом сделать это? Я все время путаюсь в своих поплавках!

5 52
html css

5 ответов:

Я бы сделал как 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>
70

вы могли бы попробовать что-то вроде

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

Я бы предпочел не использовать только 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>
5

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

чтобы избежать этого, сделайте divs с меньшими полями ввода встроенным блоком, а не плавающим слева.

Это:

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

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

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

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

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

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

2