Member Avatar for extemer

how would i give dime text in any text field e.g if there is login form and in login form the field where we enter the password written a transparent text that enter your password.how would i apply this in form below please help me...i have highlight the code for you...

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />





  <script language="javascript" type="text/javascript">

  function button1(){

var user =document.getElementById("go-btn").value;

if(document.getElementById("password").value!="amry")

  alert('You have given Wrong Password!');


  }

  </script>

  <title>Login</title>

  <link rel="stylesheet" type="text/css" href="1css/css.css" />

  <style type="text/css">

  <!--



  #image{





  margin-top: 7px;

  }





  #images{



  font-family: fantasy;

  font-size: 8px;



  }

  -->

  </style></head>


    <body >



  <div class="login-form">

  <div id="hedding">

  <div class="left"></div>

  <div class="main">

  <div class="text">

  <span class="heding-txt1">LOGIN AREA</span>

  <span class="heding-txt2">FOR</span>

  <span class="heding-txt3">ZMS</span>

  </div>



  </div>

  <div class="right"></div>

  </div>





  </div>

  <div class="enter">


  <div class="form-lft"></div>

  <div class="form-main">

  <div class="inner-form">

   <form action="logindb.php" method="POST" >

  <label>Username</label>

  <input type="text" class="input" name="name" id=name/>

  <label>Password</label>


  ////////////// here i want to apply that tranparent text.....

  <input type="password" class="input" name="password" id=password />

  </div>

  <div class="buttns">



     <input type="submit" class="go-btn" value="" id="go-btn" onclick="javascript:button1()"/>



  <input type="submit" class="lost-btn" value="" id="lost-btn" />

  </div>

  </form></div>

  <div class="form-rght"></div>



  </div>

  </div>







  </body>

  <div id="image"><center><img src="222071_1941814027700_1312940202_2218448_386665_n.jpg"/></center>

  </div>

  <div id="images"><center>Developed by AMRY Soft</center></div>

  </html>
Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 2 Replies
  • 125 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by extemer

Dani AI

Generated

As pointed out, the simplest way is the HTML5 placeholder attribute. For a login form, use a real <label> (for accessibility) and keep the placeholder as a hint only. For older browsers that don't support placeholder, provide a tiny fallback — password fields need a special fallback because a plain value in a type="password" input is masked.

Example (accessible pattern):

<label for="pwd" class="visually-hidden">Password</label>
<input id="pwd" name="password" type="password" placeholder="Enter your password">
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Style the hint to look dim with placeholder selectors and vendor prefixes:

::-webkit-input-placeholder { color: rgba(0,0,0,0.35); }
:-moz-placeholder { color: rgba(0,0,0,0.35); }
::-moz-placeholder { color: rgba(0,0,0,0.35); }
:-ms-input-placeholder { color: rgba(0,0,0,0.35); }
::placeholder { color: rgba(0,0,0,0.35); }

If you must support very old browsers, use a small JS fallback that detects lack of placeholder support and for password fields creates a visible text input showing the hint, swapping it out when the field gains focus. Keep the polyfill minimal so it doesn't interfere with real input.

Notes: placeholders are hints, not substitutes for labels; they disappear once typing starts. Never rely on client-side JS for password validation (as in the OP); always validate on the server and handle authentication securely. Browser support and details are documented on MDN and in feature tables — see the HTML placeholder docs on MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder) and browser support on Can I Use (https://caniuse.com/input-placeholder).

Recommended Answers

All 2 Replies

Member Avatar for Fungus1487

Try using the new HTML5 attribute , this will only work in modern browsers.

<input type="text" name="myinput" placeholder="enter something" />
Member Avatar for extemer

thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.