Autor Tema: Maquetar formulario con xhtml descuadrado usando CSS para alinear elementos (Leído 3679 veces)

invitado · « **en:** 11 de Junio 2015, 16:33 »

Hola, me pasaron un formulario que estoy intentando añadirle cosas y modificarlo
pero se me descuadran y no se ponen una debajo del otra... He intentado ponerle <br>, <td>, <tr>... pero no me se queda bien del todo lo ideal seria que se quedara :

es antiguo alumno? ( todo seguido y sin que alumno este debajo, que no se como cambiarlo)

estudios ( elige el mayor)

y los grados debajo

idiomas ( otro bloque separado del formulario principal )

nivel de valenciano

nivel de ingles

certificacion ingles

y debajo de certificacion ingles enviar - borrar

lo siento si pido mucho , pero no he encontrado que puede ser que estoy haciendo mal ...

Código: [Seleccionar]

<!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>Informacion sobre el producto</title>
<link rel="stylesheet" type="text/css" href="formulario2.css" media="screen" />
<style type="text/css">
form{
width:35%;
}
form fieldset#datos{
background-color:salmon;
}
form fieldset#idiomas{
background-color:lightgreen;
}

</style>
</head>
<body>
<h1> REGISTRO USUARIOS </h1>
<form action="mailto:thechosenachievement@gmail.com" enctype="text/plain">
<fieldset id="datos">
<legend>Datos Usuario</legend>
<table>
<tr> 
<td><label for="NIF">NIF</label></td>
<td><input type="text" name="NIF" id="NIF" size="10"/></td>
</tr>
<tr>
<td><label for="nombre">Nombre y apellidos </label></td>
<td><input type="text" name="nombre y apellidos" id="nombre y apellidos" size="30" /></td>
</tr>

<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email" id="email" size="30" /></td>
</tr>

<tr>
<td><label for="telefono">Telefono</label></td>
<td><input type="text" name="telefono" id="telefono" size="30" /></td>
</tr>

<tr>
<td><label for="password">password</label></td>
<td><input type="password" name="password" id="password" size="10"/></td>
</tr>

<tr>
<td><label for="observaciones">Observaciones</label></td>
<td><textarea name="observaciones" id="observaciones"></textarea></td>
</tr>

<tr>
<td>fecha</td>
<td><input type="date" name="fecha"></td>
</tr>

<tr>
<td><label for="curriculum vitae">curriculum vitae</label></td>
<td><input type="file" id="curriculum vitae"/></td>
</tr>

<tr>
<td><label><input type="checkbox" name="alumno" value="¿ es antiguo alumno?"/>¿es antiguo alumno?</label></td>
</tr>


<td><br>Estudios (Elige el mayor)<br/><td>
<label><input type="radio" name="estudios" value="eso"/> ESO</label></br>
<label><input type="radio" name="estudios" value="grado"/> Grado Medio</label></br>
<label><input type="radio" name="estudios" value="bachillerato"/> Bachillerato</label></br>
<label><input type="radio" name="estudios" value="grado"/> Grado Superior</label></br>

</label>
<p><label for="nivel de valenciano">nivel de valenciano</label></br>
<input type="range"min="1" max="10" id="nivel de valenciano" name="nivel de valenciano">
</label>

Nivel de Ingles
<select name="nivelingles">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
</label> <br />

<tr>
<td><label for="certificacion ingles">certificacion ingles</label></td>
<td>
<select name="certificacion ingles" id="certificacion ingles">
<option value="1"> 1</option>
<option value="ninguno" selected="selected">ninguno</option>
<option value="2">2</option>
</select>
</tr>

<td><button type="submit">Enviar</button> <button type="reset">Borrar</button><td>

<table>

<form>

<table>
</body>
</html>

muchas gracias

Mastermind · « **Respuesta #1 en:** 11 de Junio 2015, 22:33 »

Hola para adecuarte a como se pega código en el foro aquí tienes las indicaciones en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Y el problema de maquetación parece sencillo si tienes conocimientos, si te faltan mira los cursos de HTML y de CSS en https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86

Simplemente cambiando el width del form ya se consigue una mejoría, por ejemplo ponerlo al 55% así:

form{
width:55%;
}

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: