I want to create a template inside the input box: when i click on the input it will automatically select me the word "yourName" and (maybe) pressing tab switch to the word "yourEmail". Basically I want that the user can modify ONLY "yourName" and "yourEmail", the rest must remain like that, how do I do?
input {
width: 200px;
height: 20px;
}<input type="text" value="<yourName>(yourEmail)">You can use two inputs and fake the border like the following. The look is not really nice, but you can apply your own styles to it.
div {
border: 1px solid grey;
border-radius: 2px;
width: max-content;
}
div:hover {
border-color: dimgrey;
}
div input {
display: inline;
min-width: 7rem;
width: max-content;
/* you could add the following line, if you want no outlining on focus */
/* outline: none;*/
border: none;
}<div>
<span><</span>
<input type="text" placeholder="yourname">
<span>></span>
<span>(</span>
<input type="email" placeholder="yourEmail">
<span>)</span>
</div>