與標籤上面輸入

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旁邊漂浮它們彼此。

HTML：

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

CSS

input, label { 
    display:block; 
} 

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

11分鐘前我有地方標籤上面輸入了同樣的問題

然後我得到了一個小丑的分辨率

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

缺點是有標籤和輸入之間有很大的空白，當然你也可以調整CSS在

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

Answer 5

我知道這是一箇舊有一個公認的答案，而且這個答案很好。如果你沒有對背景進行造型並將最終輸入留下來。如果你是，那麼表單背景將不包含浮動的輸入字段。

爲了避免這種情況，可以使用內嵌塊的較小輸入字段而不是向左浮動。

此：

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