Label inside input cell but vanish when you fill in my field

HTML & CSS
1

I have tested demo link http://steadicat.github.io/labels/
and placed label inside input cell. Is there only solution to put label inside elements as it will be shown Email address inside input field but when I click it will stay there but it should vanish when I fill in the field value.

2

Having the label disappear entirely is a really bad idea. If the browser uses autofill, the visitor doesn’t know what the prompt is. It is better the move the label.

See this pen of @PaulOB for an example.

3

Thank you for the message!
Nice example but I try to vanish Email inside input. I tried to separate DIV elements for input and label. An example:

<form class="place">

<div class="form-row">

<input class="inp" id="firstname" type="text" required>

<label class="placehold" for="firstname">Enter your <b>First Name</b> </label>
  
</div>

</form>

into

<form class="place">

<div class="form-newsletter">
<div class="...">

<label class="placehold" for="firstname">Enter your <b>First Name</b> </label>
  
</div>

<div class="...">

<input class="inp" id="firstname" type="text" required>
  
</div></div>

</form>

When I test my script it should vanish First Name and filled in content like John Papa, but First Name will be kept even you place value in the field. Is there a CSS trick to vanish First Name?

4

If you want to make the label vanish then in my example you could just scale to zero.

e.g.

.inp:focus + label,.inp:valid + label{
	transform:translateY(-95%) scale(0);
}

Refer to the codepen for the full code.

However as already mentioned that is the worst thing you can do to your user when they are trying to fill in forms as it gives no clue to as to what content those inputs should hold when trying to review the form or if indeed as is often the case autofill has wrongly inserted the incorrect fields automatically.

You are indeed no better off than having just used the placeholder attribute without a label.

e.g.

<form class="place">
  <div class="form-row">
    <input class="inp" id="firstname" type="text" required placeholder="Enter your First name">
  </div>
</form>

That is also bad practice as inputs need visible labels (apart from those that explicitly do something like submit).

Or have we misunderstood your requirement?

5

I see it is connected for=“firstname” inside label with the input ID. Should be done connection <input class=“inp” id=“firstname” … See id=“firstname”
Is this also needed?
I agree it can be many usability issues but I try to replicate example.

6

I’m not quite sure if I’m following correctly but its best practice to associate labels with their inputs and this is done by matching the for attribute on the label to the inputs id. This makes it easier to navigate as a click on the label focuses the input in question.

7

I need to test further. Thank you for all honest help.

8

I have tested many times your suggested script and found out a problem why label is all the time there. If I modify type as email it will be an issue. An example:

<input class="inp" id="myemailid" **type="email"**

Can be solved this issue as label will not vanish in this case.

9

You seem to be replicating the placeholder element so I’m not really sure where we are going with this. You could just hide the label off screen and use the placeholder if you are hiding the label visually anyway.

My demo was really only a proof of concept but when you start adding validation into the routine things get complicated.

I’ve updated the demo to do what I think you are asking (except I am still moving the label rather than hiding).

I added the placeholder attribute but hid it with css and then used the fact that the placeholder would be shown when and invalid entry was present. It needs testing because when you start messing with the default behaviours you often lose semantics and accessibility. :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.