Lesson 7 - Form Handling

7.1 Capturing User Input

First, let's design our form using HTML:

<form id="userForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Submit</button>
</form>

Currently, this form lacks handling capabilities. Before we proceed to handle user input, we need to capture it. This can be achieved with the following JavaScript:

const usernameInput = document.getElementById('username');
const emailInput = document.getElementById('email');

const username = usernameInput.value;
const email = emailInput.value;

In the code above, we've defined two constants (username and email) to hold the user inputs for username and email. These variables will be utilized in our upcoming lesson on handling form submissions.