Necesito crear un formulario para la entrada de datos, digamos FirstName y LastName. Sé cómo hacer esto con una mesa. En el primer <td> pondría una etiqueta y en el segundo utilizaría una etiqueta de entrada con un atributo type="text". De esta forma, las etiquetas y los cuadros de texto se alinearían en dos columnas.Diseño de formulario HTML con CSS
¿Hay alguna manera de hacer esto con CSS?
CSS trabajará muy bien - si estás bien con la participación en anchos de píxeles para cosas Pero, lamentablemente, se produce un error cuando se necesita para localizar sus cuerdas y descubrir etiquetas no encajan. Para un formulario de entrada de dirección, me quedaría con el uso de Tablas, ya que hacen todo el correcto ajuste de tamaño y comportamiento de envolvente y trabajo sin problemas en casi todos los navegadores que hay.
EDIT: Me pregunto si alguno de los votantes que no votaron ha comprobado el diseño de estos S.O. páginas
Algo, estoy de acuerdo. CSS es bueno en teoría, y sería genial si funcionaba bien, pero cada vez que trato de usarlo para el diseño, me paso horas probando y depurando para lograr lo que podría haber hecho en unos pocos minutos con las tablas. Entonces, una vez que lo hago funcionar, ¡no se ve bien en otro navegador! – PTBNL
¡Apuesto a que a ustedes también les gusta codificar en tarjetas perforadas! –
Tal vez solo necesite más práctica con CSS. Además, las personas con lectores de pantalla y similares DEFINITIVAMENTE te odiarán. – patricksweeney
Una buena manera de hacerlo es instalar Firebug en Firefox e inspeccionar elementos en sitios web que implementen esto realmente bien.
Hay una gran smashing maagzine on sign up forms. Se pueden ver varios enfoques en CSS, con algunos ejemplos realmente geniales.
NO necesita tablas para hacer grandes formularios HTML. De hecho, ¡no los quieres! Prueba este código en su casa y ver lo que piensa ..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>
<LINK href="main2.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
fieldset.nested
{
position: relative;
margin-top: 15px;
}
fieldset.nested legend
{
position: absolute; top: -8px; left: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div>
<form>
<fieldset class="main">
<legend>Contact info</legend>
<fieldset class="nested">
<legend>Name</legend>
<ol>
<li>
<label for="textboxName">Name</label>
<input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxName" >Title</label>
<input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCompany">Company</label>
<input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Address</legend>
<ol>
<li>
<label for="textboxAddress1" >Street address</label>
<input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxAddress2" >Street address</label>
<input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCity" >City</label>
<input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxRegion" >City/Region</label>
<input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxPostalCode" >Postal code</label>
<input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCountry" >Country</label>
<input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Phone numbers</legend>
<ol>
<li style="display:none">
<label for="textboxName" >Name</label>
<input id="text1" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li style="display:none">
<label for="textboxAddress1" >Address</label>
<input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
</li>
<li>
<label for="textboxAddress2" >Phone</label>
<input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<div class="buttonsContainer">
<input class="button" type="submit" value="OK" />
<input class="button" type="button" value="Cancel" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
fieldset.main
{
margin: 1.5em 0 0 1.5em;
padding: 1em 0 0 0;
width: 400px;
font-size: .9em;
}
fieldset.main legend
{
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset.main ol
{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset.main li
{
padding-bottom: .5em;
}
fieldset.main ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
fieldset.nested
{
margin: 0 0 1em 1em;
padding: 0;
width: 93%;
font-size: .8em;
border: 1px solid gray;
background: #B0C4DE;
}
fieldset.nested legend
{
margin-left: 1em;
font-weight: normal;
font-size: .9em;
color: black;
background-color: white;
padding: 0 1em 0 1em;
border: 1px solid black;
}
fieldset.nested ol
{
padding: 0 1em 0 1em;
list-style: none;
}
fieldset.nested li
{
/* Control leading between rows. */
padding-bottom: .7em;
}
fieldset.nested ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
input.button
{
/* border-style: none; */
width: 6em;
height: 2.5em;
}
div.buttonsContainer
{
float: right;
margin: 1em 1em 1em 0;
}
+1 - BAM! Exactamente lo que estaba buscando. ¿Podría alguien explicar la importancia de los estilos específicos de IE y por qué son específicos de IE? –
GUARDA - tutorial que tiene etiquetas BR en HTML y eso no es bueno –
@OlegMikheev que pueda ponga cada línea de forma en '
' para evitar el uso de ''. –