Chapter 8 | User Input

Forms & Input Types

Forms allow users to enter and submit information. In this chapter, you will learn how to create enquiry forms, admission forms, registration forms and feedback forms using HTML.

Start Learning Try Form

form

Creates the main form area for collecting user information.

input

Creates fields like text, email, number, date, password and file.

label

Gives a clear name to each form field.

submit

Sends the form data to the given action page.

Learning Objectives

After This Chapter, You Will Understand

This chapter teaches how to collect user information using HTML forms.

Form Tag

Understand form, action and method attributes.

Input Fields

Use different input types for different data.

Labels

Connect labels with fields for clarity and accessibility.

Validation

Use required, minlength, maxlength and pattern basics.

Form Basics

Creating a Simple HTML Form

A form is used when users need to enter and submit information.

1 form Tag

The <form> tag creates a form section. It commonly uses action and method attributes.

<form action="submit.php" method="post">
# form fields here
</form>

action: Specifies where form data will be sent.
method: Specifies how form data will be sent.

2 label and input

A label describes the input field. An input field allows the user to enter data.

Professional Tip: Always use labels with form fields. It improves clarity and accessibility.

Input Types

Important HTML Input Types

Different input types help collect different kinds of data correctly.

Input Type	Use	Example Code
text	Normal text such as name	<input type="text">
email	Email address	<input type="email">
password	Hidden password field	<input type="password">
number	Numeric value	<input type="number">
tel	Phone number	<input type="tel">
date	Date selection	<input type="date">
radio	Select one option	<input type="radio">
checkbox	Select multiple options	<input type="checkbox">
file	Upload a file	<input type="file">
submit	Submit form data	<input type="submit">

Smart Use: Use the correct input type. For email, use type="email"; for date, use type="date"; for number, use type="number".

Form Controls

textarea, select, option, fieldset and button

HTML forms also provide special controls for messages, dropdowns and grouped fields.

3 textarea and select

The textarea tag is used for long messages. The select and option tags are used for dropdown menus.

<textarea name="message"></textarea>

<select name="course">
<option>HTML with CSS</option>
<option>MS Excel</option>
</select>

4 fieldset and legend

The fieldset tag groups related fields, and legend gives a title to that group.

<fieldset>
<legend>Personal Details</legend>
<input type="text">
</fieldset>

Practice Task: Create a student admission form using fieldset and legend.

Validation Basics

Basic HTML Form Validation

Validation helps collect correct and complete data from users.

required

Forces the user to fill the field before submitting.

minlength / maxlength

Controls minimum and maximum number of characters.

placeholder

Shows hint text inside the input field.

Professional Tip: Browser validation is helpful, but important forms should also be validated on the server side using PHP or backend code.

Real Website Uses

Where Forms Are Used

Forms are important for business, education, enquiries and online services.

Admission

Student admission and registration forms.

Enquiry

Course enquiry and contact forms.

Upload

Photo, document and certificate upload forms.

Feedback

Reviews, ratings and message forms.

Sample Enquiry Form Preview

Try It Yourself

Create a Student Enquiry Form

Edit the code and click Run Code to see the output.

HTML Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Enquiry Form</title>
    <style>
        body{
            font-family:Arial;
            padding:20px;
            background:#f5f9ff;
        }
        form{
            max-width:500px;
            background:white;
            padding:20px;
            border-radius:15px;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
        }
        label{
            font-weight:bold;
            display:block;
            margin-top:12px;
        }
        input, select, textarea{
            width:100%;
            padding:10px;
            margin-top:5px;
            border:1px solid #ccc;
            border-radius:8px;
        }
        button{
            margin-top:15px;
            padding:12px 18px;
            background:#06285f;
            color:white;
            border:none;
            border-radius:25px;
            font-weight:bold;
        }
    </style>
</head>
<body>

<h1>Student Enquiry Form</h1>

<label for="mobile">Mobile Number</label>
        <input type="tel" id="mobile" name="mobile" required>

<label for="email">Email ID</label>
        <input type="email" id="email" name="email" required>

<label for="course">Select Course</label>
        <select id="course" name="course">
            <option>HTML with CSS</option>
            <option>MS Excel</option>
            <option>Tally</option>
        </select>

<label>Learning Mode</label>
        <input type="radio" name="mode" value="online"> Online
        <input type="radio" name="mode" value="offline"> Offline

<label for="message">Message</label>
        <textarea id="message" name="message" rows="4">

Output Preview Browser result

Practice Task: Add a date of birth field, file upload field and checkbox for “I agree to terms”.

Common Mistakes

Mistakes Students Should Avoid

Clean forms are important for user experience and professional websites.

Wrong Habits

Creating input fields without labels
Using text input for email instead of email type
Forgetting name attribute in form fields
Using radio buttons with different name values
Not adding required fields where necessary

Correct Habits

Use label for every important field
Use correct input type for correct data
Use name attribute for submitted fields
Group related radio buttons with same name
Use required for compulsory fields

Remember: HTML forms collect data, but backend language like PHP is needed to save or process that data.

Quick Revision

Remember These Points

Revise these before moving to Chapter 9.

form

The form tag creates the main form section.

input

The input tag creates fields for user data.

label

The label tag gives a clear name to a form field.

textarea

The textarea tag is used for long messages.

select

The select tag creates a dropdown list.

required

The required attribute makes a field compulsory.

Protected Learning Content

Forms & Input Types

form

input

label

submit

After This Chapter, You Will Understand

Form Tag

Input Fields

Labels

Validation

Creating a Simple HTML Form

1 form Tag

2 label and input

Important HTML Input Types

textarea, select, option, fieldset and button

3 textarea and select

4 fieldset and legend

Basic HTML Form Validation

required

minlength / maxlength

placeholder

Where Forms Are Used

Admission

Enquiry

Upload

Feedback

Sample Enquiry Form Preview

Create a Student Enquiry Form

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which tag is used to create a form?

2. Which input type is best for email address?

3. Which tag describes an input field?

4. Which tag is used for long messages?

5. Which attribute makes a field compulsory?

Remember These Points

form

input

label

textarea

select

required