<!DOCTYPE html>
<html lang="en">
<head>
  <title>submit</title>
</head>
<body>
  <form onsubmit="handleSubmit(event)">
    <label for="first-name">first name</label>
    <input type="text" id="first-name" name="first-name" /><br />
    <label for="last-name">last name</label>
    <input type="text" id="last-name" name="last-name" /><br />
    <button type="submit">register</button>
  </form>
</body>
</html>
function handleSubmit(event) {
  event.preventDefault();
  const inputs = document.querySelectorAll('form input');
  [firstNameInput, lastNameInput] = inputs;
  alert(`Hi ${firstNameInput.value} ${lastNameInput.value}`)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.