CODING ACADEMY • LESSON 7 OF 8

Forms & Data

Collect user input, validate it, and turn it into useful page content.

<form id=”profile”><br /> <input id=”name” placeholder=”Your name” required><br /> <button>Create Greeting</button><br /> </form><br /> <p id=”out”></p><br /> <script><br /> document.getElementById(‘profile’).addEventListener(‘submit’, function(e){<br /> e.preventDefault();<br /> const name = document.getElementById(‘name’).value.trim();<br /> document.getElementById(‘out’).textContent = name ? ‘Welcome, ‘ + name + ‘!’ : ‘Enter your name.’;<br /> });<br /> </script>

FORM & DATA BASICS

input • textarea • select • submit • required • preventDefault() • value • trim() • JSON • local state • validation

Next: Final Website Project →

Your code saves automatically on this device.