Forms collect user input. JavaScript can read values, validate them, and control submission.
JavaScript Forms
1) Accessing Input Values
Read or set form element values with .value, .checked, and .selectedIndex.
<!-- HTML -->
<input id="username" placeholder="Name">
<!-- JS -->
const uname = document.getElementById('username');
uname.value = 'Sonu';
console.log(uname.value);
2) Prevent Form Submission
Use preventDefault() to stop the page reload on submit.
<!-- HTML -->
<form id="myForm">
<input placeholder="Type">
<button>Submit</button>
</form>
<!-- JS -->
myForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('Form stopped');
});
3) Basic Validation
Check empty fields, length, or patterns before allowing submission.
myForm.addEventListener('submit', function(e) {
const val = uname.value.trim();
if (!val) {
e.preventDefault();
alert('Name is required');
}
});
4) Radio Buttons & Checkboxes
Use .checked to see if they’re selected.
<!-- HTML -->
<input type="radio" name="g" value="M">Male
<input type="radio" name="g" value="F">Female
<input type="checkbox" id="agree"> I agree
<!-- JS -->
const agree = document.getElementById('agree');
console.log(agree.checked);
5) Select Dropdown
Access selected option by selectedIndex or value.
<!-- HTML -->
<select id="city">
<option>Delhi</option>
<option>Mumbai</option>
</select>
<!-- JS -->
const city = document.getElementById('city');
console.log(city.value);
6) Built-in Validity API
Use HTML5 attributes (required, pattern) and check validity in JS.
<!-- HTML -->
<input id="email" type="email" required>
<!-- JS -->
const email = document.getElementById('email');
if (!email.checkValidity()) {
email.reportValidity();
}
Tip: Always combine HTML5 validation attributes (
required, minlength, pattern) with custom JS checks for best UX.