How can i make the text appear inside the input field-CodePudding

When i make an input button and add a label the label appears on the side of the input field. How can i make it appear inside the input field?

I have tried to put the label inside the input field with css but when i write in the input the label and the text mix together and the text becomes unreadable. How can i make when i write in input field the label to disappear and only the text to be there. If you have any other options please tell me.


    <div >
        <label>username</label>
        <input type="text">
    </div>

.holder {
    position: relative;
  }
  
  .holder label {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
  }
  
  .holder input {
    padding: 2px 2px 2px 25px;
  }

CodePudding user response：

<div >
    <label>username</label>
    <input type="text" placeholder="username">
</div>

Try this by adding placeholder.

CodePudding user response：

Just use the placeholder attribute for the input tag. Like this:

<input type="text" placeholder="username"/>

CodePudding user response：

In HTML using the input placeholder attribute, show the text inside the input text example:-

<input type="text" placeholder="username"/>