Foros del Web » Creando para Internet » CSS »

Formulario de tablas a css (ayuda)

Estas en el tema de Formulario de tablas a css (ayuda) en el foro de CSS en Foros del Web. Buenas compis, Me propongo a pasar un formulario de contacto hecho en tablas a CSS, ya que he leido que es mejor, menos código, mas ...
  #1 (permalink)  
Antiguo 17/03/2008, 06:26
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Formulario de tablas a css (ayuda)

Buenas compis,

Me propongo a pasar un formulario de contacto hecho en tablas a CSS, ya que he leido que es mejor, menos código, mas accesibilidad, etc...

Os pongo los dos codigos, uno con tablas y otro con CSS

El problema que se me presenta es en de CSS los inputs quedan pegados a los labels, en cambio con tablas me quedan alineados perfectamente. Cómo puedo conseguir el mismo efecto?

Y otra pregunta es que intento aprender de una vez como aplicarle propiedades a un elemento concreto... por ej. si quiero que los labels sean negrita y mi formulario se llama "contactar_css" haria algo así

Código:
#contactar_css label {
	font-weight:bold;
	}
Pero si quiero aplicarle un tipo de efecto a los inputs si hago algo así... NO me funciona!

Código:
#contactar_css input .bginput{
	color:#333333;
	border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
	border-width:1px;
	border-style:solid;
	height:20px;
	width:150px;
	font-size:11px;
	padding:2px 5px 0px 10px;
	margin:7px 5px 5px 5px;
	background-color: #F7F4FF;
	}
Tengo que recurrir a poner un class a parte como en el ej.

FORMULARIO CON TABLAS
Código HTML:
<html>
<head>
<title>Formulario con Tablas</title>
    <style type="text/css">
	/* ESTE NO VA */
	#contactar_tablas{
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:12px;
	}
	  
	.bginput{
	color:#333333;
	border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
	border-width:1px;
	border-style:solid;
	height:20px;
	width:150px;
	font-size:12px;
	padding:2px 5px 0px 10px;
	margin:7px 5px 5px 5px;
	background-color: #F7F4FF;
	}
	
    .textcomentario {
	color:#333333;
	border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
	border-width:1px;
	border-style:solid;
	width:300px;
	font-size:12px;
	padding:2px 5px 0px 10px;
	margin:7px 5px 5px 5px;
	background-color: #F7F4FF;
	}
	
	p{
	font-size:11px;
	}
	
    </style>
</head>
<body>
<h4>Contactar</h4>
<form id="contactar_tablas" method="post" action="#">
	<table>
	<thead>
		<tr><td colspan="2">
		<p>Puedes utilizar este formulario para enviarnos cualquier tipo de información, pregunta o comentario relacionado con la web.</p>
		</td></tr>
	</thead>
	<tbody>
		<table width="500" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
			<tr> 
			  <td width="200" valign="top"></td>
			  <td width="300" valign="top">&nbsp;</td>
			</tr>
			
			<tr> 
			  <td width="200" align="left" valign="middle">*Nombre:</td>
			  <td width="300" align="left" valign="middle"><input name="nombre" size="30" class="bginput" tabindex="5"/></td>
			</tr>
			
			<tr> 
				<td width="200" align="left" valign="middle">*Correo electrónico:</td>
				<td width="300" align="left" valign="middle"><input name="email" size="30" class="bginput" tabindex="6"/></td>
			</tr>
			
			<tr> 
				<td width="200" align="left" valign="middle">*Pais:</td>
				<td width="300" align="left" valign="middle"><input name="pais" size="30" class="bginput" tabindex="7"/></td>
			</tr>
			
			<tr> 
				<td width="200" align="left" valign="middle">*Asunto del Mensaje:</td>
				<td width="300" align="left" valign="middle"><input name="asunto" size="30" class="bginput" value="" tabindex="8"/></td>
			</tr>
			
			<tr> 
				<td width="200" align="left" valign="top">*Texto:</td>
				<td width="300" align="left" valign="top"><textarea name="texto" rows="5" cols="29" class="textcomentario" tabindex="9"></textarea></td>
			</tr>
			
			<tr align="right"> 
				<td width="200" valign="top"></td>
				<td width="300" valign="top">&nbsp;</td>
			</tr>
			
			<tr align="right"> 
				<td colspan="2"> <input name="submit" type="submit" value="Enviar" class="boton_enviar"/></td>
			</tr>
	</tbody>
	</table>
</form> <!-- Fin formulario -->
</body>
</html> 

