HTML Forms Explained (With Code)

What is an HTML Form?

HTML forms are used to collect user input such as text, selections, passwords, files, and more. Forms are commonly used for:

Login pages
Registration forms
Feedback systems
Search boxes

Basic Syntax


<form>
   <!-- input fields go here -->
</form>

Input Type: Text and Number

Output:

Code:


<form>
<label>Name:</label><br>
<input type="text" placeholder="Enter your name" required>

<br>

<label>Age:</label><br>
<input type="number" min="1" max="100">
</form>

Important Attributes:

placeholder → Hint text
required → Must fill before submit
min / max → Limit numeric values

Input Type: Date and Time


<form>
<label>Select Date:</label><br>
<input type="date">

<br>

<label>Select Time:</label><br>
<input type="time">
</form>

Used for booking systems, appointments, scheduling etc.

Input Type: Email and Password


<form>
<label>Email:</label><br>
<input type="email" placeholder="example@mail.com">

<br>

<label>Password:</label><br>
<input type="password" maxlength="12">
</form>

email → Validates email format eg example@mail.com
password → Hides input characters for security

Radio and Checkbox

Output:

Code:


<form>
<label>Gender:</label><br>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

<br><br>

<label>Skills:</label><br>
<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript
</form>

radio → Select only ONE option
checkbox → Select MULTIPLE options

Select Dropdown

Output:

Code:


<form>

<label>Select Course:</label><br>

<select>

<option>HTML</option>
<option>CSS</option>
<option selected>-- Choose Course --</option>
<option>JavaScript</option>
<option>PHP</option>
</select>

</form>

Important:

<select> → Creates dropdown
<option> → Dropdown items
selected → Default selected option

Textarea Input

Output:

Code:


<form>
<label>Message:</label><br>
<textarea rows="4" cols="30"
placeholder="Type your message"></textarea>
</form>

textarea → Multi-line text input
rows / cols → Set size of textarea

Range Input


<form>
<label>Rate:</label><br>
<input type="range" min="0" max="10">

range → Slider for numeric input
min / max → Set slider limits

Search Input


<form>
<label>Search:</label><br>
<input type="search">
</form>

color → Color picker input

Color Input


<form>
<label>Pick Color:</label><br>
<input type="color">
</form>

color → Color picker input

File Input

Output:

Code:


<form>
<input type="file" value="Upload File">
</form>

File input allows users to upload files from their device.

Form Buttons

Output:

Code:


<form>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Normal Button">
</form>

Submit → Submits form data
Reset → Resets all form fields to their default values
Button → Creates a clickable button without any default behavior

Conclusion

HTML forms are essential for interactive websites. By combining different input types, developers can collect structured data efficiently and improve user experience.