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.