Form

MMCQ · #1 (**permalink**) 24/01/2007, 14:56

Alguien me podria ayudar hacer el css de este formulario . lo que quiero es que lo input este a la Derecha y el Texto a la Izquierda con estilo Bold. y que el espacio que tenga el texto sea de width:75px;

Cita:

<form id="form1" name="form1" method="post" action="" >

<p>Username: <input type="text" name="username"/></p>
<p>Password: <input type="password" name="password"/></p>
<p>Retype Password: <input type="password" name="password2/></p>
<p>Email: <input type="text" name="email"/></p>
<p>
Country:
<select name="pais">
<option>Select...</option>
<option>---</option>
</select>
</p>
City:
<select name="ciudad">
<option>Select...</option>
<option>---</option>
</select>
</p>
<p>Bith Year: <input type="text" name="bithday"/></p>
<p>Gender:
<input type="radio" name="genero" value="male" />Male
<input type="radio" name="genero" value="female" /> Female
</p>
<input type="submit" name="Submit" value="Enviar" />

</form>

alexblue · #2 (**permalink**) 24/01/2007, 16:11

Hola MMCQ:

Te adjunto el código HTML y CSS para este formulario:

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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="styles.css" type="text/css" />
    <title>Título de tu página</title>
</head>

<body>

	<form id="form1" name="form1" method="post" action="" >

		<p>
			<label>Username:</label>
			<input type="text" name="username" />
		</p>
		<p>
			<label>Password:</label>
			<input type="password" name="password"/>
		</p>
		<p>
			<label>Retype Password:</label>
			<input type="password" name="password2" />
		</p>
		<p>
			<label>Email:</label>
			<input type="text" name="email" />
		</p>
		<p>
			<label>Country:</label>
			<select name="pais">
				<option>Select...</option>
				<option>---</option>
			</select>
		</p>
		<p>
			<label>City:</label>
			<select name="ciudad">
				<option>Select...</option>
				<option>---</option>
			</select>
		</p>
		<p>
			<label>Bith Year:</label>
			<input type="text" name="bithday"/></p>
		<p>
			<label>Gender:
			<input type="radio" name="genero" value="male" />Male
			<input type="radio" name="genero" value="female" /> Female
		</p>
			<input type="submit" name="Submit" value="Enviar" />
	</form>
</body>
</html>

Código:

label {
	float:left;
	font-weight:bold;
	width:75px;
}

p {
	clear:both;
}

Espero que te sea de ayuda.

Suerte!