Maquetar formularios: ¿Tablas o DIV?

raul123 · #1 (**permalink**) 14/10/2005, 12:46

Buenas,
Estoy intentando hacer mi sitio usando sólo capas DIV pero cuando necesito alinear demasiados elementos(como ocurre con un formulario) , veo que las tablas son necesarias.
Hay algún estándar para hacer formularios?
Me gustaría saber cómo lo hace la gente de por aquí, saber vuestras opiniones.
Un saludo y muchas gracias a todos.

programeitor · #2 (**permalink**) 14/10/2005, 14:29

Si te parecen nesesarias, usalas.

Bio · #3 (**permalink**) 14/10/2005, 15:46

Por lo general los formularios aunque llevan muchos elementos, estos estan alineados igual. Puedes agregar una clase a esto elemento y asi alinearlos todos al mismo tiempo. Si das mas detalles de como esta organizado el formulario quiza te podriamos ayudar mas.

raul123 · #4 (**permalink**) 14/10/2005, 16:41

Lo que pretendo es hacer un formulario típico con los campos de nombre, contraseña, email, etc. En cada fila un par etiqueta-campo.
La respuesta ya la he encontrado aquí; echadle un ojo, es bastante intuitivo y sencillo:

http://platea.cnice.mecd.es/~jmas/ma...cticoscss.html

Muchas gracias!

RoQ · #5 (**permalink**) 14/10/2005, 17:06

prueba con listas de definicion <dt><dd><dl>

SiR.CARAJ0DIDA · #6 (**permalink**) 14/10/2005, 19:00

para que complicarse la vida simulando tablas con divs, no veo nada de malo usar tablas para mostrar un formulario..

ramm · #7 (**permalink**) 14/10/2005, 19:39

Yo no uso ni divs ni tablas, los formularios se pueden formatear directamente aplicando los estilos a los elemetos dle form.

Pueden ver un ejemplo aqui: www.icad.com.ve/contacto.php

CORE · #8 (**permalink**) 14/10/2005, 20:33

Bien ni uses capas ni uses tablas ni uses elementos de lista

el html esta hecho para hacer todo bien y existe un etiqeuta para casi todo

un ejemplo que acabo de hacer seria asi

Código HTML:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#form1 label {
	width: 100px;
	display: block;
	float:left;
	background-color: #E8EBEC;
	padding:2px;
	margin:2px;
	cursor:pointer;
}

#form1 label:hover {
	background-color: #DCE1E2;
	cursor:pointer;
}

input,select{
	margin:2px;	
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:60%;
}

fieldset{
	float: left;
	width: 30%;
	display: block;
}
body {
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
</head>

<body><form id="form1" method="post" action=""><fieldset><legend>Altas de Bibliotecario</legend>
    <label for="nombre">nombre</label><input name="nombre" type="text" id="nombre" /><br />
    <label for="apellidom">apellido m</label><input type="text" name="apellidom" id="apellidom" /><br />
    <label for="apellidop">apellido p</label><input type="text" name="apellidop" id="apellidop" /><br />
    <label for="telefono">telefono</label><input type="text" name="telefono" id="telefono" /><br />    
	<label for="direccion">direccion</label><input type="text" name="direccion" id="direccion" /><br />
	<label for="sexo">sexo</label>
	<select name="sexo" id="sexo">
        <option value="m">Masculino </option>
        <option value="f">Femenino </option>
	</select>
</fieldset><fieldset>
<legend>Identificaci&oacute;n</legend>
<label for="login">login</label><input type="text" name="login" id="login" /><br />
<label for="pass">password</label><input type="password" name="pass" id="pass" /><br />
<label for="cargo">cargo</label>
<select name="cargo" id="cargo">
        <option value="A">Administrtador</option>
        <option value="B">Bibliotecario </option>
 </select>
</fieldset>
</form>
</body>
</html>

saludos

Rafael · #9 (**permalink**) 16/10/2005, 20:19

Core, interesante solución de 2 columnas.

jotamachuca · #10 (**permalink**) 01/11/2005, 16:53

Cita:

Iniciado por CORE

Bien ni uses capas ni uses tablas ni uses elementos de lista

el html esta hecho para hacer todo bien y existe un etiqeuta para casi todo

un ejemplo que acabo de hacer seria asi

Código HTML:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#form1 label {
	width: 100px;
	display: block;
	float:left;
	background-color: #E8EBEC;
	padding:2px;
	margin:2px;
	cursor:pointer;
}

#form1 label:hover {
	background-color: #DCE1E2;
	cursor:pointer;
}

input,select{
	margin:2px;	
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:60%;
}

fieldset{
	float: left;
	width: 30%;
	display: block;
}
body {
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
</head>

<body><form id="form1" method="post" action=""><fieldset><legend>Altas de Bibliotecario</legend>
    <label for="nombre">nombre</label><input name="nombre" type="text" id="nombre" /><br />
    <label for="apellidom">apellido m</label><input type="text" name="apellidom" id="apellidom" /><br />
    <label for="apellidop">apellido p</label><input type="text" name="apellidop" id="apellidop" /><br />
    <label for="telefono">telefono</label><input type="text" name="telefono" id="telefono" /><br />    
	<label for="direccion">direccion</label><input type="text" name="direccion" id="direccion" /><br />
	<label for="sexo">sexo</label>
	<select name="sexo" id="sexo">
        <option value="m">Masculino </option>
        <option value="f">Femenino </option>
	</select>
</fieldset><fieldset>
<legend>Identificaci&oacute;n</legend>
<label for="login">login</label><input type="text" name="login" id="login" /><br />
<label for="pass">password</label><input type="password" name="pass" id="pass" /><br />
<label for="cargo">cargo</label>
<select name="cargo" id="cargo">
        <option value="A">Administrtador</option>
        <option value="B">Bibliotecario </option>
 </select>
</fieldset>
</form>
</body>
</html>

saludos

Hola a todos

Disculpen por revivir este viejo post, pero tengo unas dudas que quizas pueden servir en este post

El detalle que encontré, es que nuestro amigo CORE utiliza la etiqueta <br> para indicar los saltos de linea que desea utilizar. La pregunta es si estos pueden ser omitidos, o sea, con css indicar que despues de un input tiene que existir un salto de linea.

Segun lo poco que se de CSS, la idea es que el contenido este separado de la visualización, con los <br> se estaria "controlando" un poco la visualización del contenido, o no??? me pasé a revoluciones ???

Esop..

Saludos !!!

CORE · #11 (**permalink**) 01/11/2005, 16:58

Hola

para estos casos lo mejor es usar un clear:both;
y para hacerles un espacio un margin-bottom:10px;

saludos

CORE · #12 (**permalink**) 01/11/2005, 16:59

el estilo deberia de quedar algo asi

input,select{
margin:2px;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:60%;
clear:both; margin-bottom:10px;
}

saludos

Anarko · #13 (**permalink**) 07/05/2006, 07:01

El formulario es sobervio, pero no funciona en Nesacafe 7.0.

Que peculiar, y en la reliquia de IE 5.0 va de maravilla...

mbavio · #14 (**permalink**) 08/05/2006, 22:05

N ose mucho de maquetar formularios, pero he encontrado esta direccion que tiene muy buena pinta:

http://jeffhowden.com/code/css/forms/

Saludos.