JavaScript Forms
Forms are used to collect user input. JavaScript can validate and process form data.
Accessing Form Elements
You can access form elements using their id or name:
let username = document.getElementById("username").value;
Validating Input
You can validate user input before submitting the form:
let form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
let username = document.getElementById("username").value;
if (username === "") {
alert("Username is required!");
event.preventDefault(); // Prevent form submission
}
});
Example
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
let username = document.getElementById("username").value;
if (username === "") {
alert("Username is required!");
event.preventDefault();
}
});
</script>
</body>
</html>