Creating HTML Forms
Forms help websites collect information from users, such as contact details or feedback.
Basic Form Structure
<form action="/submit-form" method="POST">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="fullname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="13" max="120">
<button type="submit">Submit</button>
</fieldset>
</form>
Form Elements
Input Types
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="your@email.com">
<input type="password" placeholder="Enter password">
<input type="number" min="0" max="100" step="1">
<input type="date">
<input type="time">
<input type="file" accept="image/*">
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to newsletter</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="range" min="0" max="100" value="50">
<input type="color" value="#ff0000">
Select Dropdown
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
</select>
Textarea
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message here..."></textarea>
Form Validation
HTML5 Validation Attributes
<input type="text" required>
<input type="text" minlength="3">
<input type="text" maxlength="50">
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$">
<input type="text" required oninvalid="this.setCustomValidity('Please enter your name')" oninput="this.setCustomValidity('')">
Complete Form Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/contact" method="POST" novalidate>
<fieldset>
<legend>Your Information</legend>
<div>
<label for="firstName">First Name: *</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div>
<label for="lastName">Last Name: *</label>
<input type="text" id="lastName" name="lastName" required>
</div>
<div>
<label for="email">Email: *</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</div>
</fieldset>
<fieldset>
<legend>Your Message</legend>
<div>
<label for="subject">Subject: *</label>
<select id="subject" name="subject" required>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Question</option>
<option value="feedback">Feedback</option>
</select>
</div>
<div>
<label for="message">Message: *</label>
<textarea id="message" name="message" rows="5" required placeholder="Please describe your inquiry..."></textarea>
</div>
<div>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to our newsletter</label>
</div>
</fieldset>
<div>
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
</div>
</form>
</body>
</html>
