Problemas con unos inputs

poncharelo_69 · #1 (**permalink**) 02/07/2012, 16:28

Que tal compañeros, no estoy seguro de si este tema deba estar en este foro de php, pero mi problema radica en un formulario que tengo de html en una pagina de php en el cual todo funciona muy bien en internet explorer, extrañamente en firefox, safari y chrome hace esta falla.

El primer input en el que se escribe el nombre de la persona funciona muy bien, pero cuando das click en el siguiente input se regresa al primero, y si das en cualquier otro input se siguen subiendo y no me deja escribir en los demás.

Dejo el código del formulario al igual que la url de la pagina para que puedan ver la falla.

Este es el código de mi formulario

Código PHP:

 
<body>

                 <div id="texto">       

<div style=" margin-left:100px; margin-top:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; width: 218px;">Información Requerida</div>

<br/>

<div id="resultados">

<form id="trabajo" name="trabajo" method="post" action="curriculum2.php">

  <label>

  <table width="557" border="0" align="center" cellpadding="0" cellspacing="5" class="tablita">

      <tr>

        <td width="204" align="left">Nombre</td>

        <td width="338" align="left"><input type="text" name="nombre" id="nombre" /></td>

      </tr>

      <tr>

        <td align="left">Fecha de Nacimientodia</td>

        <td align="left"><label>dia

            <select name="dia" id="dia">

              <option value="01">1</option>

              <option value="02">2</option>

              <option value="03">3</option>

              <option value="04">4</option>

              <option value="05">5</option>

              <option value="06">6</option>

              <option value="07">7</option>

              <option value="08"> 8</option>

              <option value="09">9</option>

              <option value="10">10</option>

              <option value="11">11</option>

              <option value="12">12</option>

              <option value="13">13</option>

              <option value="14">14</option>

              <option value="15">15</option>

              <option value="16">16</option>

              <option value="17">17</option>

              <option value="18">18</option>

              <option value="19">19</option>

              <option value="20">20</option>

              <option value="21">21</option>

              <option value="22">22</option>

              <option value="23">23</option>

              <option value="24">24</option>

              <option value="25">25</option>

              <option value="26">26</option>

              <option value="27">27</option>

              <option value="28">28</option>

              <option value="29">29</option>

              <option value="30">30</option>

              <option value="31">31</option>

            </select>

        </label>

          <label>mes

          <select name="mes" id="mes">

            <option value="1">Enero</option>

            <option value="2">Febrero</option>

            <option value="3">Marzo</option>

            <option value="4">Abril</option>

            <option value="5">Mayo</option>

            <option value="6">Junio</option>

            <option value="7">Julio</option>

            <option value="8">Agosto</option>

            <option value="9">Septiembre</option>

            <option value="10">Octubre</option>

            <option value="11">Noviembre</option>

            <option value="12">Diciembre</option>

          </select>

          </label>

          <label>año

          <select name="ano" id="ano">

            <option value="1990">1990</option>

            <option value="1991">1991</option>

            <option value="1992">1992</option>

            <option value="1993">1993</option>

            <option value="1994">1994</option>

            <option value="1995">1995</option>

            <option value="1996">1996</option>

            <option value="1997">1997</option>

            <option value="1998">1998</option>

            <option value="1999">1999</option>

            <option value="2000">2000</option>

          </select>

          </label></td>

      </tr>

    </table>

    

   <br />

    <p align="center">    Direccion:</p>

    <table width="549" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita">

      <tr>

        <td width="237" align="left"><label></label>

            <table width="252" border="0" cellspacing="0" cellpadding="0" class="tablita">

              <tr>

                <td width="65">Calle</td>

                <td width="187"><input type="text" name="calle" id="calle" /></td>

              </tr>

            </table>

          *

        </td>

        <td width="272" align="left"><table width="275" border="0" cellspacing="0" cellpadding="0">

            <tr>

              <td width="100"><label>No. </label></td>

              <td width="175"><input type="text" name="no" id="no" /></td>

            </tr>

        </table></td>

      </tr>

      <tr>

        <td align="left"><table width="251" border="0" cellspacing="0" cellpadding="0">

            <tr>

              <td width="64">Colonia </td>

              <td width="187"><input type="text" name="colonia" id="colonia" /></td>

            </tr>

        </table></td>

        <td align="left"><table width="278" border="0" cellspacing="0" cellpadding="0">

            <tr>

              <td width="100"><label>Codigo Postal </label></td>

              <td width="178"><input type="text" name="cp" id="cp" /></td>

            </tr>

        </table></td>

      </tr>

      <tr>

        <td align="left"><table width="249" border="0" cellspacing="0" cellpadding="0">

            <tr>

              <td width="65">Ciudad

                <label></label></td>

              <td width="184"><input type="text" name="ciudad" id="ciudad" /></td>

            </tr>

        </table></td>

        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0">

            <tr>

              <td width="100"><label>Municipio </label></td>

              <td width="179"><input type="text" name="municipio" id="municipio" /></td>

            </tr>

        </table></td>

      </tr>

      <tr>

        <td align="left"><label></label>

            <table width="249" border="0" cellspacing="0" cellpadding="0" class="tablita">

              <tr>

                <td width="65">Estado</td>

                <td width="184"><input type="text" name="estado" id="estado" /></td>

              </tr>

          </table></td>

        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0">

            <tr>

              <td width="101">Pais

                <label></label></td>

              <td width="178"><input type="text" name="pais" id="pais" /></td>

            </tr>

        </table></td>

      </tr>

    </table>

    <br />

  <table width="557" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita">

    <tr>

      <td width="253" align="left">Sexo</td>

      <td width="283" align="left"><select name="sexo" id="sexo">

        <option value="Masculino">Masculino</option>

        <option value="Femenino">Femenino</option>

      </select></td>

    </tr>

    <tr>

      <td align="left">Edad</td>

      <td align="left"><input type="text" name="edad" id="edad" /></td>

    </tr>

    <tr>

      <td align="left"><label>Correo Electronico </label></td>

      <td align="left"><input type="text" name="email" id="email" /></td>

    </tr>

    <tr>

      <td align="left">Tel&eacute;fono</td>

      <td align="left"><input type="text" name="telefono" id="telefono" /></td>

    </tr>

  </table>

 
  <p><input type="hidden" name="puesto" value="<?php echo $_GET['puesto'];?>"  />

  <div align="center">

    <label>

     <img src="../images/siguiente.png"  onclick="checkFields();"/>

    </label>

    

  </div>

  </p>

  <p>&nbsp;</p>

