Alinear formularios

carlosuc99 · #1 (**permalink**) 24/12/2012, 09:17

Buenas,

Tengo este formulario:

Código HTML:

Ver original<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
    <tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td></tr>
   
    <tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
    <tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
 
    <tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';
 
        ?>
    </select><br/><br/></td></tr>
 
 
    <tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
    <tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
    <tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
 
    <tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
    </table><br />
    <input type="submit" name="enviar" value="Insertar"/>
    </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?

pzin · #2 (**permalink**) 24/12/2012, 09:24

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.

carlosuc99 · #3 (**permalink**) 24/12/2012, 10:09

He hecho esto:

Código HTML:

Ver original<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 originaltd.Forms { 
    
 
    text-align: left;
    text-indent: 10px;
    font-family: Century Gothic;
    font-weight: normal;
    font-size: 15px; 
    white-space: nowrap;
}

emprear · #4 (**permalink**) 24/12/2012, 11:33

Cita:

Iniciado por carlosuc99

He hecho esto:

Código HTML:

Ver original<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 originaltd.Forms { 
    
 
    text-align: left;
    text-indent: 10px;
    font-family: Century Gothic;
    font-weight: normal;
    font-size: 15px; 
    white-space: nowrap;
}

Si lo he entendido, algo muy básico sería

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
label {
display: inline-block;
width: 300px;
}
</style>
</head>
<body>
<form>
<label>campo 1</label><input type="text" /><br />
<label>campo xxx 2</label><input type="text" /><br />
<label>campo zz 3</label><input type="text" /><br />
</form>
</body>
</html>

Saludos