HTML密码长度不一样

Question

我正在执行此HTML页面，并且不知道为什么这两个密码区域的大小不同。我已经从第一个复制粘贴，所以它100％相同。 我刚开始为一个学期项目制作神话第一个HTML页面，需要帮助。

当我看到它的样子时，它看起来像这样：

＆＃13;

＆＃13;

</script>  
<div show/hide password>
<script>
function pass(){
    var d=document.getElementById('s1');
    var e=document.getElementById('show_f').value;
    var f=document.getElementById('show_f').type; 

    if(d.value=="show"){
        var f= document.getElementById('show_f').type="text";
        var g=document.getElementById('show_f').value=e;
        d.value="Hide";

    } else{
        var f= document.getElementById('show_f').type="password";
        var g=document.getElementById('show_f').value=e;
        d.value="show";
     }     
  }   
  </script> 
  <script>
function pass2(){
    var d=document.getElementById('s2');
    var e=document.getElementById('show_g').value;
    var f=document.getElementById('show_g').type; 

    if(d.value=="show"){
        var f= document.getElementById('show_g').type="text";
        var g=document.getElementById('show_g').value=e;
        d.value="Hide";

    } else{
        var f= document.getElementById('show_g').type="password";
        var g=document.getElementById('show_g').value=e;
        d.value="show";
     }     
  }   
  </script> 
  </div>

＆＃13;

.password {
  margin-left: 50px;
}

＆＃13;

 <table>
    <tr>
<th>  <form action="/action_page.php" >
  <!-- password for Wi-Fi login -->
      <p class="text" class="arial"  style="font-size:20px;">Password: <input style="font-size:20px"  id="show_f" type="password" name="pass_f" maxlength='30'  size='15' class="password" >
  <input type="button" onclick="pass()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;">
<input type="submit" value="connect" onclick="alert('Done!')" ></th>
<!-- password for sql login -->
  <th><p class="text" class="arial"  style="font-size:20px;">Password: <input style="font-size:20px" id="show_g"  type="password" name="pass_g" maxlength='30'  size='15' class="password" >
    <input type="button" onclick="pass2()" id="s2" value="show" style="height:25px; margin-left:5px;margin-top:3px;">
  	     <input type="submit" value="connect" onclick="alert('Done!')" ></th>

  </table>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请仔细查看，两者都是width和height相同。不是吗？

＆＃13;

＆＃13;

function pass(){
    var d=document.getElementById('s1');
    var e=document.getElementById('show_f').value;
    var f=document.getElementById('show_f').type; 

    if(d.value=="show"){
        var f= document.getElementById('show_f').type="text";
        var g=document.getElementById('show_f').value=e;
        d.value="Hide";

    } else{
        var f= document.getElementById('show_f').type="password";
        var g=document.getElementById('show_f').value=e;
        d.value="show";
     }     
  }   
  </script> 
  <script>
function pass2(){
    var d=document.getElementById('s2');
    var e=document.getElementById('show_g').value;
    var f=document.getElementById('show_g').type; 

    if(d.value=="show"){
        var f= document.getElementById('show_g').type="text";
        var g=document.getElementById('show_g').value=e;
        d.value="Hide";

    } else{
        var f= document.getElementById('show_g').type="password";
        var g=document.getElementById('show_g').value=e;
        d.value="show";
     }     
  }   

＆＃13;

body {
    margin: 0;
}

th {
    background: red;
}

＆＃13;

<table>
    <tr>
<th>  <form action="/action_page.php" >
  <!-- password for Wi-Fi login -->
      <p class="text" class="arial"  style="font-size:20px;">Password: <input style="font-size:20px"  id="show_f" type="password" name="pass_f" maxlength='30'  size='15' class="password" >
  <input type="button" onclick="pass()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;">
<input type="submit" value="connect" onclick="alert('Done!')" ></th>
<!-- password for sql login -->
  <th><p class="text" class="arial"  style="font-size:20px;">Password: <input style="font-size:20px" id="show_g"  type="password" name="pass_g" maxlength='30'  size='15' class="password" >
    <input type="button" onclick="pass2()" id="s2" value="show" style="height:25px; margin-left:5px;margin-top:3px;">
  	     <input type="submit" value="connect" onclick="alert('Done!')" ></th>

  </table>
</form>

＆＃13;

＆＃13;

＆＃13;