Chapter 7 Beginner 58 Questions

Practice Questions — Forms, Inputs, and Form Validation

← Back to Notes

18 Easy

18 Medium

7 Hard

Topic-Specific Questions

Question 1

Easy

What does this HTML display?

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

A single-line box with grey hint text.

A single-line text input field with 'Enter name' shown in grey until the user types.

Question 2

Easy

Create a form with a single email input and a submit button.

Use form, input type=email, and button type=submit.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Submit</button>
</form>

Question 3

Easy

Which attribute makes an input field mandatory?

Users cannot leave it empty.

required

Question 4

Easy

What input type should you use for a password field?

It hides what the user types.

type="password"

Question 5

Easy

What does create?

A box that can be ticked on or off.

A checkbox — a square box users can tick. Lets them pick multiple options.

Question 6

Easy

Create a dropdown (select) where users can pick their favourite sport: Cricket, Football, or Hockey.

Use select with option tags inside.

<label for="sport">Sport:</label>
<select id="sport" name="sport">
  <option value="cricket">Cricket</option>
  <option value="football">Football</option>
  <option value="hockey">Hockey</option>
</select>

Question 7

Easy

What element should you use for multi-line text input like a comment?

It is not input.

<textarea>

Question 8

Easy

Aarav's form is sending nothing to the server. Find the bug:

<form action="/submit" method="POST">
  <input type="text" id="username">
  <button type="submit">Go</button>
</form>

The server needs a key to identify the data.

Missing name attribute. Add name="username" to the input.

Question 9

Easy

Create 3 radio buttons for gender: Male, Female, Other. They should be grouped so only one can be selected.

Give them all the same name.

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

Question 10

Easy

What does do?

It connects the label to an input.

Links the label to the input with id="email". Clicking the label focuses that input.

Question 11

Easy

Create a number input that only accepts ages between 5 and 100.

Use type=number with min and max.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="5" max="100">

Question 12

Easy

What input type should you use for a date of birth field?

It opens a calendar.

type="date"

Question 13

Easy

Priya's radio buttons all allow multiple selections. Fix:

<input type="radio" name="pet1" value="dog"> Dog
<input type="radio" name="pet2" value="cat"> Cat
<input type="radio" name="pet3" value="bird"> Bird

Radio buttons need the same name to group.

<input type="radio" name="pet" value="dog"> Dog
<input type="radio" name="pet" value="cat"> Cat
<input type="radio" name="pet" value="bird"> Bird

Question 14

Medium

Create a textarea with 5 rows, 40 columns, maximum 200 characters, and a placeholder 'Tell us about yourself'.

Use rows, cols, maxlength, and placeholder attributes.

<textarea rows="5" cols="40" maxlength="200" placeholder="Tell us about yourself"></textarea>

Question 15

Medium

What is the difference between readonly and disabled?

Both prevent editing, but only one submits the value.

readonly prevents editing but the value IS submitted. disabled prevents editing AND the value is NOT submitted.

Question 16

Medium

Create a fieldset with the legend 'Contact Info' containing email and phone inputs.

Use fieldset, legend, and two inputs.

<fieldset>
  <legend>Contact Info</legend>
  <label>Email: <input type="email" name="email"></label><br>
  <label>Phone: <input type="tel" name="phone"></label>
</fieldset>

Question 17

Medium

What is the difference between name and id on an input field?

One is for the server, one is for labels and CSS.

name is used when submitting the form (the server sees it as the key). id is for labels, CSS, and JavaScript. Most fields need both.

Question 18

Medium

Create a checkbox list for hobbies (Reading, Gaming, Sports, Music). Each should send the value on submit.

Each checkbox needs a name and value. You can give them the same name.

<fieldset>
  <legend>Hobbies</legend>
  <label><input type="checkbox" name="hobby" value="reading"> Reading</label><br>
  <label><input type="checkbox" name="hobby" value="gaming"> Gaming</label><br>
  <label><input type="checkbox" name="hobby" value="sports"> Sports</label><br>
  <label><input type="checkbox" name="hobby" value="music"> Music</label>
</fieldset>

Question 19

Medium

What does pattern="[0-9]{10}" mean on an input?

It is a regex requiring exactly 10 digits.

