Foros del Web » Creando para Internet » HTML »

Alinear formularios

Estas en el tema de Alinear formularios en el foro de HTML en Foros del Web. Buenas, Tengo este formulario: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < form action = "insertar-modelo.php" method = "post" enctype = "application/x-www-form-urlencoded" >     < ...
  #1 (permalink)  
Antiguo 24/12/2012, 09:17
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 8 años, 5 meses
Puntos: 5
Exclamación Alinear formularios

Buenas,

Tengo este formulario:

Código HTML:
Ver original
  1. <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
  2.     <table>
  3.     <tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td></tr>
  4.    
  5.     <tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
  6.     <tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /><br/><br/></td></tr>
  7.  
  8.     <tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
  9.         <option>Select Number of Classes</option>
  10.         <?php
  11.         echo'<option value="1">One</option>';
  12.         echo'<option value="2">Two</option>';
  13.         echo'<option value="3">Three</option>';
  14.  
  15.         ?>
  16.     </select><br/><br/></td></tr>
  17.  
  18.  
  19.     <tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
  20.     <tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
  21.     <tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
  22.  
  23.     <tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
  24.     </table><br />
  25.     <input type="submit" name="enviar" value="Insertar"/>
  26.     </form>


El problema es que los casilleros donde pones el texto entran despues del título del apartado, con lo cual quedan desiguales. Cómo puedo hacer para que el inicio de los casilleros sea para todos el mismo sitio y no el final de los títulos?
  #2 (permalink)  
Antiguo 24/12/2012, 09:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Alinear formularios

No suelen usarse tablas para presentar un formulario.

En principio necesitarías que, como tú le llamas, el nombre de cada elemento input esté contenido por algo. Preferiblemente un <label>, y darle a este un ancho específico.

Casi que es mejor que lo hagas fuera de una tabla y uses elementos propios de un formulario —como label— y luego para darle estilos y demás uses CSS.
  #3 (permalink)  
Antiguo 24/12/2012, 10:09
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 8 años, 5 meses
Puntos: 5
Exclamación Respuesta: Alinear formularios

He hecho esto:

Código HTML:
Ver original
  1. <label for="icao">ICAO</label> <input type="text" id="icao" name="icao" /><br />

Ahora como le puedo aplicar esto que tenía hecho en CSS para lo antiguo?

Código CSS:
Ver original
  1. td.Forms {
  2.    
  3.  
  4.     text-align: left;
  5.     text-indent: 10px;
  6.     font-family: Century Gothic;
  7.     font-weight: normal;
  8.     font-size: 15px;
  9.     white-space: nowrap;
  10. }
  #4 (permalink)  
Antiguo 24/12/2012, 11:33
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 5 meses
Puntos: 1567
Respuesta: Alinear formularios

Cita:
Iniciado por carlosuc99 Ver Mensaje
He hecho esto:

Código HTML:
Ver original
  1. <label for="icao">ICAO</label> <input type="text" id="icao" name="icao" /><br />

Ahora como le puedo aplicar esto que tenía hecho en CSS para lo antiguo?

Código CSS:
Ver original
  1. td.Forms {
  2.    
  3.  
  4.     text-align: left;
  5.     text-indent: 10px;
  6.     font-family: Century Gothic;
  7.     font-weight: normal;
  8.     font-size: 15px;
  9.     white-space: nowrap;
  10. }
Si lo he entendido, algo muy básico sería

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. label {
  9. display: inline-block;
  10. width: 300px;
  11. }
  12. </head>
  13. <label>campo 1</label><input type="text" /><br />
  14. <label>campo xxx 2</label><input type="text" /><br />
  15. <label>campo zz 3</label><input type="text" /><br />
  16. </form>
  17. </body>
  18. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 24/12/2012 a las 21:28

Etiquetas: alinear, input, php, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:45.