how to keep input text and value different in html - php

Question

I am designing a form in which i have an input text field,
And my text is of the following type,
abc-112233
scenario for new record -
I want first 4 characters of text to be fixated/non-editable in the field, ie. "abc-" and user can type number coming after the hyphen, but when the form gets submitted, i want it to get submitted as abc- 112233, not just 112233.
Hence in short, i want the text to be shown as 112233 (abc- fixed) inside the input, but value after submission should be whole "abc-112233".
scenario for previous record to be updated -
and for when the input field is pre-filled according to records in database, ie. when the record needs to be updated, i want to show it as abc- 112233
my code is according to following,
<div class="">
<label for="inputError" class="">Name</label>
<input
type="text"
id="" class="form-control"
name="name"
value="<?php
if(isset($data->name)){
echo $data->name;
} else{
echo "";
}
?>"
required
>
</div>
right now, the value is,
$data->name
which is abc-112233.
and the text shown inside the input is also abc-112233,
I want the text to be 112233(with abc fixated/non-editable on left hand side) and the value to be abc-112233

Answer 1

I don't think you can do it within only 1 <input> element, maybe you can try separated into 2, one is fixed for "abc-" and the other is for user input. Then you can control whether to show / hide the fixed one.

Answer 2

You could consider using pseudo code to display the prefix.
label {
display: block;
}
.demo:before {
content:"abc-";
}
<label for="demo">Demo input</label>
<span class="demo"><input id="demo" type="text"></span>

Answer 3

You could use this approach:
body, input
{
font-family: arial;
font-size: 14px;
}
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
padding-left: 40px;
}
.editable::before
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 1;
z-index: 1;
}
<div class="editable" data-placeholder="ABC- ">
<input type="text" value="" />
</div>
you will need to play with the CSS a bit to get it to look right. I presume you are using Bootstrap based on your ".form-control" class.
Basicly this is just forcing content to overlay on top of your input. not inside of it. otherwise you will need to prepend or append content to the input value using JavaScript