The input must contain exactly 10 digits (0-9). Useful for Indian phone numbers.

Question 20

Medium

Create a complete form with a phone input requiring exactly 10 digits using pattern.

Use type=tel and pattern="[0-9]{10}".

<form>
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required title="10 digits only">
  <button type="submit">Submit</button>
</form>

Question 21

Medium

Rohan's password field looks broken — users see their passwords. Fix:

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

Change the type.

<input type="password" name="password">

Question 22

Medium

What type of input should you use for uploading an image?

It opens a file picker.

type="file" with accept="image/*"

Question 23

Medium

Create a slider (range) input from 0 to 100 with default value 50 for volume.

Use type=range.

<label for="vol">Volume:</label>
<input type="range" id="vol" name="volume" min="0" max="100" value="50">

Question 24

Medium

Why should you avoid using placeholder as the only label for an input?

It disappears when users type.

Placeholders disappear when the user types, leaving them without context. Screen readers often skip them. Always use a real label.

Question 25

Hard

Build a complete registration form with name, email, password (min 8 chars), age (10-80), gender (radio), interests (checkboxes: Sports, Music, Art), country (select), and bio (textarea). Include proper labels for everything.

Use all the concepts from the chapter.

<!DOCTYPE html>
<html>
<body>
<form action="/signup" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br>

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

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" minlength="8" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="10" max="80" required><br>

  <fieldset><legend>Gender</legend>
    <label><input type="radio" name="gender" value="m"> Male</label>
    <label><input type="radio" name="gender" value="f"> Female</label>
    <label><input type="radio" name="gender" value="o"> Other</label>
  </fieldset>

  <fieldset><legend>Interests</legend>
    <label><input type="checkbox" name="int" value="sports"> Sports</label>
    <label><input type="checkbox" name="int" value="music"> Music</label>
    <label><input type="checkbox" name="int" value="art"> Art</label>
  </fieldset>

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="in">India</option>
    <option value="us">USA</option>
  </select><br>

  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio" rows="4"></textarea><br>

  <button type="submit">Register</button>
</form>
</body>
</html>

Question 26

Hard

Why does not submit 'hello' to the server?

What does disabled do exactly?

The disabled attribute excludes the field from form submission entirely. To still submit it while preventing edits, use readonly instead.

Question 27

Hard

Create a search form that uses the GET method and sends a query parameter named 'q'.

Use method="GET" and input name="q".

<form action="/search" method="GET">
  <label for="q">Search:</label>
  <input type="search" id="q" name="q" placeholder="Search..." required>
  <button type="submit">Go</button>
</form>

Question 28

Hard

Ananya's form has a file upload that never sends the file. Fix:

<form action="/upload" method="POST">
  <input type="file" name="pic">
  <button type="submit">Upload</button>
</form>

The form needs a special attribute for file uploads.

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="pic">
  <button type="submit">Upload</button>
</form>

Mixed & Application Questions

Question 1

Easy

Which tag creates a multi-line text input?

It is not input.

<textarea>

Question 2

Easy

Create a simple form with a text input and submit button. Include a label.

Form, label, input, button.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

Question 3

Easy

What is the purpose of the action attribute on a form?

It is a URL.

It tells the browser where (which URL) to send the form data when submitted.

Question 4

Easy

Why does clicking the label NOT focus the input?

<label>Name:</label>
<input type="text" id="name">

The label and input need to be linked.

The label needs for="name" to link it to the input.

Question 5

Easy

Which two attributes let you set a number range on a number input?

They limit the smallest and largest values.

min and max

Question 6

Medium

Create a form with three inputs: username (required, min 3 chars), email (required, must be valid), password (required, min 8 chars).

Use required, minlength, and type=email.

<form>
  <label for="u">Username:</label>
  <input type="text" id="u" name="username" required minlength="3"><br>

  <label for="e">Email:</label>
  <input type="email" id="e" name="email" required><br>

  <label for="p">Password:</label>
  <input type="password" id="p" name="password" required minlength="8"><br>

  <button type="submit">Sign Up</button>
</form>

Question 7

Medium

What is the difference between GET and POST methods?

Where does the data go in each case?

GET puts the data in the URL (visible). POST sends it hidden in the request body. POST is used for sensitive data like passwords.

