Formulario de tablas a css (ayuda)

neodani · #1 (**permalink**) 17/03/2008, 05:26

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.

Eourus · #2 (**permalink**) 17/03/2008, 05:43

mira yo lo hago asi: http://blog.costadelaespada.com/deta...articulo=11076

neodani · #3 (**permalink**) 17/03/2008, 05:48

Cita:

Iniciado por Eourus

mira yo lo hago asi: http://blog.costadelaespada.com/deta...articulo=11076

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

Eourus · #4 (**permalink**) 17/03/2008, 05:51

puedes cambiar la propiedad al css. Añadele por ejemplo "float:left; width:200px;" a la etiqueta "label"

neodani · #5 (**permalink**) 17/03/2008, 06:19

Cita:

Iniciado por Eourus

puedes cambiar la propiedad al css. Añadele por ejemplo "float:left; width:200px;" a la etiqueta "label"

Sigue quedando arriba del input

Eourus · #6 (**permalink**) 17/03/2008, 06:22

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>

neodani · #7 (**permalink**) 17/03/2008, 08:06

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

Eourus · #8 (**permalink**) 17/03/2008, 08:55

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 ...

neodani · #9 (**permalink**) 17/03/2008, 09:04

Cita:

Iniciado por Eourus

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??

Eourus · #10 (**permalink**) 17/03/2008, 09:21

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 ;)

kahlito · #11 (**permalink**) 19/03/2008, 09:17

Hola neodani, mira estos enlaces:

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