</form>

</div>

</div>

</body>

y esta es la pagina, pueden probarla en IE9 y funciona bien pero en otros exploradores no.

http://ipsco.com.mx/bolsa/trabajo2.php?puesto=Ingeniero%20de%20Proyectos&id= 51

ocp001a · #2 (**permalink**) 02/07/2012, 16:48

Tu problema es de javascript, no de php, php no regresa el foco a un input dado.

Además tendrías que indicar el código que tienes para checkFields()

poncharelo_69 · #3 (**permalink**) 02/07/2012, 17:09

Muy bien, muchas gracias por tu respuesta, ya que eso indica que es otro cosa movere este tema a javascript ya que en efecto el checkFields es javascript (aunque no hace focus) pero bueno vere en el otro foro si me pueden ayudar.

Gracias nuevamente

desoler · #4 (**permalink**) 02/07/2012, 17:15

No se mucho del tema, pero creo que la etiqueta Label esta mal cerrada, deberia ser <label>dia</label>

fijate que el fallo se produce despues del option de los la fecha,

poncharelo_69 · #5 (**permalink**) 02/07/2012, 17:45

Gracias por sus respuestas, he revisado el codigo y la etiqueta de <label> empieza en un inicio de los <select>, pero al finalizar el </select> termina la etiqueta de </label>.

El código javascript no hace ningún focus, ya que únicamente verifica si es que los inputs fueron rellenados y si no manda una alerta pero no hace un focus sobre los campos.

Lo que se me hace más raro de todo esto es que la página funciona tranquilamente en IE9, pero en safari, mozilla y chrome me esta dando mucha batalla.

