HTML密码长度不同

Question

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

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

</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>

.password {
  margin-left: 50px;
}

 <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>

Answer 1

请仔细看，width和height都一样，over。不是吗？

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";
     }     
  }   

body {
    margin: 0;
}

th {
    background: red;
}

<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>