<form>
  <input type="submit" value="edit me">
</form>  

<div>Edit me</div>

body {
  font-family: arial, sans-serif;
  font-size: 2vw;
  text-align: center;
}
input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-bottom: 1px dashed #ccc;
  line-height: 1.2;
  background: transparent;
}
div {
  margin: 2em 0;
}

const f = document.querySelector('form');

f.addEventListener('submit', (ev) => {
  let but = f.querySelector('input');
  but.type = (but.type === 'search') ? 'submit' : 'search';
  ev.preventDefault();
});

document.querySelector('div').addEventListener('click', (ev) => {
  let field = ev.target;
  field.contentEditable = field.contentEditable === true ? false: true;
});