Alguien tiene alguna opcion o forma de arreglarlo.

ocp001a · #6 (**permalink**) 02/07/2012, 18:19

Bueno, no quería leer tu código por que no lo formateas, pero volviendo a verlo, veo que metes muchos elementos dentro de una etiqueta. Las etiquetas son para colocar un texto referente aun campo, no para meter contenido.

ejemplo:

<label for="nombre">Nombre</label><input id="nombre">

<label for="apellido">Apellido</label><input id="apellido">

designjs · #7 (**permalink**) 02/07/2012, 21:34

Creo que el dato que te dio ocp001a es el problema....Ahhh y por favor tablas no es para hacer formularios tomate un tiempito para css3 y html5 no es dificil con la noción del tema que manejas---

poncharelo_69 · #8 (**permalink**) 02/07/2012, 21:46

Debo pedir una disculpa, ese codigo fue realizado por otra persona que salio de la empresa, estoy completamente de acuerdo con ustedes, no acostumbro a usar tablas pero aun así en la empresa estan muy acostumbrados, pero bueno...

Voy a seguir sus consejos y a modificar esa parte del codigo y ya les contare como me fue

poncharelo_69 · #9 (**permalink**) 03/07/2012, 08:44

Gracias compañeros, ya quedo listo mi formulario y les comento cual fue el error.

El label que abarcaba desde el texto hasta donde terminaba el </select> no afectaba en lo más minimo, por lo que me disponia a realizar los cambios para dejarlo todo completamente con html5 y css cuando me di cuenta de que en el inicio de la tabla existia un <label> que es el que me esta dando problemas, dejo el codigo para ser más claro.

Código PHP:

 
<body> 

                 <div id="texto">        

<div style=" margin-left:100px; margin-top:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; width: 218px;">Información Requerida</div> 

<br/> 

<div id="resultados"> 

<form id="trabajo" name="trabajo" method="post" action="curriculum2.php"> 

 
/******************

Este label es el que me estaba dando problemas.

  <label> 

******************/

 
  <table width="557" border="0" align="center" cellpadding="0" cellspacing="5" class="tablita"> 

      <tr> 

        <td width="204" align="left">Nombre</td> 

        <td width="338" align="left"><input type="text" name="nombre" id="nombre" /></td> 

      </tr> 

      <tr> 

        <td align="left">Fecha de Nacimientodia</td> 

        <td align="left"><label>dia 

            <select name="dia" id="dia"> 

              <option value="01">1</option> 

              <option value="02">2</option> 

              <option value="03">3</option> 

              <option value="04">4</option> 

              <option value="05">5</option> 

              <option value="06">6</option> 

              <option value="07">7</option> 

              <option value="08"> 8</option> 

              <option value="09">9</option> 

              <option value="10">10</option> 

              <option value="11">11</option> 

              <option value="12">12</option> 

              <option value="13">13</option> 

              <option value="14">14</option> 

              <option value="15">15</option> 

              <option value="16">16</option> 

              <option value="17">17</option> 

              <option value="18">18</option> 

              <option value="19">19</option> 

              <option value="20">20</option> 

              <option value="21">21</option> 

              <option value="22">22</option> 

              <option value="23">23</option> 

              <option value="24">24</option> 

              <option value="25">25</option> 

              <option value="26">26</option> 

              <option value="27">27</option> 

              <option value="28">28</option> 

              <option value="29">29</option> 

              <option value="30">30</option> 

              <option value="31">31</option> 

            </select> 

        </label> 

          <label>mes 

          <select name="mes" id="mes"> 

            <option value="1">Enero</option> 

            <option value="2">Febrero</option> 

            <option value="3">Marzo</option> 

            <option value="4">Abril</option> 

            <option value="5">Mayo</option> 

            <option value="6">Junio</option> 

            <option value="7">Julio</option> 

            <option value="8">Agosto</option> 

            <option value="9">Septiembre</option> 

            <option value="10">Octubre</option> 

            <option value="11">Noviembre</option> 

            <option value="12">Diciembre</option> 

          </select> 

          </label> 

          <label>año 

          <select name="ano" id="ano"> 

            <option value="1990">1990</option> 

            <option value="1991">1991</option> 

            <option value="1992">1992</option> 

            <option value="1993">1993</option> 

            <option value="1994">1994</option> 

            <option value="1995">1995</option> 

            <option value="1996">1996</option> 

            <option value="1997">1997</option> 

            <option value="1998">1998</option> 

            <option value="1999">1999</option> 

            <option value="2000">2000</option> 

          </select> 

          </label></td> 

      </tr> 

    </table> 

     

   <br /> 

    <p align="center">    Direccion:</p> 

    <table width="549" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita"> 

      <tr> 

        <td width="237" align="left"><label></label> 

            <table width="252" border="0" cellspacing="0" cellpadding="0" class="tablita"> 

              <tr> 

                <td width="65">Calle</td> 

                <td width="187"><input type="text" name="calle" id="calle" /></td> 

              </tr> 

            </table> 

          * 

        </td> 

        <td width="272" align="left"><table width="275" border="0" cellspacing="0" cellpadding="0"> 

            <tr> 

              <td width="100"><label>No. </label></td> 

              <td width="175"><input type="text" name="no" id="no" /></td> 

            </tr> 

        </table></td> 

      </tr> 

      <tr> 

        <td align="left"><table width="251" border="0" cellspacing="0" cellpadding="0"> 

            <tr> 

              <td width="64">Colonia </td> 

              <td width="187"><input type="text" name="colonia" id="colonia" /></td> 

            </tr> 

        </table></td> 

        <td align="left"><table width="278" border="0" cellspacing="0" cellpadding="0"> 

            <tr> 

              <td width="100"><label>Codigo Postal </label></td> 

              <td width="178"><input type="text" name="cp" id="cp" /></td> 

            </tr> 

        </table></td> 

      </tr> 

      <tr> 

        <td align="left"><table width="249" border="0" cellspacing="0" cellpadding="0"> 

            <tr> 

              <td width="65">Ciudad 

                <label></label></td> 

              <td width="184"><input type="text" name="ciudad" id="ciudad" /></td> 

            </tr> 

        </table></td> 

        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0"> 

            <tr> 

              <td width="100"><label>Municipio </label></td> 

              <td width="179"><input type="text" name="municipio" id="municipio" /></td> 

            </tr> 

        </table></td> 

      </tr> 

      <tr> 

        <td align="left"><label></label> 

            <table width="249" border="0" cellspacing="0" cellpadding="0" class="tablita"> 

              <tr> 

                <td width="65">Estado</td> 

                <td width="184"><input type="text" name="estado" id="estado" /></td> 

              </tr> 

          </table></td> 

        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0"> 

            <tr> 

              <td width="101">Pais 

                <label></label></td> 

              <td width="178"><input type="text" name="pais" id="pais" /></td> 

            </tr> 

        </table></td> 

      </tr> 

    </table> 

    <br /> 

  <table width="557" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita"> 

    <tr> 

      <td width="253" align="left">Sexo</td> 

      <td width="283" align="left"><select name="sexo" id="sexo"> 

        <option value="Masculino">Masculino</option> 

        <option value="Femenino">Femenino</option> 

      </select></td> 

    </tr> 

    <tr> 

      <td align="left">Edad</td> 

      <td align="left"><input type="text" name="edad" id="edad" /></td> 

    </tr> 

    <tr> 

      <td align="left"><label>Correo Electronico </label></td> 

      <td align="left"><input type="text" name="email" id="email" /></td> 

    </tr> 

    <tr> 

      <td align="left">Tel&eacute;fono</td> 

      <td align="left"><input type="text" name="telefono" id="telefono" /></td> 

    </tr> 

  </table> 

 
  <p><input type="hidden" name="puesto" value="<?php echo $_GET['puesto'];?>"  /> 

  <div align="center"> 

    <label> 

     <img src="../images/siguiente.png"  onclick="checkFields();"/> 

    </label> 

     

  </div> 

  </p> 

  <p>&nbsp;</p> 

</form> 

</div> 

</div> 

</body>