JavaScript HTML Input
Working with form inputs and user data
📝 HTML Input Elements
JavaScript can read, validate, and manipulate HTML input elements like text fields, checkboxes, radio buttons, and more.
// Get input value
let userInput = document.getElementById("myInput").value;
console.log("User entered: " + userInput);
Common Input Types
Text Input
Single line text
<input type="text" id="textInput">Number Input
Numeric values only
<input type="number" id="numberInput">Email Input
Email addresses
<input type="email" id="emailInput">Password Input
Hidden text
<input type="password" id="passwordInput">🔹 Getting Input Values
Read what users type into input fields:
<input type="text" id="userInput" placeholder="Type something...">
<button onclick="showInput()">Show Input</button>
<p id="output"></p>
<script>
function showInput() {
let inputValue = document.getElementById("userInput").value;
document.getElementById("output").innerHTML = "You typed: " + inputValue;
}
</script>Try it:
🔹 Working with Checkboxes
Handle checkbox selections:
<input type="checkbox" id="agree" value="yes">
<label for="agree">I agree to the terms</label>
<button onclick="checkAgreement()">Check Status</button>
<script>
function checkAgreement() {
let checkbox = document.getElementById("agree");
if (checkbox.checked) {
alert("Thank you for agreeing!");
} else {
alert("Please agree to continue");
}
}
</script>Try it:
🔹 Radio Buttons
Handle single-choice selections:
<input type="radio" id="small" name="size" value="small">
<label for="small">Small</label>
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium</label>
<input type="radio" id="large" name="size" value="large">
<label for="large">Large</label>
<button onclick="getSize()">Get Selected Size</button>
<script>
function getSize() {
let radios = document.getElementsByName("size");
for (let radio of radios) {
if (radio.checked) {
alert("Selected size: " + radio.value);
break;
}
}
}
</script>Try it:
🔹 Select Dropdown
Work with dropdown menus:
<select id="colorSelect">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<button onclick="getColor()">Get Color</button>
<script>
function getColor() {
let select = document.getElementById("colorSelect");
let selectedColor = select.value;
alert("Selected color: " + selectedColor);
}
</script>Try it:
🔹 Form Validation
Check if user input is valid:
<form onsubmit="return validateForm()">
<input type="text" id="username" placeholder="Username" required>
<input type="email" id="email" placeholder="Email" required>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let username = document.getElementById("username").value;
let email = document.getElementById("email").value;
if (username.length < 3) {
alert("Username must be at least 3 characters");
return false;
}
if (!email.includes("@")) {
alert("Please enter a valid email");
return false;
}
alert("Form is valid!");
return true;
}
</script>🔹 Input Events
Respond to user typing in real-time:
<input type="text" id="liveInput" placeholder="Type here..." oninput="updateOutput()">
<p id="liveOutput">You typed: </p>
<script>
function updateOutput() {
let input = document.getElementById("liveInput").value;
document.getElementById("liveOutput").innerHTML = "You typed: " + input;
}
</script>Try it:
You typed: