Form structure in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the

element in HTML?

Choose the best description of what the element does in an HTML page.

A It groups input elements and sends their data to a server when submitted.

B It styles the page layout and colors for the inputs.

C It creates a clickable button that resets the page content.

D It adds animations to input fields when focused.

💡 Hint

Think about what happens when you fill out a survey or login and press submit.

The element groups input fields and defines how to send their data to a server when the user submits the form.

📝 Syntax

intermediate

Which option correctly creates a text input inside a form?

Look at the code options below. Which one correctly creates a text input field inside a form?

HTML

<form action="/submit">
  <!-- input goes here -->
</form>

A <input type="textfield" name="username">

B <input text="username">

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

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

💡 Hint

The type attribute defines the kind of input. The correct value for a single line text box is 'text'.

The correct syntax for a text input is <input type="text" name="username">. Other options use invalid or unknown attribute values.

❓ rendering

advanced

What will the browser display for this form snippet?

Given the following HTML code, what will the user see in the browser?

HTML

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

A Only a button labeled 'Send' with no input field.

B A label 'Email:' with an email input box and a 'Send' button.

C A text input box with no label and a disabled button.

D An error message because 'required' is not allowed on inputs.

💡 Hint

Labels connect to inputs by the 'for' attribute matching the input's 'id'. The 'required' attribute means the input must be filled before submitting.

The code shows a label linked to an email input box that must be filled. The button labeled 'Send' submits the form.

❓ selector

advanced

Which CSS selector targets all input fields inside a form with class 'signup'?

Choose the CSS selector that selects every <input> element inside a <form> with class 'signup'.

A form.signup input

B input.signup form

C .signup > input

D form input.signup

💡 Hint

Think about how to select inputs that are inside a form with a specific class.

The selector 'form.signup input' means: select all input elements inside any form element that has the class 'signup'.

❓ accessibility

expert

Which form structure best improves accessibility for screen readers?

Choose the form snippet that best supports screen readers by correctly associating labels with inputs.

A <label>Email<input type="email" name="email"></label>

B <input type="email" name="email"><span>Email</span>

C <input type="email" name="email" aria-label="Email">

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

💡 Hint

Labels should be explicitly linked to inputs using 'for' and 'id' attributes for best accessibility.

Option D uses a label with 'for' matching the input's 'id', which is the recommended way to associate labels and inputs for screen readers.

Practice

1. What is the main purpose of the <form> element in HTML?

easy

A. To style text content

B. To display images on a webpage

C. To create a navigation menu

D. To collect user input and send it to a server

Solution

1. Step 1: Understand the role of the <form> tag

   The <form> element groups input fields and buttons to collect user data.

2. Step 2: Identify the purpose of forms

   Forms send collected data to a server for processing, like login or signup.

3. Final Answer:

   To collect user input and send it to a server -> Option D

4. Quick Check:

   Form = collect and send data [OK]

Hint: Forms wrap inputs to send data to servers [OK]

Common Mistakes:

• Confusing forms with layout elements
• Thinking forms style content
• Assuming forms display images

2. Which attribute in the <form> tag specifies where the form data is sent?

easy

A. type

B. method

C. action

D. name

Solution

1. Step 1: Identify the purpose of the 'action' attribute

   The 'action' attribute defines the URL where form data is sent after submission.

2. Step 2: Differentiate from other attributes

   'method' defines how data is sent (GET or POST), 'type' and 'name' are not for destination.

3. Final Answer:

   action -> Option C

4. Quick Check:

   action = destination URL [OK]

Hint: Action sets form data destination URL [OK]

Common Mistakes:

• Confusing 'method' with 'action'
• Using 'type' instead of 'action'
• Omitting the 'action' attribute

3. What will happen when this form is submitted?

<form action='/submit' method='post'>
  <input type='text' name='username' />
  <button type='submit'>Send</button>
</form>

medium

A. The browser sends the username data to '/submit' using POST method

B. The browser reloads the page without sending data

C. The browser sends data to '/submit' using GET method

D. The form data is sent to the server using JavaScript

Solution

1. Step 1: Analyze the form attributes

   The form uses 'action="/submit"' and 'method="post"', so data goes to '/submit' via POST.

2. Step 2: Understand form submission behavior

   On clicking the submit button, the browser sends the input data as POST to the specified URL.

3. Final Answer:

   The browser sends the username data to '/submit' using POST method -> Option A

4. Quick Check:

   action + method = POST to /submit [OK]

Hint: Method POST sends data to action URL on submit [OK]

Common Mistakes:

• Assuming GET method when POST is set
• Thinking JavaScript handles submission automatically
• Believing page reloads without sending data

4. Identify the error in this form code:

<form action='/send' method='post'>
  <input type='text' name='email'>
  <button type='submit'>Submit</button>
</form>

medium

A. The input tag is missing a closing slash

B. There is no error in the code

C. The button type should be 'button' instead of 'submit'

D. The input tag is not properly closed

Solution

1. Step 1: Check input tag syntax

   The input tag is <input type='text' name='email'> without self-closing slash.

2. Step 2: Understand HTML5 input tag rules

   In HTML5, void elements like input do not require a closing tag or slash; both <input ...> and <input ... /> are valid.

3. Step 3: Verify other elements

   Form has action and method; button is type='submit'. No errors present.

4. Final Answer:

   There is no error in the code -> Option B

5. Quick Check:

   Void tags like input don't need closing slash in HTML5 [OK]

Hint: Void tags like input don't need closing slash in HTML5 [OK]

Common Mistakes:

• Thinking input must always have a closing slash
• Confusing button types
• Missing method attribute (actually present)

5. You want a form that sends data to '/register' using GET method and includes a text input for 'name' and a submit button. Which code is correct?

hard

A.

Register

B.

Register

C.

Register

D.

Register

Solution

1. Step 1: Check the form's action attribute

   The form must send data to '/register', so action='/register' is required.

2. Step 2: Verify the method attribute

   The method should be 'get' to send data via URL parameters.

3. Step 3: Confirm input and button correctness

   The input has name='name' and the button is type='submit', which is correct.

4. Final Answer:

   Form with action='/register' and method='get' -> Option A

5. Quick Check:

   action='/register' + method='get' = <form action='/register' method='get'> <input type='text' name='name' /> <button type='submit'>Register</button> </form> [OK]

Hint: Use action for URL and method='get' for URL parameters [OK]

Common Mistakes:

• Omitting action attribute
• Using wrong method (post instead of get)
• Missing submit button type