Table of Contents
HTML Forms
Forms allow users to input data and interact with web applications.
Basic Form Structure
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
Input Types
<input type="text" placeholder="Enter text">
<input type="email" placeholder="Enter email">
<input type="password" placeholder="Enter password">
<input type="number" min="1" max="100">
<input type="date">
<input type="file" accept=".jpg,.png">
<input type="checkbox" id="agree">
<input type="radio" name="gender" value="male">
Textarea and Select
<textarea name="message" rows="4" cols="50">
Default text here...
</textarea>
<select name="country">
<option value="">Select Country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
Fieldset and Legend
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
Form Validation
<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">
<input type="number" min="18" max="99">
<input type="text" maxlength="50">