Alinear Formulario

carlosuc99 · #1 (**permalink**) 01/06/2012, 07:59

Buenas,

Tengo el siguiente formulario:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registro</title>
</head>

<body>

<form action="registro.php" method="POST">
<font face="Arial, Helvetica, sans-serif">Nombre y Apellidos:</font> <input type="text" name="user" /><br />
<font face="Arial, Helvetica, sans-serif">E-mail:</font> <input type="text" name="user" /><br />
<font face="Arial, Helvetica, sans-serif">Password:</font> <input type="text" name="user" /><br />
<font face="Arial, Helvetica, sans-serif">ID VATSIM:</font> <input type="text" name="user" /><br />
<font face="Arial, Helvetica, sans-serif">País:</font> <input type="text" name="user" /><br />
<font face="Arial, Helvetica, sans-serif">Skype:</font> <input type="text" name="user" /><br />
</form>

</body>
</html>

Y me gustaría hacer que todos los huecos para escribir los datos aparecieran alineados, no que cada uno comienza el acabar el texto, si no el texto comienza en una columna todo alineado y el hueco en otra todo alineado.

También me gustaría hacer que aparezca más espacio entre cada columna

IsaBelM · #2 (**permalink**) 01/06/2012, 14:08

usa tablas

emprear · #3 (**permalink**) 01/06/2012, 23:14

Descartá el uso de <font> y estilizá con css
Para la alineación, utilizá la eqtiqueta <label> aplicale la propiedad

display: inline-block;
+más un ancho fijo
y jugá con los márgenes para espaciarlas

Ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
input{
margin: 0;
}
 
label{
display: inline-block;
width: 180px;
margin-right: 20px;
}
input[type="text"]{
margin-bottom: 5px;
}
/*]]>*/
</style>
</head>
<body>
<form action="#">
<div>
<label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" /><br />
<label for="apellido">Apellido</label> <input type="text" id="apellido" name="apellido" /><br />
<label><!-- fix --></label> <input type="submit" name="procesar" /> 
</div>
</form>
</body>
</html>

Saludos

carlosuc99 · #4 (**permalink**) 02/06/2012, 08:16

Cita:

Iniciado por emprear

Descartá el uso de <font> y estilizá con css
Para la alineación, utilizá la eqtiqueta <label> aplicale la propiedad

display: inline-block;
+más un ancho fijo
y jugá con los márgenes para espaciarlas

Ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
input{
margin: 0;
}
 
label{
display: inline-block;
width: 180px;
margin-right: 20px;
}
input[type="text"]{
margin-bottom: 5px;
}
/*]]>*/
</style>
</head>
<body>
<form action="#">
<div>
<label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" /><br />
<label for="apellido">Apellido</label> <input type="text" id="apellido" name="apellido" /><br />
<label><!-- fix --></label> <input type="submit" name="procesar" /> 
</div>
</form>
</body>
</html>

Saludos

Funciona de lujo, pero cómo puedo cambiar el tipo de letra??? Y dejar más espacio entre cada columna????

emprear · #5 (**permalink**) 02/06/2012, 08:25

Cita:

Funciona de lujo, pero cómo puedo cambiar el tipo de letra??? Y dejar más espacio entre cada columna????

Por el tipo de pregunta, creo que deberías empezar a leer un poco de Css
http://www.librosweb.es/css/index.html

mientras tanto, lo que dice margin-right representa el margen derecho para la etiqueta <label>, si l aumentas aumenta la separación.
en css, la propiedad que cambia el tipo de fuente es "font-family", y un detalle final. para alinear el botón, he puesto un <label> sin contenido, tan solo le puse un comentario dentro

Saludos

carlosuc99 · #6 (**permalink**) 02/06/2012, 08:33

Oye otra cosa, al poner en type password, se me junta con el casillero de abajo.

emprear · #7 (**permalink**) 02/06/2012, 14:40

http://www.librosweb.es/css/capitulo...avanzados.html
saludos