How can I add a default text in my HTML text just like in the image below

Right now this is my html codes:

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"></td>
  </div>

EDIT:

How can I add text that cannot be erased

How can I add a default text in my HTML text just like in the image below

Right now this is my html codes:

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"></td>
  </div>

EDIT:

How can I add text that cannot be erased

• javascript
• html
• css

4 Answers 4

As per the recent update of your question, you need to add readonly attribute to your input tag. If you are trying to disable part input, which is not possible, refer to last section of my answer.

<input type="text" value="SOME_DEFAULT_VALUE" readonly>

Adding readonly will prevent users to change the text in your input box.

Note: Don't rely on readonly as it can be easily overridden using dev tools. Make sure you do have server side checks for the same.

Before you updated your question

Add value attribute to your input tag if you want some default text in the input box

<input type="text" value="Default Val">

If you are talking about the prefix i.e country specific STD code like +63, then you can do is split up your input tags, and set a default value in the first tag and let your user write the number in the other tag.

Edit, with the tag value:

https://www.w3schools./tags/att_input_value.asp

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"  value="default text"></td>
  </div>

you mean you want to add a default text in "input" tag? you need to add "value" attribute in there!

<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="put your default text right here"></td>

input tag not support for before attribute in css, but you can using wrapper by other tags. look for example below:

html + css

<div class="input-row">
    Phone number:<span id="phoneNumber"><input type="text" name="phoneNumber" value="" placeholder="1234567890"></span>
</div>
<style>
    .input-row {
        display: inline-block;
        line-height: 1;
    }
    span#phoneNumber::before {
        content: '+63';
        display: inline-block;
        border: 1px solid #ccc;
        padding: 1px;
        line-height: 20px;
        margin: 0px;
    }
    input[name='phoneNumber']{
        line-height: 18px;
        border: 1px solid #ccc;
        margin: 0px;
        padding: 2px;
    }
</style>