FORMULARIO CON CSS
Código HTML:
<html>
<head>
<title>Formulario con CSS</title>
    <style type="text/css">
  
	#contactar_css{
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:12px;
	}
	#contactar_css input{
	font-size:12px;
	}
	
	#contactar_css fieldset{
	font-size:12px;
	border:0;
	}
	
	#contactar_css label {
	font-weight:bold;
	}
	
	/* NO VA */
	#contactar_css input .bginput{
	color:#333333;
	border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
	border-width:1px;
	border-style:solid;
	height:20px;
	width:150px;
	font-size:11px;
	padding:2px 5px 0px 10px;
	margin:7px 5px 5px 5px;
	background-color: #F7F4FF;
	}
    
	.bginput{
	color:#333333;
	border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
	border-width:1px;
	border-style:solid;
	height:20px;
	width:150px;
	font-size:12px;
	padding:2px 5px 0px 10px;
	margin:7px 5px 5px 5px;
	background-color: #F7F4FF;
	}
	
    </style>
</head>
<body>
<h4>Contactar</h4>
Puedes utilizar este formulario para enviarnos cualquier tipo de información, pregunta o comentario relacionado con la web.
<form id="contactar_css" method="post" action="#">
	<fieldset>
	<legend></legend>
	<label for="nombre">*Nombre:</label><input type="text" name="nombre" class="bginput" /><br />
	<label for="correo">*Correo electrónico:</label><input type="text" name="correo" class="bginput" /><br />
	<label for="pais">*Pais:</label><input type="text" name="pais" class="bginput" /><br />
	<label for="asunto">*Asunto del Mensaje:</label><input type="text" name="asunto" class="bginput" /><br />    
	<label for="texto">*Texto:</label><input type="text" name="texto" class="bginput" /><br />
	<input name="submit" type="submit" value="Enviar" class="boton_enviar"/>
</fieldset>

</form>
</body>
</html> 

Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 17/03/2008, 06:43
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Formulario de tablas a css (ayuda)

mira yo lo hago asi: http://blog.costadelaespada.com/deta...articulo=11076
  #3 (permalink)  
Antiguo 17/03/2008, 06:48
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Formulario de tablas a css (ayuda)

Cita:
Iniciado por Eourus Ver Mensaje
Pero tu pones la etiqueta arriba de cada input.

Yo la quiero a la izquierda tal y como la tengo, pero con una separación igual para cada input, de forma que queden alineados verticalmente.

Gracias
  #4 (permalink)  
Antiguo 17/03/2008, 06:51
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Formulario de tablas a css (ayuda)

puedes cambiar la propiedad al css. Añadele por ejemplo "float:left; width:200px;" a la etiqueta "label"
  #5 (permalink)  
Antiguo 17/03/2008, 07:19
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Formulario de tablas a css (ayuda)

Cita:
Iniciado por Eourus Ver Mensaje
puedes cambiar la propiedad al css. Añadele por ejemplo "float:left; width:200px;" a la etiqueta "label"
Sigue quedando arriba del input
  #6 (permalink)  
Antiguo 17/03/2008, 07:22
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Formulario de tablas a css (ayuda)

A ver, te copio y pego:

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>Documento sin t&iacute;tulo</title>
</head>

<style type="text/css">

	#formulario { font:11px arial; width:460px;}
	#formulario form { margin:0px; padding:0px; }
	#formulario fieldset { border:1px solid #ccc; }
	#formulario legend { font-weight:bold; color:#666; }
	#formulario label { font-weight:bold; display:block; width:100px; float:left; }
	#formulario input, select, textarea { font:11px arial; background-color:#ddd; border:1px solid #666; }
	#formulario input:focus, select:focus, textarea:focus { background:#FFFFB9}
	#formulario br { display:block; margin-bottom:10px; clear:both; }

</style>

<body>

<div id="formulario">
	<form action="#" method="post" name="registro">
	
		<fieldset>
		<legend>Datos Personales</legend>
	
			<label for="formnombre">Nombre:</label>
			<input type="text" name="nombre" id="formnombre" size="40" />
			<br />
			
			<label for="formapellidos">Apellidos:</label>
			<input type="text" name="apellidos" id="formapellidos" size="40" />
			<br />
		
		</fieldset>
		
		<br />
		
		<fieldset>
		<legend>Otros Datos:</legend>
		
			<label for="formusu">Usuario:</label>
			<input type="text" name="usuario" id="formusu" size="40" maxlength="20" />
			<br />
			
			<label>Password:</label>
			<input type="password" name="password" id="formpass" size="40" maxlength="20" />
			<br />
			
			<br />
			
			<input type="submit" name="registrarse" value="registrarse" />			
		
		</fieldset>
	
	</form>
</div>

</body>
</html>

  #7 (permalink)  
Antiguo 17/03/2008, 09:06
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Formulario de tablas a css (ayuda)

Muchas gracias Eourus!

Ya estoy mas cerca de conseguir aspecto del formulario.

