使用标签高于输入的样式表单 [英] Styling Form with Label above Inputs

问题描述

我想生成以下表单样式：

 
名称电子邮件
 [........ .........] [.................] 
 
主题
 [....... ..........] 
 
消息
 [......................... ..................] 
 [............................ .............] 
 [............................... ..........] 
 [................................. .......] 
 

我的HTML代码是：

 < form name =messagemethod =post> 
< section> 
< label for =name> Name< / label> 
< input id =nametype =textvalue =name =name> 
< label for =email>电子邮件< / label> 
< input id =emailtype =textvalue =name =email> 
< / section> 
< section> 
< label for =subject>主题< / label> 
< input id =subjecttype =textvalue =name =subject> 
< label for =message>邮件< / label> 
< input id =messagetype =textvalue =name =message> 
< / section> 
< / form> 
  

目前正在生产：

 
名称[...................] 
电子邮件[............... .....] 
主题[...................] 
消息
 [........ .................................] 
 [........... ..............................] 
 [.............. ...........................] 
 [................. ........................] 
 

最好的方法做到这一点？

解决方案

我会使输入和标签元素 display：block ，然后拆分名称标签&输入，以及电子邮件标签& p>

 < form name =messagemethod =post> 
< section> 
 
< div style =float：left; margin-right：20px;> 
< label for =name> Name< / label> 
< input id =nametype =textvalue =name =name> 
< / div> 
 
< div style =float：left;> 
< label for =email>电子邮件< / label> 
< input id =emailtype =textvalue =name =email> 
< / div> 
 
< br style =clear：both; /> 
 
< / section> 
 
< section> 
 
< label for =subject>主题< / label> 
< input id =subjecttype =textvalue =name =subject> 
< label for =message>邮件< / label> 
< input id =messagetype =textvalue =name =message> 
 
< / section> 
< / form> 
  

CSS

 输入，标签{
 display：block; 
} 
  

I would like to produce the following form style:

Name                    Email
[.................]     [.................]

Subject
[.................]

Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

The HTML code I have is:

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

At the moment it is producing:

Name    [...................]
Email   [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

What would be the best way to do this? I keep getting in a muddle my floats!

解决方案

I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.

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

这篇关于使用标签高于输入的样式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！