Working with Forms and Input

HTML <input> elements let users type information. JavaScript can read what the user typed using the .value property:

<input type="text" id="nameInput" placeholder="Enter your name">
<button id="submitBtn">Submit</button>

<script>
  document.getElementById("submitBtn").onclick = function() {
    const name = document.getElementById("nameInput").value;
    alert("Hello, " + name + "!");
  };
</script>

Here's what happens: when the user clicks "Submit", JavaScript reads the .value of the input field, stores it in a variable called name, and shows it in an alert. The "Hello, " + name + "!" part uses string concatenation — joining pieces of text together with the + operator.

Common input types you can read with .value:

<input type="text" id="textInput">       <!-- plain text -->
<input type="email" id="emailInput">     <!-- email address -->
<input type="number" id="ageInput">      <!-- numbers only -->
<input type="password" id="pwInput">     <!-- hidden characters -->
<textarea id="messageInput"></textarea>  <!-- multi-line text -->
<select id="choiceInput">                <!-- dropdown -->
  <option>Option A</option>
  <option>Option B</option>
</select>

All of these work the same way: get the element with getElementById, then read its .value. It doesn't matter if it's a text field, a dropdown, or a textarea — the pattern is identical.

Let's put together a complete example: a name input with a submit button that displays a personalized greeting:

HTML:

<h1>Welcome!</h1>

<label for="nameInput">What's your name?</label>
<input type="text" id="nameInput" placeholder="Type here...">

<button id="greetBtn">Say Hello</button>

<p id="greeting"></p>

JavaScript:

document.getElementById("greetBtn").onclick = function() {
  // Step 1: Read what the user typed
  const name = document.getElementById("nameInput").value;

  // Step 2: Create the greeting
  const message = "Hello, " + name + "! Welcome to the site.";

  // Step 3: Display it on the page
  document.getElementById("greeting").innerHTML = message;
};

This is the pattern you'll use over and over: read input, process it, display output. Whether you're building a search box, a comment form, or a login page, these same three steps apply.

The user experience: the user types their name, clicks the button, and sees the greeting appear instantly on the page. No page reload, no waiting. This is what makes JavaScript-powered forms feel smoother than traditional HTML forms that require a page refresh.

Users don't always fill in forms correctly. Validation is checking the input before you use it — and showing a helpful message when something's wrong:

document.getElementById("greetBtn").onclick = function() {
  const name = document.getElementById("nameInput").value;

  // Check if the input is empty
  if (name === "") {
    alert("Please enter your name before clicking the button.");
    return;  // Stop here — don't continue
  }

  // If we got here, the input is valid
  document.getElementById("greeting").innerHTML =
    "Hello, " + name + "!";
};

Let's break down the validation logic:

• if (name === "") — the if statement checks a condition. If it's true, the code inside the curly braces runs. Here, it checks whether name is an empty string.
• === — the strict equality operator. It checks if two values are exactly the same type and value. Use === for comparisons, not = (which assigns a value).
• return; — exits the function immediately. Without it, the code after the if block would still run, which we don't want.

More useful validations:

// Check minimum length
if (name.length < 2) {
  alert("Name must be at least 2 characters.");
  return;
}

// Check maximum length
if (name.length > 50) {
  alert("Name is too long. Please shorten it.");
  return;
}

// Check if it's a number (for age fields)
const age = document.getElementById("ageInput").value;
if (age === "" || isNaN(age)) {
  alert("Please enter a valid age.");
  return;
}

Better validation UX: Instead of using alert() for error messages, you can display them directly on the page — just like the greeting. Users prefer inline messages over popups:

const name = document.getElementById("nameInput").value;
const errorEl = document.getElementById("error");

if (name === "") {
  errorEl.innerHTML = "Please enter your name.";
  errorEl.style.color = "red";
  return;
}

// Clear the error when input is valid
errorEl.innerHTML = "";

In the examples so far, we've used alert() for simple feedback. But for a better user experience, display results directly on the page:

Create a dedicated element for results in your HTML:

<p id="result"></p>

Then update it from JavaScript:

const resultEl = document.getElementById("result");

// Show a success message
resultEl.innerHTML = "✓ Form submitted successfully!";
resultEl.style.color = "green";

// Show an error message
resultEl.innerHTML = "✗ Please fill in all required fields.";
resultEl.style.color = "red";

Why inline results are better than alerts:

• Alerts block the user — they have to click "OK" before doing anything else. Inline messages don't interrupt.
• Inline messages persist on the page. Users can re-read them. Alerts disappear when dismissed.
• You can style inline messages (colors, icons, positioning) to match your site's design.
• Inline messages feel more like a real application. Alerts feel like a 1990s website.

Here's a complete "What's your name?" form that puts everything together — input, validation, and inline result display:

Full HTML + JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Greeting Form</title>
  </head>
  <body>
    <h1>Welcome!</h1>

    <label for="nameInput">What's your name?</label>
    <br>
    <input type="text" id="nameInput" placeholder="Type your name...">
    <br><br>
    <button id="greetBtn">Say Hello</button>

    <p id="greeting"></p>
    <p id="error" style="color: red;"></p>

    <script>
      document.getElementById("greetBtn").onclick = function() {
        // Clear previous messages
        document.getElementById("error").innerHTML = "";
        document.getElementById("greeting").innerHTML = "";

        // Read input
        const name = document.getElementById("nameInput").value;

        // Validate
        if (name === "") {
          document.getElementById("error").innerHTML =
            "Please enter your name.";
          return;
        }

        if (name.length < 2) {
          document.getElementById("error").innerHTML =
            "Name must be at least 2 characters.";
          return;
        }

        // Display result
        document.getElementById("greeting").innerHTML =
          "Hello, " + name + "! Welcome to the site.";
      };
    </script>
  </body>
</html>

What this does: the user types their name, clicks "Say Hello", and sees a personalized greeting appear on the page — no reload, no popup. If they forget to type a name or type just one character, they get a helpful inline error message instead. The form clears old messages before showing new ones, so the display stays clean.

This is a genuinely useful pattern. You can adapt it for:

• Newsletter signup forms
• Contact forms with validation
• Search boxes that show results
• Login forms with error messages
• Any place a user types something and expects feedback

Build a simple greeting form from scratch:

1. Create an HTML file with a text input and a submit button
2. Add a paragraph with id="greeting" for the result and another with id="error" for errors
3. Write JavaScript that reads the input value when the button is clicked
4. Validate: check for empty input, check minimum length
5. Display the greeting (or error) directly on the page
6. Bonus: clear the input field after a successful greeting so the user can type a new name

You now know enough JavaScript to build a working, validated form. That's a real, practical skill.