contactar.php
Código HTML:
<div id="form_contactar">
	<form action="#" method="post" name="form_contactar">
		<fieldset>
		<legend></legend>
	
			<label for="nombre">* Nombre:</label>
			<input type="text" name="nombre" id="formnombre" size="40" tabindex="5"/>
			<br />
			
			<label for="correo">* Correo electrónico:</label>
			<input type="text" name="correo" id="correo" size="40" tabindex="6"/>
			<br />
			
			<label for="pais">* Pais:</label>
			<input type="text" name="apellidos" id="pais" size="40" tabindex="7"/>
			<br />
			
			<label for="asunto">* Asunto del Mensaje:</label>
			<input type="text" name="asunto" id="asunto" size="40" tabindex="8"/>
			<br />
			
			<label for="comentario">* Comentario:</label>
			<textarea name="texto" rows="5" cols="29" class="textcomentario" tabindex="9"></textarea>
			<br />
			
			<input class="boton_enviar" type="submit" name="enviar"  value="Enviar" />
		</fieldset>
		
		<br />
		<fieldset>
	</form>
</div> <!-- Fin formulario --> 
estilo.css

Código HTML:
#form_contactar { font:12px arial; width:500px;}
#form_contactar { margin:0px; padding:0px; }
#form_contactar fieldset { }
#form_contactar legend { }
#form_contactar label { font-weight:normal; display:block; width:150px; float:left; }
#form_contactar input, select { 
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:18px;
width:150px;
font-size:11px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
#form_contactar textarea { 
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
width:300px;
font-size:12px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
#form_contactar textarea:focus { background-color: #ECF0FF;}
#form_contactar input:focus, select:focus  { background:#ECF0FF;}
#form_contactar br { display:block; margin-bottom:5px; clear:both; }

#form_contactar .boton_enviar{
background-color:#418FC2;
border:medium none;
color:#FFFFFF;
font-weight:bold;
padding:2px 7px 1px;
width:60px;
height:25px;
float:right;
}

No consigo que el texto de la etiqueta LABEL quede centrado verticalmente respecto al input, me queda arriba del todo.

Sabes como hacerlo?

ARREGLADO: he puesto un padding-top al label y me lo situa donde quiero


Y otra pregunta para que sirve el size="40" de los inputs?
En teoria es el tamaño de la caja no? pero si ya le doy un valor width de 150px , realmente me sirve de algo el size="40"?

Y por último el efecto focus se me ve de lujo en firefox pero en IE no funciona. No hay solución?

Gracias por todo!

Edito: Sigo teniendo la duda del size y pq no se ve en IE el focus

Última edición por neodani; 17/03/2008 a las 09:30
  #8 (permalink)  
Antiguo 17/03/2008, 09:55
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Formulario de tablas a css (ayuda)

Lo del size si que es para el tamaño, pero como bien dices, si le pones que tiene un width cogerá este último. Puedes jugar con cualquiera de los dos ;)

Respecto lo del focus, es algo que como bien dices no funciona en IE, aunque tal vez en la versión 8 si lo haga ...
  #9 (permalink)  
Antiguo 17/03/2008, 10:04
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Formulario de tablas a css (ayuda)

Cita:
Iniciado por Eourus Ver Mensaje
Lo del size si que es para el tamaño, pero como bien dices, si le pones que tiene un width cogerá este último. Puedes jugar con cualquiera de los dos ;)

Respecto lo del focus, es algo que como bien dices no funciona en IE, aunque tal vez en la versión 8 si lo haga ...
Muy bien, muchas gracias por todo.

Una ultima pregunta sobre la accesibilidad en el formulario, hago bien añadiendo estos atributos de accesskey?

Código HTML:
<label for="nombre">* Nombre:</label>
								<input type="text" name="nombre" id="nombre" size="40" tabindex="5" accesskey="n"/>
								<br />
								
								<label for="correo">* Correo electrónico:</label>
								<input type="text" name="correo" id="correo" size="40" tabindex="6" accesskey="e"/>
								<br />
								
								<label for="pais">* Pais:</label>
								<input type="text" name="apellidos" id="pais" size="40" tabindex="7" accesskey="p"/>
								<br /> 
He leido que solon se utilizan en elementos <a> de enlaces??
  #10 (permalink)  
Antiguo 17/03/2008, 10:21
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Formulario de tablas a css (ayuda)

Mmm, ahi ya me has pillado, puesto que nunca he utilizado acceskey. No obstante yo creo que es para que cuando pulse una combinación de teclas + letras definida se vaya a dicho campo.

Pero no me hagas muchos caso ;)
  #11 (permalink)  
Antiguo 19/03/2008, 10:17
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Formulario de tablas a css (ayuda)

Hola neodani, mira estos enlaces:

http://outbook.blogspot.com/2007/04/...accesskey.html
http://html.conclase.net/w3c/html401...html#h-17.11.2

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




La zona horaria es GMT -6. Ahora son las 17:36.