Formulario Styling con marcadores anteriores Entradas

Question

me gustaría producir el estilo siguiente forma:

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

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

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

El código HTML que tengo es:

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

En estos momentos se está produciendo:

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

¿Cuál sería la mejor manera de hacerlo? ¡Me sigo metiendo en un embrollo con mis carrozas!

Answer 1

me gustaría hacer las dos input y label elementos display: block, y luego dividir la etiqueta del nombre & de entrada, y el correo electrónico de entrada en la etiqueta & div's y flotar uno al lado del otro.

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

Usted podría intentar algo así como

<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 y luego como si fuera

form { width: 400px; } 
form section div { float: left; } 
form section div.full { clear: both; } 
form section div label { display: block; } 

Answer 3

Preferiría no utilizar un elemento HTML5 solamente como <section>. Además, agrupar los campos de entrada puede ser doloroso si intenta generar el formulario con código. Siempre es mejor producir marcas similares para cada una y solo cambiar los nombres de las clases. Por tanto, yo recomendaría una solución que tiene este aspecto:

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

hace 10 minutos que tenía el mismo problema de lugar etiqueta encima de la entrada

entonces yo tiene una pequeña resolución fea

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

La desventaja es que hay un espacio en blanco grande entre la etiqueta y de entrada, por supuesto, se puede ajustar el css

demo en: http://jsfiddle.net/bqkawjs5/

Answer 5

Sé que esto es un viejo con una respuesta aceptada, y esa respuesta funciona muy bien ... SI no estás diseñando el fondo y flotando las entradas finales que quedan. Si es así, el fondo del formulario no incluirá los campos de entrada flotados.

Para evitar esto, los divs con los campos de entrada más pequeños en línea bloquean en lugar de flotar a la izquierda.

Este:

<div style="display:inline-block;margin-right:20px;"> 
    <label for="name">Name</label> 
    <input id="name" type="text" value="" name="name"> 
</div> 

En lugar de:

<div style="float:left;margin-right:20px;"> 
    <label for="name">Name</label> 
    <input id="name" type="text" value="" name="name"> 
</div>