Form submission basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when a form with method="post" is submitted?

Consider a form with method="post". What is the main difference in how data is sent compared to method="get"?

A Data is sent in the URL query string, visible in the browser address bar.

B Data is sent only if JavaScript intercepts the form submission.

C Data is sent inside the HTTP request body, not visible in the URL.

D Data is sent as cookies automatically by the browser.

💡 Hint

Think about where the data is placed in the HTTP request for POST vs GET.

When a form uses method="post", the data is sent inside the HTTP request body. This keeps the data out of the URL, unlike GET where data appears in the URL query string.

📝 Syntax

intermediate

Which form attribute correctly specifies where to send the form data?

In an HTML form, which attribute defines the URL where the form data is sent after submission?

A action

B enctype

C target

D method

💡 Hint

It usually looks like a URL or path.

The action attribute specifies the URL where the form data is sent when the form is submitted.

❓ rendering

advanced

What is the visual result of this form code snippet?

Given this HTML form snippet, what will the user see in the browser?

HTML

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

A A form with an email input but no label visible.

B A form with a text input box labeled 'Email:' and a button labeled 'Send'. The input accepts any text.

C A form with no visible input fields but a 'Send' button.

D A form with an email input box labeled 'Email:' and a button labeled 'Send'. The email input requires a valid email before submission.

💡 Hint

Look at the type and label elements.

The label is linked to the email input by for and id. The input type is email, so the browser enforces email format. The button text is 'Send'.

❓ selector

advanced

Which CSS selector styles only the submit button inside a form?

You want to style only the submit button inside any form on the page. Which CSS selector achieves this?

A form button[type="submit"]

B button.submit

C form > button

D input[type="submit"]

💡 Hint

Look for a selector that targets buttons with a specific attribute inside forms.

The selector form button[type="submit"] targets all button elements with type="submit" inside any form. Option A targets input elements, not button elements.

❓ accessibility

expert

What is the best way to make a form accessible for screen readers?

Which practice improves accessibility for screen reader users when filling out forms?

A Use placeholder text inside inputs instead of labels to save space.

B Use <code>label</code> elements properly linked to inputs with <code>for</code> and <code>id</code> attributes.

C Use only color changes to indicate required fields without text.

D Hide labels visually but do not link them to inputs.

💡 Hint

Think about how screen readers identify form fields.

Properly linked label elements ensure screen readers announce the label when the input is focused. Placeholders alone are not sufficient because they disappear when typing and are not always read by screen readers.