HTML Forms, Input Types, Text, Radio, Checkbox, CBSE Class 10

Complete tutorial on HTML forms for CBSE Class 10 ICT. Covers form tag, input types, text, radio, checkbox, select, textarea with examples.

HTML forms allow users to enter data on a web page. Forms are used for registration, login, surveys, and feedback. This is one of the most important chapters in CBSE Class 10 ICT, and form-related questions appear in almost every exam.

What is an HTML Form?

An HTML form is a section of a web page that contains interactive controls like text fields, buttons, checkboxes, and dropdown menus. When a user fills out a form and clicks submit, the data is sent to a server for processing.

The Form Tag

The <form> tag creates a form container:

<form action="process.php" method="POST">
    <!-- Form elements go here -->
</form>

Form Tag Attributes

Attribute	Purpose	Values
`action`	URL where form data is sent	Any URL or file path
`method`	How data is sent	`GET` or `POST`
`name`	Name of the form	Any text

GET vs POST

Feature	GET Method	POST Method
Data visibility	Data appears in the URL	Data is hidden in the request body
Data length	Limited (about 2048 characters)	No limit
Security	Less secure	More secure
Bookmarking	Can be bookmarked	Cannot be bookmarked
Use case	Searching, filtering	Login, registration, sensitive data

The Input Tag

The <input> tag is the most commonly used form element. It is a self-closing tag.

<input type="text" name="username">

Input Types

1. Text Input

Creates a single-line text field:

<form>
    Name: <input type="text" name="fullname" size="30" maxlength="50">
    <br><br>
    City: <input type="text" name="city" value="Delhi">
</form>

Attribute	Purpose
`name`	Name of the field (used when sending data)
`size`	Width of the text field in characters
`maxlength`	Maximum characters allowed
`value`	Default text in the field
`placeholder`	Hint text shown when field is empty

2. Password Input

Creates a text field where characters are hidden:

Password: <input type="password" name="pwd" size="20" maxlength="15">

The entered text appears as dots or asterisks (****).

3. Radio Button

Radio buttons let the user select only one option from a group. All radio buttons in a group must have the same name.

<p>Gender:</p>
<input type="radio" name="gender" value="male"> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other

Exam tip: Radio buttons with the same name attribute form a group. Only one can be selected at a time. Use checked to pre-select one option.

<input type="radio" name="gender" value="male" checked> Male

4. Checkbox

Checkboxes let the user select multiple options:

<p>Select your hobbies:</p>
<input type="checkbox" name="hobby1" value="reading"> Reading
<br>
<input type="checkbox" name="hobby2" value="sports"> Sports
<br>
<input type="checkbox" name="hobby3" value="music" checked> Music
<br>
<input type="checkbox" name="hobby4" value="coding"> Coding

Key difference: Radio buttons allow only ONE selection. Checkboxes allow MULTIPLE selections.

5. Submit Button

Sends the form data to the server:

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

6. Reset Button

Clears all form fields and resets to default values:

<input type="reset" value="Clear Form">

7. Button

A generic button (does not submit the form by default):

<input type="button" value="Click Me">

8. Hidden Input

Stores data that the user cannot see or modify:

<input type="hidden" name="formID" value="registration001">

9. File Upload

Allows users to upload files:

<input type="file" name="document">

Textarea

The <textarea> tag creates a multi-line text input area:

<textarea name="message" rows="5" cols="40">
Enter your message here...
</textarea>

Attribute	Purpose
`name`	Name of the field
`rows`	Number of visible text lines (height)
`cols`	Width of the text area in characters

Select (Dropdown) List

The <select> tag creates a dropdown list:

<select name="state">
    <option value="">-- Select State --</option>
    <option value="delhi">Delhi</option>
    <option value="maharashtra">Maharashtra</option>
    <option value="karnataka">Karnataka</option>
    <option value="tamilnadu" selected>Tamil Nadu</option>
    <option value="westbengal">West Bengal</option>
</select>

Use the selected attribute to pre-select an option.

Multiple Selection List

<select name="subjects" multiple size="4">
    <option value="english">English</option>
    <option value="maths">Mathematics</option>
    <option value="science">Science</option>
    <option value="hindi">Hindi</option>
    <option value="sst">Social Studies</option>
</select>

The multiple attribute allows selecting more than one option (hold Ctrl/Cmd to select multiple). The size attribute shows that many options at once.

Label Tag

The <label> tag associates text with a form element, making it clickable:

<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname">

<br><br>

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

When you click the label text, the associated input field gets focused or selected.

Fieldset and Legend

<fieldset> groups related form elements with a border, and <legend> provides a title:

<fieldset>
    <legend>Personal Information</legend>
    Name: <input type="text" name="name"><br><br>
    Email: <input type="text" name="email"><br><br>
    Phone: <input type="text" name="phone">
</fieldset>

