HTML5 Forms – Complete Guide
1. <form> Tag
Defines a form that collects user input.
Common Attributes:
action: URL where the form data is sent
method: HTTP method (GET, POST)
target: Where to display the response (_self, _blank, etc.)
autocomplete: Enable/disable autocomplete (on, off)
novalidate: Disables validation
enctype: Encoding of form data (urlencoded, multipart/form-data, text/plain)
name: Name of the form
2. <input> Tag and Input Types
Multipurpose field that accepts different types of input.
Important input types:
text
password
email
url
tel
number
range
date
time
datetime-local
month
week
search
color
checkbox
radio
file
submit
reset
button
Common Attributes:
type
name
value
placeholder
required
readonly
disabled
maxlength
min
max
step
pattern
autocomplete
checked
multiple
size
id
class
style
list
accept
3. <textarea>
Attributes:
name
rows
cols
placeholder
maxlength
required
readonly
disabled
wrap
4. <select> and <option>
Attributes:
<select>: name, required, multiple, disabled, size
<option>: value, selected, disabled
5. <button>
Attributes:
type
name
value
disabled
6. <label>
Attributes:
for
form
7. <fieldset> and <legend>
Attributes:
Used to group controls
Legend gives group a title
8. <datalist>
Attributes:
Used for autocomplete options for <input>
9. <output>
Attributes:
for
name
10. <progress>
Attributes:
value
max
11. <meter>
Attributes:
value
min
max
low
high
optimum
Example: Complete Form with All Controls
<form action="/submit" method="post" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name" name="username" required placeholder="Enter your
name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password"><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br>
<label for="color">Pick a color:</label>
<input type="color" id="color" name="favcolor"><br>
<label for="range">Volume:</label>
<input type="range" id="range" name="volume" min="0" max="100"><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="pk">Pakistan</option>
<option value="us">USA</option>
</select><br>
<label for="bio">About You:</label>
<textarea id="bio" name="bio" rows="4" cols="30"></textarea><br>
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc"><br>
<label for="browser">Choose a browser:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Edge">
<option value="Firefox">
</datalist><br>
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
