📝 HTML

HTML Forms

⏱ 2 hr3 topicsInteractive

🎯 By the end: You can build an HTML form with the right input field for each kind of data: single line text, hidden passwords, single choice (radio), multiple choice (checkbox) and dropdown selection.

A form is how a web page collects information from a visitor — a login box, a survey, a sign-up page. The CBSE 165 syllabus covers the form structure and the common input fields.

1The form and text inputs

All fields live inside a <form> tag. The most common field is the <input> tag, whose type attribute decides what it does:

Field	HTML	For
Text box	`<input type="text">`	A single line of text (name, city)
Password	`<input type="password">`	Text shown as dots/stars

The name attribute labels the data, and value can set a default. <input> is an empty tag.

<form>
  Name: <input type="text" name="uname">
  Password: <input type="password" name="pass">
</form>

Text fields playground▶ live preview

index.html

<form>
  <p>Username: <input type="text" name="uname" value=""></p>
  <p>Password: <input type="password" name="pass"></p>
  <p><input type="submit" value="Log in"></p>
</form>

Preview

Key points

All input fields live inside a <form> ... </form>.
<input type="text"> is a single-line text box; type="password" hides the text as dots.
The name attribute labels each field's data; <input> is an empty tag.

2Choices: radio buttons and checkboxes

Two field types let users choose from options:

Radio buttons type="radio" — pick exactly one from a group. Give them the same name so only one can be selected.
Checkboxes type="checkbox" — pick any number (zero, one or many).

Gender:
<input type="radio" name="g" value="m"> Male
<input type="radio" name="g" value="f"> Female

Hobbies:
<input type="checkbox" name="h1"> Music
<input type="checkbox" name="h2"> Sports

Radio = one choice (like a radio station). Checkbox = many choices (tick all that apply).

Radio & checkbox playground▶ live preview

index.html

<form>
  <p>Choose one:</p>
  <input type="radio" name="plan"> Free
  <input type="radio" name="plan"> Premium
  <p>Tick all you like:</p>
  <input type="checkbox"> Maths
  <input type="checkbox"> Science
  <input type="checkbox"> Computers
</form>

Preview

Key points

Radio buttons (type="radio") let the user pick exactly ONE option — give the group the same name.
Checkboxes (type="checkbox") let the user pick ANY number of options.
Use radio for single choice, checkbox for multiple choice.

3Selection lists and combo boxes

A selection list (also called a combo box / dropdown) saves space when there are many options. It uses <select> with an <option> for each choice:

<select name="city">
  <option>Delhi</option>
  <option>Mumbai</option>
  <option>Chennai</option>
</select>

By default it shows a dropdown (combo box) — one visible choice that expands.
Add size="n" to show n options at once as a scrollable list box, and multiple to allow more than one selection.

Dropdown playground▶ live preview

index.html

<form>
  <p>Pick your city:
    <select name="city">
      <option>Delhi</option>
      <option>Mumbai</option>
      <option>Chennai</option>
      <option>Kolkata</option>
    </select>
  </p>
</form>

Preview

Key points

<select> with <option> items makes a dropdown / combo box.
By default it shows one choice that drops down; size="n" turns it into a scrollable list box.
Add the multiple attribute to allow selecting more than one option.

★ Practical: a sign-up form

Build one form that collects:

A name in a text box and a password in a password field.
Gender using radio buttons (same name).
Hobbies using checkboxes (pick any number).
A favourite subject from a <select> dropdown.

Ready for the chapter test?

Answer 5 questions. Score 60% or more to mark this chapter complete.

Start the test →

💡 Log in to save your progress and earn the certificate.

← Previous

Tables & Multimedia

Cascading Style Sheets (CSS)