user232803
Reputation: 365
what can be used instead of input type= "password" for password insertion?
I'm trying to create a basic sign up page using html and php. I've tried to use input type= "password" for my password field; but in that case that does not create any textbox. If I use type =" " I get my desired form.But obviously input remains visible. What will be the simplest way to overcome this problem?
<!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:[email protected]">[email protected]</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><a href="mailto:[email protected]">[email protected]</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>© 2014 All Rights Reserved | Template by <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>
Upvotes: 0
Views: 2144
Answers (3)
Brennen Sprimont
Reputation: 1729
Hmmmmmm changing type to "password" works for me.... And the only other way I can think of would be using java script or java query and although it doesn't take much work it shouldn't be needed.
Have you tried clearing your cache? what browser are you using? (it works fine in chrome)
PS: Your indentations and formatting are a little unorthadox and you don't need to end break tags, just br is enough.
I just made this a html file and ran it in chrome and it worked perfectly.
<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>
EDIT: Given the image in one of the comments on another answer. (that I cannot comment on because my rep isn't high enough)
Would the stylesheet you are using not have type="password' defined? or override it for some reason?
Upvotes: 0
Perry
Reputation: 11700
You are looking for :
type="password"
Example for password input field:
<input type="password" name="password">
Also you use the for with your label, the things is the for looks for the id and not the name. Also you better use name without a whitespace this makes is easier for yourself.
Example for how your password piece will look like:
<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>
Upvotes: 2
BlackHatSamurai
Reputation: 23493
This works:
<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/
Upvotes: 0
Related Questions
- How can you send Username and Password without typing it?
- Automatically fill value on HTML field type=password for a web form
- I Need Tips to make my PHP password work
- Secure PHP password entry possible?
- How to properly escape password field on HTML form?
- How to create the password input
- input type password value?
- value in the password field with out entering the value
- Password input element problem
- php Password textbox!