I’m new to programming and I don’t know complicated things. But I want to add small features to my site. Is there an easy way to move theplaeholder up when something is typed into the text box?
<form id="form1" runat="server">
<table class="w-100">
<tr>
<td><asp:TextBox ID="floatingInput" runat="server" class="form-control" TextMode="SingleLine" placeholder="Email"></asp:TextBox></td>
</tr>
<tr>
<td><asp:TextBox ID="floatingPassword" runat="server" class="form-control" TextMode="Password" placeholder="Password"></asp:TextBox></td>
</tr>
</table>
</form>
I have searched this on internet but I couldn’t find like the way my code is written. I couldn’t integrate those solutions to my code.
Beyza Nur Karakaya is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
What you need is to create a separate element with a placeholder content and then control it’s position when textbox is empty or not.
Simple example in plan html:
.text-box {
position: relative;
margin: 20px;
}
.text-box input {
width: 100%;
padding: 10px;
}
.text-box label {
position: absolute;
top: 12px;
left: 10px;
color: #aaa;
pointer-events: none;
}
.text-box input:focus ~ label,
.text-box input:not(:placeholder-shown) ~ label {
top: -20px;
left: 10px;
}<div class="text-box">
<input placeholder=" ">
<label>Some placeholder</label>
</div>You can then customize the exact placeholder behavior, for example by adding a smooth transition or different colors for different states.
4
You can use javascript for this.
In asp.net core 6 project with css library Bootstrap 5; I am using floating Input like that
<div class="form-floating mb-3">
<input type="email"
class="form-control"
id="floatingInput"
placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
Also you can write label manually.
3