Foros del Web » Diseño web » CSS »

Maquetar formularios: ¿Tablas o DIV?

Estas en el tema de Maquetar formularios: ¿Tablas o DIV? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/10/2005, 12:46
 
Fecha de Ingreso: septiembre-2005
Mensajes: 94
Antigüedad: 9 años
Puntos: 0
Maquetar formularios: ¿Tablas o DIV?

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.
  #2 (permalink)  
Antiguo 14/10/2005, 14:29
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 9 años, 7 meses
Puntos: 9
Si te parecen nesesarias, usalas.
  #3 (permalink)  
Antiguo 14/10/2005, 15:46
Avatar de Bio
Bio
 
Fecha de Ingreso: diciembre-2003
Ubicación: México DF
Mensajes: 180
Antigüedad: 10 años, 9 meses
Puntos: 0
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.
  #4 (permalink)  
Antiguo 14/10/2005, 16:41
 
Fecha de Ingreso: septiembre-2005
Mensajes: 94
Antigüedad: 9 años
Puntos: 0
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!
  #5 (permalink)  
Antiguo 14/10/2005, 17:06
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 5 meses
Puntos: 0
prueba con listas de definicion <dt><dd><dl>
  #6 (permalink)  
Antiguo 14/10/2005, 19:00
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 10 años, 3 meses
Puntos: 4
para que complicarse la vida simulando tablas con divs, no veo nada de malo usar tablas para mostrar un formulario..
__________________
Internet Explorer SuckS
Download FireFox
  #7 (permalink)  
Antiguo 14/10/2005, 19:39
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 10 años, 3 meses
Puntos: 0
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
  #8 (permalink)  
Antiguo 14/10/2005, 20:33
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 12 años, 5 meses
Puntos: 3
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
  #9 (permalink)  
Antiguo 16/10/2005, 20:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 7.326
Antigüedad: 11 años, 6 meses
Puntos: 1504
Core, interesante solución de 2 columnas.
  #10 (permalink)  
Antiguo 01/11/2005, 15:53
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 9 años, 11 meses
Puntos: 0
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 !!!
  #11 (permalink)  
Antiguo 01/11/2005, 15:58
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 12 años, 5 meses
Puntos: 3
Hola

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

saludos
  #12 (permalink)  
Antiguo 01/11/2005, 15:59
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 12 años, 5 meses
Puntos: 3
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
  #13 (permalink)  
Antiguo 07/05/2006, 07:01
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.848
Antigüedad: 10 años, 7 meses
Puntos: 20
El formulario es sobervio, pero no funciona en Nesacafe 7.0.

Que peculiar, y en la reliquia de IE 5.0 va de maravilla...
__________________
Ahora utilizo {PHP-5.4.19-NTS}
Y por que?
Por que me lo han sugerido en PHP de Manera Correcta
  #14 (permalink)  
Antiguo 08/05/2006, 22:05
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 289
Antigüedad: 9 años, 1 mes
Puntos: 4
N ose mucho de maquetar formularios, pero he encontrado esta direccion que tiene muy buena pinta:

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

Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:56.
SEO by vBSEO 3.3.2