Adding the greyish text in the credential fields using HTML

Question

Some websites have a greyish text written in the blanks next to the credentials required, for exampl Gmail (I'm not allowed to add pictures, sadly), however, when you click in the box, the greyish text disappears. I have the following code in HTML but I don't know whether it's possible to add that feature or not:

<html>
    <head>
        <title>My code</title>
    </head>
    <body>
        <h1>Registration form</h1>

        <form>
            <fieldset>
                
                <label for="fname">First Name</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label for="lname">Last Name</label> 
                <input type="text" id="lname" name="lname"><br><br>
                <label for="email">Email</label>
                <input type="email" id="Email" name="Email"><br><br>
                <label for="password">Password</label>
                <input type="password" id="Password" name="Password">
            </fieldset>
        </form>
    </body>
</html>

When I run this code, the boxes/fields appear empty and don't show the greyish text (like 'Email'). Can anyone tell me how to add that feature using HTML?

Filip 769 · Accepted Answer · 2021-07-30T19:10:02.777

2

You can use placeholder attribute.

<input type="text" placeholder="hello">

Note: You can change the styles of the placeholder using css ::placeholder pseudo element.

Edit: If you want to hide the placeholder when focused do this:

#myInput:focus::placeholder{
  color: transparent;
}

<input type="text" placeholder="hello" id="myInput">

edited Jul 30 '21 at 19:10

answered Jul 30 '21 at 18:46

Filip 769

118
1
5

Bravo!! Thanks! (One additional question if you don't mind: this worked but when I clicked the box, the greyish text was still there and only disappeared when I typed in there, unlike the one in Google, do you know how to do that?) – pr0grammar Jul 30 '21 at 18:48
Thanks! I'm not in a hurry, do it at your convenience :) – pr0grammar Jul 30 '21 at 18:53
Your query: https://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery – Gautham Jul 30 '21 at 18:55

score 1 · Answer 2 · answered Jul 30 '21 at 18:49

You need to add the attribute called placeholder in html

<html>
    <head>
        <title>My code</title>
    </head>
    <body>
        <h1>Registration form</h1>

        <form>
            <fieldset>
                
                <label for="fname">First Name</label>
                <input type="text" id="fname" name="fname" placeholder="First Name"><br><br>
                <label for="lname">Last Name</label> 
                <input type="text" id="lname" name="lname" placeholder="Last Name"><br><br>
                <label for="email">Email</label>
                <input type="email" id="Email" name="Email" placeholder="Email"><br><br>
                <label for="password">Password</label>
                <input type="password" id="Password" name="Password" placeholder="Password">
            </fieldset>
        </form>
    </body>
</html>

Thanks! This solved the puzzle. (Sorry. I don't have enough reputation to upvote) — pr0grammar, Jul 30 '21 at 18:51

Adding the greyish text in the credential fields using HTML

2 Answers2