Purpose of forms in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a form that sends data when submitted.

HTML

<form [1]>
  <input type="text" name="username">
  <button type="submit">Send</button>
</form>

Drag options to blanks, or click blank then click option'

Aname="form1"

Bmethod="get"

Caction="/submit"

Dtype="button"

Attempts:

3 left

💡 Hint

Common Mistakes

Using method instead of action for the URL.

Omitting the action attribute entirely.

The action attribute tells the form where to send the data when submitted.

2fill in blank

medium

Complete the code to specify the HTTP method used to send form data.

HTML

<form action="/submit" [1]>
  <input type="email" name="email">
  <button type="submit">Send</button>
</form>

Drag options to blanks, or click blank then click option'

Aaction="/send"

Bmethod="post"

Ctype="submit"

Dname="emailForm"

Attempts:

3 left

💡 Hint

Common Mistakes

Using action instead of method for HTTP method.

Using invalid attribute names.

The method attribute defines how the form data is sent. post sends data securely.

3fill in blank

hard

Fix the error in the form code to correctly submit data.

HTML

<form action="/submit" method=[1]>
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

Drag options to blanks, or click blank then click option'

A"post"

BPOST

Cpost

D'post'

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the method value unquoted causes invalid HTML.

Using single quotes inconsistently.

The method attribute value must be in quotes, like "post".

4fill in blank

hard

Fill both blanks to create a form that sends data using POST to '/send'.

HTML

<form [1] [2]>
  <input type="text" name="user">
  <button type="submit">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

Aaction="/send"

Bmethod="get"

Cmethod="post"

Daction="/submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the URL in action.

Using method="get" instead of post.

The action attribute sets the URL, and method="post" sends data securely.

5fill in blank

hard

Fill all three blanks to create a form with a text input named 'email', sending data via POST to '/register'.

HTML

<form [1] [2]>
  <input type=[3] name="email">
  <button type="submit">Register</button>
</form>

Drag options to blanks, or click blank then click option'

Aaction="/register"

Bmethod="post"

C"text"

Dmethod="get"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong URL in action.

Using method="get" instead of post.

Missing quotes around input type.

The form sends data to /register using POST. The input type is text for typing email.

Practice

1. What is the main purpose of an HTML <form> element on a webpage?

easy

A. To collect information from users and send it to a server

B. To display images on the webpage

C. To create navigation menus

D. To style the webpage with colors and fonts

Solution

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

   The <form> tag is designed to gather user input like text, selections, or files.

2. Step 2: Identify what happens with the collected data

   Forms send this data to a server for processing, such as saving or responding.

3. Final Answer:

   To collect information from users and send it to a server -> Option A

4. Quick Check:

   Forms collect user data [OK]

Hint: Forms gather and send user info to servers [OK]

Common Mistakes:

• Thinking forms are for styling or layout
• Confusing forms with navigation elements
• Believing forms display images

2. Which of the following is the correct way to start a form that sends data using the POST method to 'submit.php'?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check the correct attributes for form tag

   The action attribute defines where to send data; method defines how (GET or POST).

2. Step 2: Verify correct syntax and attribute values

   <form method='post' action='submit.php'> uses method='post' and action='submit.php' correctly and in proper order.

3. Final Answer:

   <form method='post' action='submit.php'> -> Option A

4. Quick Check:

   Correct form syntax [OK]

Hint: Use method='post' and action='URL' inside <form> [OK]

Common Mistakes:

• Using 'get' instead of 'post' when POST is needed
• Wrong attribute names like 'submit' instead of 'action'
• Invalid method values like 'send'

3. What will happen when the user clicks the submit button in this form?

<form action='/submit' method='post'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='username' />
  <button type='submit'>Send</button>
</form>

medium

A. The browser navigates to '/submit' without sending data

B. The form resets all fields to empty

C. The browser sends the entered name to '/submit' using POST method

D. Nothing happens because the button type is incorrect

Solution

1. Step 1: Understand the form's action and method

   The form sends data to '/submit' using POST when submitted.

2. Step 2: Check the submit button behavior

   The button with type='submit' triggers sending the form data.

3. Final Answer:

   The browser sends the entered name to '/submit' using POST method -> Option C

4. Quick Check:

   Submit button sends data [OK]

Hint: Submit button sends form data to action URL [OK]

Common Mistakes:

• Thinking submit resets the form
• Believing data is not sent on submit
• Confusing button types

4. Identify the error in this form code:

<form action='submit.php' method='post'>
  <input type='text' id='email' name='email'>
  <label for='email'>Email</label>
  <button type='submit'>Submit</button>
</form>

medium

A. The label is not correctly linked to the input

B. The input tag is missing a closing slash

C. The method attribute should be 'get' instead of 'post'

D. The label should come before the input for accessibility

Solution

1. Step 1: Check label and input order for accessibility

   Labels should appear before inputs or wrap them to help screen readers.

2. Step 2: Confirm label's for attribute matches input's id

   The label's for='email' matches input's id='email', so linking is correct.

3. Final Answer:

   The <label> should come before the input for accessibility -> Option D

4. Quick Check:

   Label before input improves accessibility [OK]

Hint: Place labels before inputs for better accessibility [OK]

Common Mistakes:

• Ignoring label position and accessibility
• Thinking input tags always need a closing slash
• Changing method without reason

5. You want to create a form that collects a user's name and email, ensures both fields are required, and sends data using POST to '/register'. Which of the following is the best complete form code?

hard

A. \n \n \n Submit\n

B. \n Name:\n \n Email:\n \n Register\n

C. \n \n \n Send\n

D. \n Name\n \n Email\n \n Register\n

Solution

1. Step 1: Check form attributes for sending data

   The form must use action='/register' and method='post' to send data correctly.

2. Step 2: Verify input fields and required attribute

   Inputs for name and email have matching labels, correct types, and required to ensure user fills them.

3. Step 3: Confirm button type and labels

   The submit button has type='submit' and labels use for linked to inputs for accessibility.

4. Final Answer:

   Complete form with action, method, required fields, and labels -> Option B

5. Quick Check:

   Form with required fields and POST [OK]

Hint: Use required inputs and method='post' with labels for best form [OK]

Common Mistakes:

• Using GET instead of POST for sensitive data
• Missing required attribute on inputs
• Labels not linked to inputs
• Omitting method attribute