Alinear Input, no el texto dentro de los input

[jameraguilar]

Hola, estoy haciendo un formulario formado por varias entras de texto (input) con su correspondietne label a la misma altura, y me gustaría saber como puedo hacer para que todos los input empiecen a la misma altura, es decir, estén todos alineados en el comienzo, al igual que los label.

He probado creando una capa para cada input y modificando el valor de la etiqueta float y no hay manera.

Muchas gracias.

[gVenom]

Puedes usar uno como este que tengo por ahi, se ve muy bien presentado:

Código HTML:

<table width="69%" border="0" align="center" cellpadding="3" cellspacing="3">
          <tr>
            <td width="50%" align="right"><span class="style5"><small>Name</small></font></span></td>
            <td width="50%"><span class="style7"><span id="sprytextfield1">
              <label>
              <input name="name" type="text" id="name" size="40">
              </label>
              <span class="textfieldRequiredMsg">A value is required.</span></span></font></span></td>
          </tr>
          <tr>
            <td width="50%" align="right"><div align="right">
              <p class="style5"><small>Billing address</small></font></td>
            <td width="50%"><span class="style7">
              <input type="text" name="billing"size="40">
              </font></span></td>
          </tr>
          <tr>
            <td width="50%" align="right"><span class="style5">City</span></td>
            <td width="50%"><span class="style7">
              <input type="text" name="city"size="40">
              </font></span></td>
          </tr>
          <tr>
            <td width="50%" align="right"><span class="style5">State</span></td>
            <td width="50%"><span class="style7">
              <input type="text" name="state"size="40">
              </font></span></td>
          </tr>
          <tr>
            <td width="50%" align="right"><span class="style5"><small>Zip Code</small></font></span></td>
            <td width="50%"><span class="style7"><span id="sprytextfield2">
              <label>
              <input name="zip_code" type="text" id="zip_code" size="40">
              </label>
              <span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></font></span></td>
          </tr>
          <tr>
            <td width="50%" align="right"><span class="style5">Telephone (home)</span></td>
            <td width="50%"><span class="style7"><span id="sprytextfield3">
              <label>
              <input name="phone_home" type="text" id="phone_home" size="40">
              <span class="textfieldInvalidFormatMsg">Invalid format.</span> </label>
              </span></font></span></td>
          </tr>
          <tr>
            <td width="24%" align="right"><span class="style5">Telephone (business)</span></td>
            <td width="28%"><span class="style7"><span id="sprytextfield4">
              <label>
              <input name="phone_business" type="text" id="phone_business" size="40">
              <span class="textfieldInvalidFormatMsg">Invalid format.</span> </label>
              </span></font></span></td>
          </tr>
          <tr>
            <td width="20%" align="right"><span class="style5">Fax</span></td>
            <td width="28%"><span class="style7">
              <input type="text" name="fax"size="40">
              </font></span></td>
          </tr>
          <tr>
            <td width="24%" align="right"><span class="style5">E-Mail</span></td>
            <td width="28%"><span class="style7"><span id="sprytextfield5">
              <label>
              <input name="email" type="text" id="email" size="40">
              <span class="textfieldInvalidFormatMsg">Invalid format.</span> </label>
              </span></font></span></td>
          </tr>
        </table> 

bueno, obviamente los estilos y eso los quitas ya que no te sirven.

[denica001]

Podrias hacerlo creeando una tabla donde incluir solo las etiquetas (labels) en una columna y las cajas de texto en otra columna. Con el valor align de las celdas de la segunda columna podrias lograr que todos los input estuvieran alineados.

Ahora para hacer esto es muy importante que al definir el label lo hagas con el atributo "for" y no hagas un "wrap tag", porque de este manera te deja libertad para ubicarlo donde vos quieras independientemente del "input tag" al que este asociado.

Mira este codigo

Código:

<form id="form1" name="form1" method="post" action="">
  <table border="0">
    <tr>
      <td width="63"><label for="input1">Input 1</label></td>
      <td width="365">
      <input name="input1" type="text" id="input1" size="50" /></td>
    </tr>
    <tr>
      <td><label for="input3">Input 2</label></td>
      <td>
        <input name="input2" type="text" id="input3" size="20" /></td>
    </tr>
    <tr>
      <td><label for="input3">Input 3</label></td>
      <td>
        <input name="input3" type="text" id="input3" size="35" /></td>
    </tr>
  </table>
</form>

Fijate que una vez que se puede hacer todo desde la vista diseño, pero para mover el label a la primer columna de la tabla hay que hacerlo dentro del codigo. El label por mas que no envuelva al "input tag" sigue asociado a el por el atributo "for".

Esta disposicion no te permite hacer lo que vos queres
<label>Nombre<input ..... id="nombre"> /> </label>

En cambio usando el atributo "for"

<label for="nombre"> Nombre</label>
<table><tr><td> <input ... id="nombre" /> </td> </tr> </table>

Son solo ejemplos para que entiendas como trabaja el atributo "for".

Cualquier consulta postea con confianza

Saludos.