50 Mins intermediate
6. Forms & Inputs
HTML
Forms & Inputs
Forms are how users send data to your server — logins, signups, search bars, checkout pages. Every input you've ever typed on the web is an HTML form element.
📝 Text Input
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter username">
🔒 Password Input
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd" placeholder="Enter password">
📧 Email, Number & Date
<label for="email">Email:</label><br>
<input type="email" id="email" placeholder="you@example.com">
<br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" min="1" max="120" placeholder="25">
<br><br>
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob">
☑️ Checkboxes & Radio Buttons
<p>Select your skills:</p>
<input type="checkbox" id="html" name="skill" value="html">
<label for="html"> HTML</label><br>
<input type="checkbox" id="css" name="skill" value="css">
<label for="css"> CSS</label><br>
<br>
<p>Choose your plan:</p>
<input type="radio" id="free" name="plan" value="free">
<label for="free"> Free</label><br>
<input type="radio" id="pro" name="plan" value="pro">
<label for="pro"> Pro — $9/month</label>
📋 Full Login Form
<form action="/login" method="POST">
<h3>Login</h3>
<label for="user">Username</label><br>
<input type="text" id="user" name="username" required placeholder="Enter username">
<br><br>
<label for="pass">Password</label><br>
<input type="password" id="pass" name="password" required placeholder="Enter password">
<br><br>
<button type="submit">Sign In</button>
</form>
Knowledge Check
Ready to test your understanding of 6. Forms & Inputs?