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

invitado

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
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
« Última modificación: 17 de Junio 2015, 12:59 por Ogramar »

Mastermind

  • Experto
  • *****
  • Mensajes: 536
    • Ver Perfil
Re:formulario con xhtml descuadrado ayuda please ;_;
« 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  ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".