Set template in the input box

Question

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)">

Answer 1

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>&lt;</span>
  <input type="text" placeholder="yourname">
  <span>&gt;</span>
  <span>(</span>
  <input type="email" placeholder="yourEmail">
  <span>)</span>
</div>