Complete Example: Student Registration Form

This is a typical practical exam question:

<!DOCTYPE html>
<html>
<head>
    <title>Student Registration Form</title>
</head>
<body bgcolor="#f5f5f5">
    <center><h1>Student Registration Form</h1></center>

    <form action="register.php" method="POST">
        <fieldset>
            <legend><b>Personal Details</b></legend>

            <p>
                Full Name:
                <input type="text" name="fullname" size="30" maxlength="50">
            </p>

            <p>
                Date of Birth:
                <input type="text" name="dob" placeholder="DD/MM/YYYY">
            </p>

            <p>
                Gender:
                <input type="radio" name="gender" value="male"> Male
                <input type="radio" name="gender" value="female"> Female
            </p>

            <p>
                Class:
                <select name="class">
                    <option value="">-- Select Class --</option>
                    <option value="9">Class 9</option>
                    <option value="10">Class 10</option>
                    <option value="11">Class 11</option>
                    <option value="12">Class 12</option>
                </select>
            </p>
        </fieldset>

        <br>

        <fieldset>
            <legend><b>Contact Details</b></legend>

            <p>
                Email:
                <input type="text" name="email" size="30">
            </p>

            <p>
                Phone:
                <input type="text" name="phone" size="15" maxlength="10">
            </p>

            <p>
                Address:<br>
                <textarea name="address" rows="3" cols="40"></textarea>
            </p>

            <p>
                State:
                <select name="state">
                    <option value="delhi">Delhi</option>
                    <option value="up">Uttar Pradesh</option>
                    <option value="maharashtra">Maharashtra</option>
                    <option value="karnataka">Karnataka</option>
                    <option value="wb">West Bengal</option>
                </select>
            </p>
        </fieldset>

        <br>

        <fieldset>
            <legend><b>Interests</b></legend>

            <p>Select your hobbies:</p>
            <input type="checkbox" name="h1" value="reading"> Reading
            <input type="checkbox" name="h2" value="sports"> Sports
            <input type="checkbox" name="h3" value="music"> Music
            <input type="checkbox" name="h4" value="coding"> Coding
            <input type="checkbox" name="h5" value="art"> Art

            <p>
                Upload Photo:
                <input type="file" name="photo">
            </p>
        </fieldset>

        <br>

        <center>
            <input type="submit" value="Register">
            &nbsp;&nbsp;
            <input type="reset" value="Clear Form">
        </center>
    </form>
</body>
</html>

Comparison Table: Form Elements

Element	Tag	Purpose	Selection
Text field	`<input type="text">`	Single-line text input	N/A
Password	`<input type="password">`	Hidden text input	N/A
Radio button	`<input type="radio">`	Choose one from group	Single
Checkbox	`<input type="checkbox">`	Choose multiple options	Multiple
Dropdown	`<select>` with `<option>`	Choose from list	Single or Multiple
Text area	`<textarea>`	Multi-line text input	N/A
Submit	`<input type="submit">`	Submit the form	N/A
Reset	`<input type="reset">`	Clear the form	N/A

Important Questions

Q1. Differentiate between radio button and checkbox.

Radio Button	Checkbox
Only one option can be selected	Multiple options can be selected
Used for mutually exclusive choices	Used for independent choices
All buttons in a group share the same `name`	Each checkbox can have a different `name`
Circular in shape	Square in shape
Example: Gender selection	Example: Hobbies selection

Q2. Differentiate between GET and POST methods.

GET sends data through the URL, making it visible and limited in size. POST sends data in the request body, making it hidden and allowing unlimited data. POST is used for sensitive data like passwords, while GET is suitable for search queries.

Q3. What is the difference between textarea and text input?

A text input (<input type="text">) creates a single-line input field, while a textarea (<textarea>) creates a multi-line input area. Text input uses size and maxlength attributes, while textarea uses rows and cols to control size.

Q4. Write HTML code for a feedback form with name, email, rating (radio buttons), and comments (textarea).

<form action="feedback.php" method="POST">
    Name: <input type="text" name="name"><br><br>
    Email: <input type="text" name="email"><br><br>
    Rating:<br>
    <input type="radio" name="rating" value="5"> Excellent<br>
    <input type="radio" name="rating" value="4"> Good<br>
    <input type="radio" name="rating" value="3"> Average<br><br>
    Comments:<br>
    <textarea name="comments" rows="4" cols="40"></textarea><br><br>
    <input type="submit" value="Submit Feedback">
</form>

Quick Revision

<form> creates the form, action specifies where data goes, method specifies GET or POST
Radio buttons = single selection (same name for group)
Checkboxes = multiple selection
Textarea = multi-line text; Text input = single-line text
<select> + <option> = dropdown list
<fieldset> + <legend> = grouped form sections
type="submit" sends the form; type="reset" clears the form, Use checked for default radio/checkbox, selected for default dropdown option