1. Inicio
  2. Pregunta y respuesta
  3. Cómo puedo formatear un formulario HTML sin usar tablas

Cómo puedo formatear un formulario HTML sin usar tablas

2008-10-07 13 views

Respuesta

0

Buscaría usando la etiqueta div para los datos de diseño en una página.

Las tablas son todavía muy útiles para los datos tabulares, pero está mal visto para diseñar una página.

Ver fuente aquí en stackoverflow.com, probablemente haya algunos buenos ejemplos.

Fuente

2008-10-07 18:55:42

+2

hmm .... fuente de la página en SO parece tener muchas tablas. :) –

+0

La etiqueta '

' se usa 24 veces en esta página. –

0

Piense en poner los nombres de los campos por encima del campo, en lugar de estar al lado. Encuentro que esto funciona de la mejor manera.

Fuente

2008-10-07 18:55:44

+0

Cuando se hace bien, esto hace que las formas sean infinitamente más legibles ya que sus ojos solo tienen que moverse en una dirección en lugar de ir y venir. –

+0

Aunque no funciona muy bien para formas complejas.Para mí, simplemente me obligó a simplificar las formas, lo cual nunca es malo. –

+1

No siempre tenemos el lujo de especificar el diseño, desafortunadamente. –

12

Nick Rigby escribió un excelente artículo para obtener una lista aparte titulado Prettier Accessible Forms

Usos de campos, leyenda, etiqueta. Altamente semántico

Fuente

2008-10-07 19:04:30

3

Puede intentar y pelar el formulario lo más atrás posible y conformarse con <label> y varios elementos de entrada de formulario según sea necesario con un apoyo en el atributo clear:left; en el CSS.

Esto aseguraría que cada línea comience de nuevo sin tener que envolver cada línea del formulario en <div> o <p> adicionales o incluso haciendo una lista de ellas.

.formlabel{ 
    clear:left; 
    display:block; 
    float:left; 
    margin:0 0 1em 0; 
    padding:0 0.5em 0 0; 
    text-align:right; 
    width:8em; 
} 

.forminput{ 
    float:left; 
    margin:0 0.5em 0.5em 0; 
} 

.formwarning{ 
    clear:left; 
    float:left; 
    margin:0 0.5em 1em 0; 
}

Aquí hay un formulario HTML de ejemplo que muestra ejemplos de diferentes tipos de entrada y un mensaje de validación adicional que puede ocultar o estilo según sea necesario:

<fieldset><legend>Details</legend> 
    <label for="name" class="formlabel">Name</label> 
     <input id="name" name="name" type="text" class="forminput" /> 
     <div class="formwarning">Validation error message</div> 

    <label for="dob_year" class="formlabel">DOB</label> 
     <div class="forminput"> 
     <input id="dob_year" name="dob_year" type="text" size="4" />/
     <input id="dob_month" name="dob_month" type="text" size="2" />/
     <input id="dob_day" name="dob_day" type="text" size="2" /> 
     </div> 

    <label class="formlabel">Sex</label> 
     <label for="female" class="forminput">Female</label> 
     <input id="female" name="sex" type="radio" class="forminput" /> 
     <label for="male" class="forminput">Male</label> 
     <input id="male" name="sex" type="radio" class="forminput" /> 

    <label for="state" class="formlabel">State</label> 
     <select id="state" name="state" class="forminput"> 
     <option>ACT</option> 
     <option>New South Wales</option> 
     <option>Northern Territory</option> 
     <option>Queensland</option> 
     <option>South Australia</option> 
     <option>Tasmania</option> 
     <option>Victoria</option> 
     <option>Western Australia</option> 
     </select> 

    <label for="deadseal" class="formlabel">Death certificate</label> 
     <input id="deadseal" name="deadseal" type="file" class="forminput" /> 
</fieldset>

En el ejemplo anterior, la fecha de nacimiento tiene un extra <div> abarrotando las cosas. Puede deshacerse de él si ajusta las barras de fecha como parte del pseudo-elemento :after cuando sea necesario.

salga bien en Opera 11.60, Firefox 11, Google Chrome 18 e Internet Explorer 8.

Fuente

2012-04-16 18:46:38 random

0

HTML

<form> 
<div id="personal_name"> 
<label>Name</label> 
<input name="name" /> 
</div> 
</form>

CSS

form 
{display: table} 
#personal_name 
{display: table-row} 
#personal_name input, #personal_name label 
{display: table-cell}

creo que esto es suficiente.

Fuente

2016-03-06 08:22:18 Walkinraven

Cuestiones relacionadas

 Cuestiones relacionadas