Label disappears when I type in the field

If the text sits inside an empty input and vanishes as you type, it may be placeholder text, not a label. A placeholder is a hint. It does not replace a visible field name.

The fix

Put a label outside the input. Match its for attribute to the input's unique id. Keep the placeholder only if an example adds something.

<label for="email">Email address</label>
<input id="email" name="email" type="email"
       autocomplete="email" placeholder="you@example.com">

Check it

Type an address. The words “Email address” should stay visible. Click those words: the input should receive focus. Tab into the input and check that your browser's accessibility panel names it “Email address”.

I tested this markup in Chromium: the label remained associated with the filled input, clicking it focused the input, and the accessible name was “Email address”. This is not a test of your site's styles or every screen reader.

If you already have a label

Inspect the label while the input is filled. Look for CSS that hides it, clips it or moves it behind the field. Remove that hiding rule or fix the floating-label layout. Adding a second label will not fix a rule hiding the first one.

An aria-label can give a control an accessible name, but it does not draw a visible label. Use visible text so someone can still identify the field after entering a value.

Want this fixed on your page? One agreed HTML or CSS fix costs $29. You keep the code.