Foros del Web » Creando para Internet » CSS »

Alinear Input, no el texto dentro de los input

Estas en el tema de Alinear Input, no el texto dentro de los input en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/04/2009, 06:35
 
Fecha de Ingreso: abril-2007
Mensajes: 43
Antigüedad: 10 años, 7 meses
Puntos: 0
Alinear Input, no el texto dentro de los input

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.
  #2 (permalink)  
Antiguo 20/04/2009, 09:11
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Alinear Input, no el texto dentro de los input

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.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 20/04/2009, 10:28
 
Fecha de Ingreso: octubre-2008
Mensajes: 387
Antigüedad: 9 años, 1 mes
Puntos: 18
Respuesta: Alinear Input, no el texto dentro de los input

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.
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 05:44.