Question 174794 in Html Question posted in
Some basic documentation can be found here.

Html – How to add fixed placeholder text to an input box and prevent the user from deleting it on a web page?

Working on an ordering table for a new product and one of the columns is to specify the RAL color of the product.

I want to have fixed text that the user can’t delete so all they have to do is enter a four digit number after that which relates to the RAL colour.

The problem I’m having is the input is going over the fixed text and not after it – see below.

input over fixed text

Please ignore the design of the table as I’m working on the functionaility for now and its looking a bit rubbish.

HTML:

<td class="lst-input-ral-box">
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
     <span class="ral-placeholder">RAL</span>
 </td>

CSS:

.lst-input-ral-box {
   position: relative; 
}
.input {
    display: block; 
    border: 1px solid #d7d6d6; 
    background: #fff;
    padding: 10px 10px 10px 20px;
    width: 195px;
}
.ral-placeholder {
    position: absolute; 
    display: block;
    left: 5px; 
    top: 3px; 
    z-index: 9;  
}

Any help on this would be greatly appreciated as I’m fairly new to ‘complex’ coding.

Tags:

2

Answers


  1. 0

    Don’t put the static text inside the input, put it before the input. You can style it to "appear" to be inside the input by removing the border/outline/etc. from the input and adding it to the containing element. For example:

    .lst-input-ral-box {
  border: 1px solid #d7d6d6;
}
.lst-input-ral-box:focus-within {
  border: 1px solid #000;
}
input {
  border: none;
  outline: none;
}
    <table>
  <tr>
    <td class="lst-input-ral-box">
     <span class="ral-placeholder">RAL</span>
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
   </td>
  </tr>
</table>

    Edit: For completeness, this can be further improved by changing the <span> to a <label>, which will focus the <input> when activated. I’ve also reduced the "gap" between the two contained elements, so the full clickable area should activate the <input>:

    .lst-input-ral-box {
  border: 1px solid #d7d6d6;
  display: flex;
  gap: 0;
}
.lst-input-ral-box:focus-within {
  border: 1px solid #000;
}
input {
  border: none;
  outline: none;
}
    <table>
  <tr>
    <td class="lst-input-ral-box">
     <label for="ral" class="ral-placeholder">RAL</label>
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
   </td>
  </tr>
</table>

    Note that a <label> for an <input> has an important semantic meaning. One should take accessibility into consideration here, as not all users will visually observe or care about this stylistic placement.

    Does this element "label" the input? Semantically that’s for you to decide. Combinations of aria- attributes and other functionality can also be used to achieve reasonable designs while keeping the markup semantically clear.

    Login or Signup to reply.
  2. 0

    if I have well understood, you want to add 4 digits after the "RAL" constant right ?

    Is so, you should replace

    <input value="" id="ral" maxlength="4" autofocus="autofocus">
<span class="ral-placeholder">RAL</span>

    with:

    <label for="ral" class="ral-placeholder">RAL</label>
<input type="text" value="" id="ral" name="ral" maxlength="4" autofocus="autofocus">

    PS : you have to know that the name attribute is a good practice to use correctly in the for="" from <label> tag, even if id is working also.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search