Mastering HTML Forms - Step-by-Step
From Basics to Complete Forms
By: Your Name
What is an HTML Form?
- A form collects user data.
- Usually sent to a server for processing.
<form action="submit.php" method="post">
<!-- Form Elements -->
</form>
Attributes of <form>
action - URL to send data
method - GET or POST
target - Where to display response
autocomplete - Enable/disable autofill
novalidate - Disable default validation
Input Fields - Overview
<input type="text">
<input type="email">
<input type="number">
<input type="password">
<input type="date">
<input type="file">
<input type="submit">
Text Field
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
Password Field
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" minlength="6" required>
Email & Number Fields
<label>Email:</label>
<input type="email" name="email" required><br>
<label>Age:</label>
<input type="number" name="age" min="1" max="120">
Radio Buttons
<p>Gender:</p>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
Checkboxes
<p>Hobbies:</p>
<input type="checkbox" name="hobby" value="Reading"> Reading
<input type="checkbox" name="hobby" value="Sports"> Sports
Dropdown (Select Menu)
<label>Country:</label>
<select name="country">
<option value="Kenya">Kenya</option>
<option value="Uganda">Uganda</option>
</select>
Textarea
<label for="msg">Message:</label><br>
<textarea id="msg" name="message" rows="4" cols="50"></textarea>
Date and Time Inputs
<input type="date" name="dob">
<input type="time" name="class_time">
<input type="datetime-local" name="appointment">
File Upload
<label for="resume">Upload CV:</label>
<input type="file" id="resume" name="resume">
Hidden Field
<input type="hidden" name="user_id" value="12345">
Buttons
<input type="submit" value="Submit">
<input type="reset" value="Clear Form">
<button type="button" onclick="alert('Clicked!')">Click Me</button>
Form Validation Attributes
required - Must be filled
min, max - Numbers range
minlength, maxlength - Text length
pattern - Regex for format
readonly, disabled - Limited user actions
Complete Form Example
<form action="submit.php" method="post">
<input type="text" name="name" placeholder="Full Name" required><br>
<input type="email" name="email" required><br>
<input type="password" name="pass" required><br>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female<br>
<input type="checkbox" name="interest" value="coding"> Coding<br>
<select name="level">
<option>Beginner</option>
<option>Intermediate</option>
</select><br>
<textarea name="message"></textarea><br>
<input type="submit">
</form>
Styling Forms (CSS)
input, textarea, select {
padding: 10px;
margin: 10px;
width: 100%;
}
Form Best Practices
- Use labels for accessibility
- Group inputs with <fieldset> and <legend>
- Use placeholder text
- Validate with HTML or JavaScript
EXERCISE 1 - Basic Form
Create a form that asks for:
- Full Name
- Email
- Age
- Gender (radio)
- Country (dropdown)
- Submit button
EXERCISE 2 - Registration Form
Create a Student Registration Form with:
- Full Name
- Email
- Phone Number
- Date of Birth
- Gender (radio)
- Subjects (checkboxes)
- File upload for photo
- Comments (textarea)
- Submit and Reset buttons
EXERCISE 3 - Job Application Form
Form should include:
- Name
- Email
- Phone
- CV Upload
- Position Applying For (dropdown)
- Cover Letter (textarea)
- Agreement Checkbox
- Submit button
Bonus: JavaScript Form Validation
<script>
function validateForm() {
let name = document.forms["myForm"]["name"].value;
if (name == "") {
alert("Name is required");
return false;
</script>
<form name="myForm" onsubmit="return validateForm()">
<input type="text" name="name">
<input type="submit">
</form>
Wrap-Up & Resources
- w3schools.com/html/html_forms.asp
- MDN Web Docs - HTML Forms
- Practice daily to master form creation.
Thank You
Questions or Help?
Your Name
Your Contact / Email
