Problema con la maquetacion de mi formulario

Sumerio · #1 (**permalink**) 19/08/2012, 12:25

Hola tengo un problema que tengo que mostrar este formulario de este forma, pero sin la ultima fila:

Código HTML:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<style type="text/css">
<!--
.style1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.style14 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: small; }
.style17 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; }
.style20 {font-size: small}
.style21 {font-family: Geneva, Arial, Helvetica, sans-serif}

.mostrar { height:25px; cursor:pointer; float:left; margin-left:5px;}
.ocultar { height:25px; cursor:pointer; float:left; margin-left:5px;}

-->
</style>

<script type="text/javascript">

function ocultarFila(num,ver) {
  dis= ver ? '' : 'none';
  tab=document.getElementById('tabla');
  tab.getElementsByTagName('tr')[num].style.display=dis;
}
function ocultarColumna(num,ver) {
  dis= ver ? '' : 'none';
  fila=document.getElementById('tabla').getElementsByTagName('tr');
  for(i=0;i<fila.length;i++)
    fila[i].getElementsByTagName('td')[num].style.display=dis;
}

</script>

</head>
<body>
<form action="">

<table width="1246" border="1">
  <tr>
    <td width="140" rowspan="2"><span class="style17">Sismicidad</span></td>
    <td colspan="2"><table width="488" border="0">
      <tr>
        <td width="253" class="style14">Mapa de zonificaci&oacute;n s&iacute;smica</td>
        <td width="225" class="style14"><input name="btnVisualizarMapa11" type="button" id="btnVisualizarMapa11" style='width:180px;' value="Clic visualizaci&oacute;n del mapa" /></td>
      </tr>
    </table></td>
    <td width="557"><table width="484" border="0">
      <tr>
        <td width="241" class="style14">Entidad</td>
        <td width="233" class="style14"><select name="select12" size="1" id="select10" style="width: 230px"/>
        </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="256"><strong><span class="style17">Escala de peligrosidad</span></strong></td>
    <td colspan="2"><table width="808" border="0">
      <tr>
        <td width="176" class="style14">Muy reducida</td>
        <td width="55" class="style14"><input type="radio" ></td>
        <td width="171" class="style14">Reducida</td>
        <td width="50" class="style14"><input type="radio" ></td>
        <td width="176" class="style14">Moderada</td>
        <td width="56" align="center" class="style14"><input type="radio" ></td>
      </tr>
      <tr>
        <td class="style14">Elevada</td>
        <td class="style14"><input type="radio" ></td>
        <td class="style14">Muy elevada</td>
        <td class="style14"><input type="radio" ></td>
        <td class="style14">&nbsp;</td>
        <td align="center" class="style14">&nbsp;</td>
      </tr>
      </table></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="265">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
	<input type="button" value="Quitar fila" onclick="ocultarFila(2,false);" />
</form>
</body>
</html>

Pero el problema es que si le quito la ultima fila, se degrada el formulario, alguien sabe como puedo dejarlo como esta pero sin la ultima fila, el problema fue que meti tablas dentro de un una celda, para que se aliniara el formulario, pero cuando elimino la ultima fila se degrada el formulario.
Me dijeron que usara divs, pero no tengo mucho conocimiento.

#2 (**permalink**) 19/08/2012, 16:22

Sinceramente no quise ver tu código y obviamente no se solucionar tu problema especifico, pero vengo a enseñarte a usar os div's y obviamente a solucionar miles de problemas que se te presenten en un futuro

El uso de los div's es aconsejable por muchas cosa, como comente en un post hace unos minutos, html es un lenguaje semántico, dado que si quieres declarar una tabla usas una tabla, pero si quieres poner un formulario usas un form (lógico, no?)

El uso de los div's es incluso mas sencillo que las tablas, te comento

Código HTML:

Ver original<div>Contenido</div>

Y listo, tienes tu capa, tal vez diras "y ahora como rayos le pongo el diseño?" (espero que tengas conocimientos de css).

Pues facil, solo le pones un id, o una class o lo que que quieras para identificarlo (yo prefiero usar la tecnica de anidado).

Código HTML:

Ver original<div id="micaja">Contenido</div>

Código CSS:

Ver original#micaja {
    width: 300px;
    height: 100px;
    background: #F00;
    color: #FFF;
}

Ahora, para poner tu formulario igualmente es muy sencillo y solo es cuestion de imaginación a la hora de escribir tu CSS.

Código HTML:

Ver original<form>
    <label>Nombre</label>
    <input type="text" name="nombre" placeholder="Escribe tu nombre" />
 
    <label>Email</label>
    <input type="email" name="email" placeholder="Escribe tu email" />
 
    <label>Contraseña</label>
    <input type="password" name="contrasenia" placeholder="Escribe una nueva contraseña" />
 
    <button>Enviar</button>
</form>

En base a eso podrías diseñar tu formulario; la complejidad del diseño depende mucho de tu CSS y si necesitas capas de apoyo, recuerda que estas usando un formulario y dentro de estos no deben ir div's sino fieldset (son como los divs pero para formularios)

Código HTML:

Ver original<form>
    <fieldset>
        <label>Nombre</label>
        <input type="text" name="nombre" placeholder="Escribe tu nombre" />
 
        <label>Email</label>
        <input type="email" name="email" placeholder="Escribe tu email" />
    </fieldset>
    <fieldset>
        <label>Contraseña</label>
        <input type="password" name="contrasenia" placeholder="Escribe una nueva contraseña" />
 
        <button>Enviar</button>
    </fieldset>
</form>

Todo resulta muy facil de usar, te recomiendo estudiar mas sobre el tema y olvidarte de las tablas para maquetar.