什么可以用来代替输入类型="密码"用于密码插入?

时间:2015-03-19 20:13:11

标签: php html html5 input

我尝试使用html和php创建基本注册页面。我试过使用输入类型="密码"我的密码字段;但在这种情况下,不会创建任何文本框。如果我使用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>     

3 个答案:

答案 0 :(得分:2)

您正在寻找:

type="password"

密码输入字段示例:

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

此外,您使用带有标签的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>

答案 1 :(得分:0)

这有效:

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

答案 2 :(得分:0)

Hmmmmmm将类型更改为&#34;密码&#34;对我有用....我能想到的唯一另一种方法是使用java脚本或java查询,虽然它不需要做太多工作但是不需要它。

您是否尝试过清除缓存?你使用的是什么浏览器? (它在chrome中运行良好)

PS:你的缩进和格式有点unorthadox,你不需要结束断点标记,只需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 =&#34;密码&#39;界定?或者出于某种原因覆盖它?