简体   繁体   中英

How to put a label on an input text password avoiding those bullets?

What is the best way to put a label on an input type password since it display its values as * * ?

There is no where I can put an edit button so I want to put some text like:

Click here... 

so the user is able to click em edit the password.

<input placeholder="Click here..." type="password" name="password">
  1. Use a background image and swap it out when they enter text
  2. Use HTML 5's placeholder attribute

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.

These mechanisms are very similar but subtly different: the hint given by the control's label is shown at all times; the short hint given in the placeholder attribute is shown before the user enters a value; and the hint in the title attribute is shown when the user requests further help.

User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string or the control is not focused (or both), eg by displaying it inside a blank unfocused control and hiding it otherwise.

Here is an example of a mail configuration user interface that uses the placeholder attribute:

<fieldset>  
  <legend>Mail Account</legend>  
    <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>  
    <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>  
    <p><label>Password: <input type="password" name="password"></label></p>  
    <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p> 
</fieldset>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM