可以使用什么来代替输入类型=“0”;密码”;用于插入密码


what can be used instead of input type= "password" for password insertion?

我正在尝试使用html和php创建一个基本的注册页面。我尝试使用输入type="password"作为我的密码字段;但在这种情况下,它不会创建任何文本框。如果我使用type=",我会得到我想要的表单。但很明显,输入仍然可见。克服这个问题最简单的方法是什么?

<!DOCTYPE HTML>
<html>
<head>
<title>On Cash</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
 <!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="REM KUPUS Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" 
/>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <!-- start-smoth-scrolling-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(".scroll").click(function(event){     
                    event.preventDefault();
                    $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
                });
            });
        </script>
         <!--start-smoth-scrolling-->
        <!--webfonts-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
        <!--//webfonts-->
        <!--start-top-nav-script-->
        <script>
            $(function() {
                var pull        = $('#pull');
                    menu        = $('nav ul');
                    menuHeight  = menu.height();
                $(pull).on('click', function(e) {
                    e.preventDefault();
                    menu.slideToggle();
                });
                $(window).resize(function(){
                    var w = $(window).width();
                    if(w > 320 && menu.is(':hidden')) {
                        menu.removeAttr('style');
                    }
                });
            });
        </script>
        <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#UserId").keyup(function (e) {
        //removes spaces from username
        $(this).val($(this).val().replace(/'s/g, ''));
        var UserId = $(this).val();
        if(UserId.length < 4){$("#user-result").html('');return;}
        if(UserId.length >= 4){
            $("#user-result").html('<img src="images/ajax-loader.gif" />');
            $.post('user_exist.php', {'UserId':UserId}, function(data) {
              $("#user-result").html(data);
            });
        }
    }); 
});
</script>
        <!--//End-top-nav-script-->
    </head>
    <body>
        <!-- start-header-->
            <div id="home" class="header">
                <div class="container">
                    <div class="top-header">
                        <div class="logo">
                            <a href="index.html"><img src="images/logo.png" alt=""></a>
                        </div>
                        <!--start-top-nav-->
                         <nav class="top-nav">
                            <ul class="top-nav">
                                <li class="active"><a href="index.html">Home</a></li>
                                <li><a href="about.html">About</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="portfolio.html">Portfolio</a></li>
                                <li><a href="contact.html">Contact</a></li>
                                    <div class="clearfix"> </div>
                            </ul>
                            <a href="#" id="pull"><img src="images/menu-icon.png" title="menu" /></a>
                        </nav>
                        <div class="clearfix"> </div>
                        <lable> </lable>
                    </div>
                </div>
            <!-- Slideshow 4 -->
        <!--/start-two-bites-->
    <!-- /start-services /// user login er part-->
    <div class="service-section">
        <a href="add_new.php"><img src="images/f1.png"/></a>
        <a href="chk_issues.php"><img src="images/f3.png"/></a>
        <a href="chk_transaction.php"><img src="images/f2.png"/></a>

        <form action="insert.php" method="POST">
        <div class="insert">
                <center><br><h3>Fill all the forms for inserting data</h3></br></center>
            <center>
            <br>
                <label for="UserId">Enter Username :
                <input name="UserId" type=" " id="UserId" maxlength="15">
                <span id="user-result"></span>
                </label>
            </br>
            <br>
                <label for="Password">Enter Password:
                <input name="Password" type=" " id="Password" maxlength="15">
                </label>
            </br>
            <br>
                <label for="Confirm Password">Confirm password:
                <input name="Confirm Password" type=" " id="CPassword" maxlength="15">
                </label>
            </br>
            </center>
                <br><center>
                    <input type ="submit" value="save"></center></br>   
        </div>
        </form>
    </div>
<!-- /start-services-->
    <div class="hands-app-section">
        <div class="container">
        <div class="app-hands">
                <div class="col-md-7 hands-text">
                    <h3>Integer vitCelibero ac risus </h3>
                    <h4>Donec odio Quisque volutpat mattis eros Nullam</h4>
                    <span></span>
                    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque </p>
                    <a class="dow-btn" href="#">MORE INFO</a>
                </div>
                <div class="col-md-5 hands-img ">
                    <img src="images/hands.png" alt="">
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
<!--Contents ends here-->
             <div id="contact" class="contact">
                    <div class="container">
                        <h3>contact us</h3>
                        <h4>for more info</h4>
                        <div class="contact-main">
                            <div class="col-md-4 contect-text">
                                <div class="Address">
                                        <h4>Address</h4>
                                        <p>Morbi in sem quis dui placerat ornare. Pellentesque odio niseuismod in</p>
                                        <span>Morbi in sem quis dui placerat ornare. Pellentesque odio niseuismod in</span>
                                            <ul class="links">
                                            <li><a href="mailto:info@example.com">info@sitename.com</a></li>
                                            <li><a href="mailto:info@example.com">sales@sitename.com</a></li>
                                            <li><a href="mailto:info@example.com">contact@sitename.com</a></li>
                                        </ul>
                                </div>
                            </div>
                            <div class="col-md-8 contect-text">     
                                    <form method="post" action="#">
                                                <li>
                                                    <input type="text" class="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" ><a href="#" class=" icon user"></a>
                                                </li>
                                                <li>
                                                    <input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"><a href="#" class=" icon lock"></a>
                                                </li>
                                                    <div class="clear"> </div>
                                                <li class="message-box">
                                                    <textarea value="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message ';}">Message</textarea><a href="#" class=" icon pen"></a>
                                                </li>   
                                               <div class="submit"> 
                                                    <input type="submit" value="Submit " />
                                              </div>
                                    </form>
                                </div>  
                                <div class="clearfix"> </div>
                            </div>  
                        </div>
                    </div>
                    <!--start-footer-->
        <!--/start-footer-->
                <div class="footer">
                        <div class="container">
                            <div class="copy-right">
                                    <p>&copy; 2014  All Rights  Reserved | Template by &nbsp;<a href="http://w3layouts.com">W3Layouts</a></p>
                            </div>  
                        </div>  
                        <div class="clearfix"> </div>                           
                    </div>
                    <!-- //End-footer-->
                <script type="text/javascript">
                                    $(document).ready(function() {
                                        /*
                                        var defaults = {
                                            containerID: 'toTop', // fading element id
                                            containerHoverID: 'toTopHover', // fading element hover id
                                            scrollSpeed: 1200,
                                            easingType: 'linear' 
                                        };
                                        */
                                        $().UItoTop({ easingType: 'easeOutQuart' });
                                    });
                                </script>
                    <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

</body>
</html>     

您正在寻找:

type="password"

密码输入字段示例:

<input type="password" name="password">

此外,您在标签中使用for,内容是for查找id,而不是名称。此外,您最好使用不带空格的名称,这对您自己来说更容易。

您的密码片段的外观示例:

<br>
            <label for="password-new">Enter Password:
            <input name="passwordnew" type="password" id="password-new" maxlength="15">
            </label>
        </br>
        <br>
            <label for="confirm-password">Confirm password:
            <input name="confirmpassword" type="password" id="confirm-password" maxlength="15">
            </label>
        </br>

这是有效的:

<form action="insert.php" method="POST">
    <div class="insert">
            <center><br><h3>Fill all the forms for inserting data</h3></br></center>
        <center>
        <br>
            <label for="UserId">Enter Username :
            <input name="UserId" type=" " id="UserId" maxlength="15">
            <span id="user-result"></span>
            </label>
        </br>
        <br>
            <label for="Password">Enter Password:
            <input name="Password" type="password" id="Password" maxlength="15">
            </label>
        </br>
        <br>
            <label for="Confirm Password">Confirm password:
            <input name="Confirm Password" type="password" id="CPassword" maxlength="15">
            </label>
        </br>
        </center>
            <br><center>
                <input type ="submit" value="save"></center></br>   
    </div>
    </form>

https://jsfiddle.net/xr9mhn06/1/

嗯,将类型更改为"password"对我来说很有效……我能想到的唯一其他方法是使用java脚本或java查询,尽管这不需要太多工作,但应该不需要。

你试过清理缓存了吗?你在用什么浏览器?(它在铬中工作良好)

附言:你的缩进和格式有点不正统,你不需要结束break标签,只要br就足够了。

我只是把它做成了一个html文件,并在chrome中运行,它运行得很好。

<form action="insert.php" method="POST">
<div class="insert">
    <center><h3>Fill all the forms for inserting data</h3></center>
        <center>
            <br>
            <label for="UserId">Enter Username :
                <input name="UserId" type=" " id="UserId" maxlength="15">
                <span id="user-result"></span>
            </label>
            <br>
            <label for="Password">Enter Password:
                <input name="Password" type="password" id="Password" maxlength="15">
            </label>
            <br>
            <label for="Confirm Password">Confirm password:
                <input name="Confirm Password" type="password" id="CPassword" maxlength="15">
            </label>
            <br>
        </center>
        <center><input type ="submit" value="save"></center>   
    </div>
</form>

编辑:给出另一个答案的一条评论中的图片。(我不能对此发表评论,因为我的代表不够高)

您正在使用的样式表是否没有定义type="password"?或者由于某种原因覆盖它?