Question 8

Medium

The input shows plain text instead of dots:

<input type="text" name="password" required>

Wrong type.

Change type="text" to type="password".

Question 9

Medium

Create a color picker input with a default of red (#ff0000).

type=color and value=#ff0000.

<label for="c">Pick a colour:</label>
<input type="color" id="c" name="favcolor" value="#ff0000">

Question 10

Medium

What does the 'selected' attribute do on an option tag?

It affects which option shows by default.

It makes that option the default selected one in the dropdown.

Question 11

Medium

Create a select dropdown of 3 cities with Mumbai pre-selected.

Use the selected attribute.

<select name="city">
  <option value="delhi">Delhi</option>
  <option value="mumbai" selected>Mumbai</option>
  <option value="bangalore">Bangalore</option>
</select>

Question 12

Medium

When filling a signup form, which autocomplete value should you use for a new password?

Not 'current-password'.

autocomplete="new-password"

Question 13

Hard

The form lets users submit an empty username. Why?

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

Typo in an attribute name.

The attribute should be required, not require. Invalid attributes are ignored.

Question 14

Hard

Build a complete feedback form inside a styled card. Include name, email, a rating slider (1-5), a dropdown for 'Would you recommend us?' (Yes/No/Maybe), and a textarea for comments.

Use CSS in head to style the card.

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial; background: #f0f0f0; padding: 30px; }
.card { background: white; max-width: 450px; margin: auto; padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
label { display: block; margin-top: 10px; font-weight: bold; }
input, select, textarea { width: 100%; padding: 8px; box-sizing: border-box; margin-top: 4px; }
button { margin-top: 15px; padding: 10px 20px; background: #2ecc71; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<div class="card">
  <h2>We Value Your Feedback</h2>
  <form>
    <label for="n">Name:</label>
    <input type="text" id="n" name="name" required>

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

    <label for="r">Rating (1-5):</label>
    <input type="range" id="r" name="rating" min="1" max="5" value="3">

    <label for="rec">Would you recommend us?</label>
    <select id="rec" name="recommend">
      <option value="yes">Yes</option>
      <option value="no">No</option>
      <option value="maybe">Maybe</option>
    </select>

    <label for="c">Comments:</label>
    <textarea id="c" name="comments" rows="4"></textarea>

    <button type="submit">Send</button>
  </form>
</div>
</body>
</html>

Question 15

Hard

What happens if you include in a form?

Hidden fields are invisible but still submitted.

The input is invisible on the page but its value ('abc123') is sent to the server as token=abc123 when the form is submitted.

Multiple Choice Questions

MCQ 1

Which tag wraps all the inputs in an HTML form?

A. <input>
B. <form>
C. <fields>
D. <submit>

Answer: B
B is correct. The <form> tag wraps all form elements. It has action and method attributes that control where and how the data is sent.

MCQ 2

Which input type hides what the user types?

A. type="hidden"
B. type="secret"
C. type="password"
D. type="text"

Answer: C
C is correct. type="password" masks the characters as dots. type="hidden" is an invisible field that does not show on the page at all.

MCQ 3

Which attribute makes a field mandatory in HTML5?

A. must
B. required
C. mandatory
D. needed

Answer: B
B is correct. The required attribute stops form submission if the field is empty.

MCQ 4

Which tag creates a dropdown list?

A. <dropdown>
B. <list>
C. <select>
D. <options>

Answer: C
C is correct. <select> creates a dropdown, and each <option> inside is one choice.

MCQ 5

Which input type lets users pick multiple options from a group?

A. radio
B. checkbox
C. select
D. button

Answer: B
B is correct. Checkboxes allow multiple selections. Radio buttons only allow one selection from a group.

MCQ 6

Which tag is used for multi-line text input?

A. <input type="text">
B. <longtext>
C. <textarea>
D. <input type="multiline">

Answer: C
C is correct. <textarea> is for multi-line input like comments and bios.

MCQ 7

What does the for attribute on a do?

A. Sets the label's color
B. Links the label to an input with a matching id
C. Counts how many times the label appears
D. Adds a loop

Answer: B
B is correct. for="name" links the label to the input with id="name". Clicking the label then focuses the input.

MCQ 8

Which button type submits the form?

A. type="submit"
B. type="button"
C. type="go"
D. type="send"

Answer: A
A is correct. type="submit" is the default button type inside a form. Clicking it submits the form data to the action URL.

MCQ 9

Which input type should you use for a phone number on mobile?

A. text
B. number
C. tel
D. phone

Answer: C
C is correct. type="tel" opens the numeric keyboard on mobile devices. There is no type="phone".

MCQ 10

Which attribute is used to set the URL that receives the form data?

A. target
B. action
C. send
D. destination

Answer: B
B is correct. The action attribute specifies the URL where the form data will be sent on submit.

MCQ 11

Which tag is used to give a form field group a visible title?

A. <title>
B. <legend>
C. <caption>
D. <h1>

Answer: B
B is correct. <legend> goes inside <fieldset> to provide a title for the group.

MCQ 12

Which attribute sets the maximum number of characters in a text input?

A. max
B. maxchars
C. maxlength
D. limit

Answer: C
C is correct. maxlength limits text inputs to a maximum number of characters. max is for numbers and dates.

MCQ 13

What is the difference between name and id on an input?

A. They are the same thing
B. name is used when submitting, id is for labels and scripts
C. id is used when submitting, name is for scripts
D. Both are required for submission

Answer: B
B is correct. Only name is sent to the server. id is for labels, CSS, and JavaScript. They are often both needed.

MCQ 14

Which method sends form data in the URL?

A. GET
B. POST
C. PUT
D. SEND

Answer: A
A is correct. GET puts the data in the URL as query parameters (like ?q=hello). POST sends it hidden in the request body.

MCQ 15

Why should you use instead of just placeholder?

A. Placeholders look ugly
B. Placeholders disappear when typing and hurt accessibility
C. Placeholder is deprecated
D. Labels are faster

Answer: B
B is correct. Placeholders disappear when the user starts typing, and screen readers often skip them. Labels are the accessible way to describe fields.

MCQ 16

What does the disabled attribute do on a form input?

A. Hides the input
B. Prevents editing and excludes the field from submission
C. Prevents editing but still submits the value
D. Makes it required

Answer: B
B is correct. Disabled stops the user from editing AND excludes the field from being submitted. Use readonly if you still want the value submitted.

MCQ 17

Radio buttons in the same group must have the same:

A. id
B. value
C. name
D. type

Answer: C
C is correct. Radios sharing the same name become a group, so only one can be selected at a time. They should have different values so the server knows which was picked.

MCQ 18

Which input type would you use for a color picker?

A. type="color"
B. type="hex"
C. type="palette"
D. type="rgb"

Answer: A
A is correct. type="color" opens the browser's built-in color picker. The value is a hex color like #ff0000.

MCQ 19

Which input type creates a slider?

A. type="slider"
B. type="range"
C. type="number"
D. type="bar"

Answer: B
B is correct. type="range" creates a slider. Use min, max, and step to control its range.

MCQ 20

What is the correct form attribute for file uploads to work?

A. action="/upload"
B. method="FILE"
C. enctype="multipart/form-data"
D. type="file"

Answer: C
C is correct. Without enctype="multipart/form-data" on the form, file uploads do not work — the file gets dropped.

MCQ 21

What will this pattern validate?

A. Any number
B. Exactly 4 digits (0-9)
C. At least 4 digits
D. A decimal number

Answer: B
B is correct. [0-9] matches a digit, and {4} means exactly 4. Useful for PINs or OTPs.

MCQ 22

What happens if an input has no name attribute when the form is submitted?

A. The form throws an error
B. The input's value is submitted using its id
C. The input's value is NOT submitted at all
D. The browser adds a random name

Answer: C
C is correct. Only inputs with a name attribute are sent to the server. Fields without name are silently ignored on submit.

MCQ 23

What is the main reason to use fieldset and legend in a form?

A. To add borders
B. To group related fields and improve accessibility
C. To make the form faster
D. To change colors

Answer: B
B is correct. <fieldset> groups related fields visually and semantically. <legend> names the group. Screen readers announce the legend as context for all fields in the group.

MCQ 24

Which autocomplete value is recommended for a new password field on a signup form?

A. off
B. on
C. new-password
D. current-password

Answer: C
C is correct. new-password tells browsers and password managers this is a new account creation, so they should offer to generate a strong password. Use current-password on login forms.

MCQ 25

Which statement about type="email" is TRUE?

A. It checks if the email actually exists
B. It verifies that the user owns the email
C. It checks the format (must have @ and domain)
D. It sends a verification email automatically

Answer: C
C is correct. type="email" only validates the basic format — it cannot check if the email exists or belongs to the user. Real verification requires sending an email from the server.

Coding Challenges

Challenge 1: Simple Contact Form

Easy

Build a complete HTML page with a contact form containing Name, Email, and Message fields, plus a Submit button. All fields should be required and have proper labels.

Sample Input

(No input required)

Sample Output

A form with Name, Email, Message, and Submit button. Browser validates on submit.

Use proper labels with for/id. Required attribute on all fields. type=email for the email field. textarea for the message.

<!DOCTYPE html>
<html>
<head>
  <title>Contact Us</title>
  <style>
    body { font-family: Arial; padding: 30px; }
    label { display: block; margin-top: 10px; }
    input, textarea { width: 300px; padding: 6px; }
    button { margin-top: 15px; padding: 8px 16px; }
  </style>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

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

    <label for="msg">Message:</label>
    <textarea id="msg" name="message" rows="5" required></textarea>

    <button type="submit">Send</button>
  </form>
</body>
</html>

Challenge 2: Login Page

Easy

Build a login form with Email and Password fields, a 'Remember me' checkbox, and a Log In button. Add correct autocomplete attributes.

Sample Input

(No input required)

Sample Output

A login form with email, password, checkbox, and button.

autocomplete="email" on the email field and autocomplete="current-password" on the password.

<!DOCTYPE html>
<html>
<head>
  <title>Log In</title>
  <style>
    body { font-family: Arial; padding: 40px; }
    form { max-width: 320px; }
    label { display: block; margin-top: 10px; }
    input[type="email"], input[type="password"] { width: 100%; padding: 8px; box-sizing: border-box; }
    button { margin-top: 15px; padding: 10px; width: 100%; background: #4a90e2; color: white; border: none; }
  </style>
</head>
<body>
  <h1>Log In</h1>
  <form action="/login" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required autocomplete="email">

    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="password" required autocomplete="current-password">

    <label><input type="checkbox" name="remember"> Remember me</label>

    <button type="submit">Log In</button>
  </form>
</body>
</html>

Challenge 3: Survey with Radios and Checkboxes

Medium

Build a survey with: a 'How satisfied?' question with 5 radio options (Very Happy, Happy, Neutral, Sad, Very Sad), and a 'What did you like?' question with checkbox options (Food, Staff, Price, Speed, Cleanliness).

Sample Input

(No input required)

Sample Output

A survey form with one-choice and multi-choice questions.

Radios must share the same name. Use fieldset for grouping.

<!DOCTYPE html>
<html>
<head>
  <title>Survey</title>
</head>
<body>
  <h1>Customer Survey</h1>
  <form>
    <fieldset>
      <legend>How satisfied are you?</legend>
      <label><input type="radio" name="satisfaction" value="5" required> Very Happy</label><br>
      <label><input type="radio" name="satisfaction" value="4"> Happy</label><br>
      <label><input type="radio" name="satisfaction" value="3"> Neutral</label><br>
      <label><input type="radio" name="satisfaction" value="2"> Sad</label><br>
      <label><input type="radio" name="satisfaction" value="1"> Very Sad</label>
    </fieldset>

    <fieldset>
      <legend>What did you like?</legend>
      <label><input type="checkbox" name="liked" value="food"> Food</label><br>
      <label><input type="checkbox" name="liked" value="staff"> Staff</label><br>
      <label><input type="checkbox" name="liked" value="price"> Price</label><br>
      <label><input type="checkbox" name="liked" value="speed"> Speed</label><br>
      <label><input type="checkbox" name="liked" value="clean"> Cleanliness</label>
    </fieldset>

    <button type="submit">Submit</button>
  </form>
</body>
</html>

Challenge 4: Registration Form

Medium

Build a complete registration form with fields: full name (required, min 3 chars), email (required), password (required, min 8 chars), age (number, 10-100), gender (radio), country (select: India, USA, UK), and terms & conditions checkbox (required).

Sample Input

(No input required)

Sample Output

A full registration form with all validation working.

All HTML5 validation. Proper labels. Fieldset for gender.

<!DOCTYPE html>
<html>
<head>
  <title>Register</title>
  <style>
    body { font-family: Arial; max-width: 500px; margin: auto; padding: 20px; }
    label { display: block; margin-top: 10px; }
    input, select { width: 100%; padding: 6px; box-sizing: border-box; }
    button { margin-top: 15px; padding: 10px 20px; background: #22c55e; color: white; border: none; }
  </style>
</head>
<body>
  <h1>Create Account</h1>
  <form action="/register" method="POST">
    <label for="n">Full Name:</label>
    <input type="text" id="n" name="name" required minlength="3">

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

    <label for="p">Password:</label>
    <input type="password" id="p" name="password" required minlength="8">

    <label for="a">Age:</label>
    <input type="number" id="a" name="age" min="10" max="100" required>

    <fieldset>
      <legend>Gender</legend>
      <label><input type="radio" name="gender" value="m" required> Male</label>
      <label><input type="radio" name="gender" value="f"> Female</label>
      <label><input type="radio" name="gender" value="o"> Other</label>
    </fieldset>

    <label for="c">Country:</label>
    <select id="c" name="country" required>
      <option value="">-- Select --</option>
      <option value="in">India</option>
      <option value="us">USA</option>
      <option value="uk">UK</option>
    </select>

    <label><input type="checkbox" name="terms" required> I agree to the terms</label>

    <button type="submit">Register</button>
  </form>
</body>
</html>

Challenge 5: Pizza Order Form

Medium

Build a pizza order form with: size (radio: small, medium, large), crust (radio: thin, thick, stuffed), toppings (checkboxes: cheese, mushrooms, peppers, olives, onions), quantity (number 1-10), and delivery date (date).

Sample Input

(No input required)

Sample Output

A pizza order form with size, crust, toppings, quantity, and delivery date.

Use fieldsets for size, crust, and toppings.

<!DOCTYPE html>
<html>
<head>
  <title>Order Pizza</title>
</head>
<body>
  <h1>Order Your Pizza</h1>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s" required> Small</label>
      <label><input type="radio" name="size" value="m"> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>

    <fieldset>
      <legend>Crust</legend>
      <label><input type="radio" name="crust" value="thin" required> Thin</label>
      <label><input type="radio" name="crust" value="thick"> Thick</label>
      <label><input type="radio" name="crust" value="stuffed"> Stuffed</label>
    </fieldset>

    <fieldset>
      <legend>Toppings</legend>
      <label><input type="checkbox" name="top" value="cheese"> Extra Cheese</label><br>
      <label><input type="checkbox" name="top" value="mush"> Mushrooms</label><br>
      <label><input type="checkbox" name="top" value="peppers"> Peppers</label><br>
      <label><input type="checkbox" name="top" value="olives"> Olives</label><br>
      <label><input type="checkbox" name="top" value="onions"> Onions</label>
    </fieldset>

    <label for="q">Quantity:</label>
    <input type="number" id="q" name="qty" min="1" max="10" value="1" required><br>

    <label for="d">Delivery Date:</label>
    <input type="date" id="d" name="delivery" required><br><br>

    <button type="submit">Place Order</button>
  </form>
</body>
</html>

Challenge 6: Upload Profile with Hidden Field

Hard

Build a profile update form with: profile picture upload (image files only), display name, bio (textarea, 200 char max), and a hidden field sending userId=12345.

Sample Input

(No input required)

Sample Output

A form with file upload, name, bio, and hidden userId field.

File input with accept="image/*". Form must have enctype="multipart/form-data".

<!DOCTYPE html>
<html>
<head>
  <title>Update Profile</title>
</head>
<body>
  <h1>Update Your Profile</h1>
  <form action="/profile" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="userId" value="12345">

    <label for="pic">Profile Picture:</label>
    <input type="file" id="pic" name="picture" accept="image/*" required><br>

    <label for="dname">Display Name:</label>
    <input type="text" id="dname" name="display" required><br>

    <label for="bio">Bio:</label>
    <textarea id="bio" name="bio" rows="4" maxlength="200" placeholder="Max 200 characters"></textarea><br><br>

    <button type="submit">Save</button>
  </form>
</body>
</html>

Challenge 7: Event Registration with Validation

Hard

Build an event registration form with: name, email, phone (10 digits only, use pattern), event date (only future dates, use min), number of tickets (1-10), T-shirt size dropdown (S, M, L, XL), and dietary preference (radio: Veg, Non-Veg, Vegan).

Sample Input

(No input required)

Sample Output

A form with phone pattern validation and future-date-only event date.

Phone must use pattern="[0-9]{10}". Event date has min attribute.

<!DOCTYPE html>
<html>
<head>
  <title>Event Registration</title>
  <style>
    body { font-family: Arial; padding: 20px; max-width: 500px; margin: auto; }
    label { display: block; margin-top: 10px; }
    input, select { width: 100%; padding: 6px; box-sizing: border-box; }
  </style>
</head>
<body>
  <h1>Register for Tech Fest 2026</h1>
  <form>
    <label for="n">Full Name:</label>
    <input type="text" id="n" name="name" required>

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

    <label for="p">Phone (10 digits):</label>
    <input type="tel" id="p" name="phone" pattern="[0-9]{10}" required title="Enter 10 digits">

    <label for="d">Event Date:</label>
    <input type="date" id="d" name="date" min="2026-05-01" required>

    <label for="t">Tickets:</label>
    <input type="number" id="t" name="tickets" min="1" max="10" value="1" required>

    <label for="s">T-Shirt Size:</label>
    <select id="s" name="size" required>
      <option value="">-- Select --</option>
      <option value="S">Small</option>
      <option value="M">Medium</option>
      <option value="L">Large</option>
      <option value="XL">Extra Large</option>
    </select>

    <fieldset>
      <legend>Meal Preference</legend>
      <label><input type="radio" name="meal" value="veg" required> Vegetarian</label>
      <label><input type="radio" name="meal" value="nonveg"> Non-Vegetarian</label>
      <label><input type="radio" name="meal" value="vegan"> Vegan</label>
    </fieldset>

    <button type="submit">Register</button>
  </form>
</body>
</html>

Challenge 8: Advanced Settings Form

Hard

Build a user settings page with: username (readonly, pre-filled), email (required), theme color (color picker), notification volume (range slider 0-100), favorite language (select), dark mode (checkbox), and bio (textarea). Include proper sections with fieldsets.

Sample Input

(No input required)

Sample Output

A complete settings form with color picker, slider, and many input types.

Use readonly on username. Group related fields with fieldsets.

<!DOCTYPE html>
<html>
<head>
  <title>Settings</title>
  <style>
    body { font-family: Arial; padding: 20px; max-width: 500px; margin: auto; }
    fieldset { margin-bottom: 15px; }
    label { display: block; margin-top: 8px; }
    input, select, textarea { width: 100%; padding: 6px; box-sizing: border-box; }
    input[type="color"] { width: 60px; }
    input[type="range"], input[type="checkbox"] { width: auto; }
  </style>
</head>
<body>
  <h1>Account Settings</h1>
  <form action="/settings" method="POST">
    <fieldset>
      <legend>Profile</legend>
      <label for="u">Username:</label>
      <input type="text" id="u" name="username" value="ananya_codes" readonly>

      <label for="e">Email:</label>
      <input type="email" id="e" name="email" value="ananya@example.com" required>

      <label for="b">Bio:</label>
      <textarea id="b" name="bio" rows="3" maxlength="150"></textarea>
    </fieldset>

    <fieldset>
      <legend>Preferences</legend>
      <label for="col">Theme Colour:</label>
      <input type="color" id="col" name="theme" value="#4a90e2">

      <label for="vol">Notification Volume:</label>
      <input type="range" id="vol" name="volume" min="0" max="100" value="70">

      <label for="lang">Language:</label>
      <select id="lang" name="language">
        <option value="en">English</option>
        <option value="hi">Hindi</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
      </select>

      <label><input type="checkbox" name="darkmode"> Enable Dark Mode</label>
    </fieldset>

    <button type="submit">Save Changes</button>
  </form>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass