HTML-Passwort ist nicht die gleiche Länge

Question

Ich mache diese HTML-Seite und weiß nicht, warum diese beiden Passwortbereich nicht die gleiche Größe ist. Ich habe eine Kopie-Paste von der ersten gemacht, so dass es 100% identisch ist. Ich habe gerade begonnen, Mythos erste HTML-Seite für ein Semester-Projekt zu machen und brauche Hilfe.

Wenn ich sehe, wie es aussieht, sieht es so aus:

</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;"> 
 
    \t  <input type="submit" value="connect" onclick="alert('Done!')" ></th> 
 

 
    </table> 
 
</form>

sorgfältig

Answer 1

Bitte schauen Sie, sind beide gleiche width und height, über. nicht wahr?

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;"> 
 
    \t  <input type="submit" value="connect" onclick="alert('Done!')" ></th> 
 

 
    </table> 
 
</form>