HTML Forms

Learn How to Create Forms and Collect User Information

In this class, students will learn how HTML forms are used to collect data from users such as names, emails, passwords, and messages.

Class Objective

Understand what HTML forms are
Create different input fields
Build a simple form to collect user information

Introduction to HTML Forms

HTML forms are used to collect data from users.

Login form
Registration form
Contact form

Form Tag

The <form> tag is used to create a form.


<form>
    <!-- form elements go here -->
</form>

Input Fields

Text Input


<input type="text" placeholder="Enter your name">

Email Input


<input type="email" placeholder="Enter your email">

Password Input


<input type="password" placeholder="Enter your password">

Number Input


<input type="number" placeholder="Enter your age">

Radio Buttons and Checkboxes

Radio Buttons


<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

Checkboxes


<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript

Dropdown and Textarea

Dropdown Menu


<select>
    <option>Select Course</option>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

Textarea


<textarea rows="4" cols="30" placeholder="Enter your message"></textarea>

Submit Button


<input type="submit" value="Submit">

Complete Form Example


<form>
    <label>Name:</label><br>
    <input type="text"><br><br>

    <label>Email:</label><br>
    <input type="email"><br><br>

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

    <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<br><br>

    <input type="submit" value="Register">
</form>

Run Code

Practice Task

Create a student registration form
Use text, email, password, radio, checkbox, and submit button

Assignment

Create a Contact Us form
Add name, email, message, and submit button

Previous Next