Input Elements in HTML Forms – CBSE Class 10

Let’s learn in a fun, clear way with examples, tips, and scenario questions!

---

1. Input Elements

Key Points

• Input elements are used inside HTML forms to collect information from users.
• They are created with the <input> tag.
• The type attribute decides what kind of input it is (text box, password, etc.).
• Some common input types:
  • text: For single-line text.
  • password: For secret inputs (like passwords).
  • radio: Let you select one option from a group.
  • checkbox: Let you select many options.
  • submit: Button to send form data.
  • reset: Button to clear all entries.

---

Detailed Explanation & Examples

(A) Input Elements Collect Different Kinds of Data

• Input elements are the main way users interact with forms.
• You need different types to ask for names, passwords, hobbies, choices, etc.

Example 1: Asking for username

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

Example 2: Checkbox for hobbies

<input type="checkbox" name="hobby" value="reading" /> Reading

Example 3: Radio button for gender

<input type="radio" name="gender" value="M" /> Male

---

(B) The type Attribute Is Essential

• Changing the type changes what the input does.
• You must pick the proper type for the expected data!

Example 1: type="password" to keep input hidden
Example 2: type="submit" to add a form submit button
Example 3: type="checkbox" for multiple selections

---

(C) name Attribute Sends Information

• The browser uses the name to send data to the server.
• If you miss the name, your input won’t be included in form submission.

Example 1:
If you write <input type="text" name="city">, the value entered will be labeled as city.

Example 2:
Two radio buttons with the same name allow only one to be checked.

Example 3:
If you forget name, nothing is sent when the form submits!

---

2. Adding a TextBox

Key Points

• A textbox collects single-line text (like a name or city).
• It is created using <input type="text">.
• Several attributes help control how it looks and works.

---

Step-by-Step Instructions

1. Write the <input> tag.
2. Set type="text".
3. Give it a name (like name="username").
4. Optionally, set:
   • value for a default value.
   • placeholder for hint text.
   • size to change visible width.
   • maxlength to limit characters.

Example 1:

<input type="text" name="city" placeholder="Enter city name" />

Shows a hint "Enter city name".

Example 2:

<input type="text" name="mobile" maxlength="10" />

Allows only 10 characters (maybe for a mobile number).

Example 3:

<input type="text" name="username" value="student123" />

Shows "student123" as the initial value.

---

3. Adding Checkbox

Key Points

• Checkboxes allow the user to select any number of choices.
• Common for hobbies, interests, or selecting multiple items.
• Created with <input type="checkbox">.
• checked makes a box selected by default.

---

Step-by-Step Instructions

1. Write <input type="checkbox">.
2. Give it name and value attributes.
3. Optional: use checked if you want it ticked already.

Example 1:

<input type="checkbox" name="sub" value="Maths" /> Maths

Lets the user pick Maths as a subject.

Example 2:

<input type="checkbox" name="fruit" value="apple" checked /> Apple

The Apple box is already ticked.

Example 3:

<input type="checkbox" name="favpet" value="dog" /> Dog
<input type="checkbox" name="favpet" value="cat" /> Cat

You can select both Dog and Cat.

---

4. Adding a Radio Button

Key Points

• Radio buttons let you pick one option out of many.
• Common for selecting gender, Yes/No, or a single preferred choice.
• Use <input type="radio">.
• All radio buttons in the same group must have the same name.

---

Step-by-Step Instructions

1. Use <input type="radio">.
2. Give all options the same name.
3. Change value for each option.
4. Optionally, use checked to pick a default.

Example 1:

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

Only one can be checked at a time.

Example 2:

<input type="radio" name="payment" value="upi" checked /> UPI
<input type="radio" name="payment" value="cash" /> Cash

"UPI" is selected by default.

Example 3:
Suppose you try this:

<input type="radio" name="car" value="sedan" />
<input type="radio" name="bike" value="scooter" />

Here, you can select both. Why? The name attributes are different! Always use the same name for one group.

---

5. Adding a Password Field

Key Points

• Password inputs hide what the user types (dots or stars show instead).
• Used for passwords or confidential information.
• Created with <input type="password">.
• You can limit the number of characters and show a placeholder.

---

Step-by-Step Instructions

1. Use <input type="password">.
2. Add a name (like userpwd).
3. Add maxlength if you wish.
4. Add placeholder for hints.

Example 1:

<input type="password" name="loginpwd" placeholder="Enter password" />

Example 2:

<input type="password" name="adminpwd" maxlength="8" />

You can type only 8 characters.

Example 3:

<input type="password" name="pwd" value="123456" />

Shows hidden characters (dots or stars), not "123456".

---

⭐ Activity: Creating a Basic HTML Form

Goal:
To practice using textbox, password, checkbox, and radio input elements in one form.

Step-by-Step Instructions

1. Open Notepad or any code editor.

2. Paste this code:

   <form>
     Name:
     <input
       type="text"
       name="name"
       placeholder="Enter name"
       maxlength="20"
     /><br /><br />
     Password:
     <input
       type="password"
       name="pwd"
       placeholder="Enter password"
       maxlength="8"
     /><br /><br />
     Hobbies:<br />
     <input type="checkbox" name="hobby" value="music" /> Music
     <input type="checkbox" name="hobby" value="sports" /> Sports <br /><br />
     Gender:<br />
     <input type="radio" name="gender" value="male" /> Male
     <input type="radio" name="gender" value="female" /> Female<br /><br />
     <input type="submit" value="Submit" />
     <input type="reset" value="Clear Form" />
   </form>
   

3. Save as form.html.

4. Open in your browser to see the form.

Observations

• Textboxes let you type. Try exceeding their maxlength — you’ll see characters stop.
• Password field displays dots or stars, not real characters.
• Multiple checkboxes can be selected together.
• Only one radio button can be ticked at a time because the name is the same.
• Try using the submit and reset buttons.

---

💡 Summary Table Recap

Input Type	Tag Example	Purpose
Text	<input type="text">	Single-line text input
Checkbox	<input type="checkbox">	Multiple selections
Radio	<input type="radio">	One choice from many
Password	<input type="password">	Hidden text for security

---

📝 Key Points for Exams

1. All input elements use <input>.
2. type changes the function of the input.
3. name must be given or else data won’t be sent.
4. Checkboxes = many; Radio buttons = one; Textbox = single line.
5. Password field hides the input for privacy.

---

Scenario Based Questions

1. Scenario: Your school form asks students to select multiple hobbies, like Music, Dance, and Sports.

• Question: Which input element should you use and why?
• Answer: Use <input type="checkbox"> for each hobby because checkboxes let users select any number of activities.

2. Scenario: A sign-up form on a website wants users to enter a password. The password must not be visible as it is typed.

• Question: What type of input should be used?
• Answer: Use <input type="password">, so the password is protected and shown as dots or stars.

3. Scenario: You are designing a college application form. The user must select their gender: Male, Female, or Other, but only one is allowed.

• Question: How should these options be implemented?
• Answer: Use radio buttons (<input type="radio">) with the same name, so only one option can be selected at a time.

4. Scenario: Your friend creates a form but forgets to add name attributes to inputs.

• Question: What problem will this cause?
• Answer: When the form is submitted, data from those inputs will not be sent to the server, because browser uses name as the identifier.

5. Scenario: Your teacher wants to add a field for "Full Name" with a maximum of 30 characters in the admission form.

• Question: How can you achieve this using HTML?
• Answer: Use

<input type="text" name="fullname" maxlength="30" />

which lets users enter up to 30 characters only.

---