<body>
  <form action="/hello">
    <input type="text" placeholder="username" name="username"/>
    <input type="text" placeholder="todoValue" name="todo"/>
    <button type="submit">submit</button>
  </form>
  <ul id="list">Todo List</ul>
</body>
const form = document.querySelector('form');
const list = document.querySelector('#list');
form.addEventListener('submit', (e)=> {
  e.preventDefault();
  
  const username = form.elements.username;
  const todo = form.elements.todo;
  
  const li = document.createElement('li');
  
  li.innerText = `${username.value} : ${todo.value}`;
  
  list.append(li);
  
  username.value = "";
  todo.value = "";
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.