Form submission basics in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a form that sends data to the server.

HTML

<form action=[1] method="post">
  <input type="text" name="username" aria-label="Username">
  <button type="submit">Submit</button>
</form>

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

A"get"

B"button"

C"text"

D"/submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong attribute like 'method' instead of 'action'.

Putting the method value in the action attribute.

The action attribute tells the form where to send the data. Here, it sends to /submit.

2fill in blank

medium

Complete the code to specify the HTTP method for the form submission.

HTML

<form action="/submit" method=[1]>
  <input type="email" name="email" aria-label="Email">
  <button type="submit">Send</button>
</form>

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

A"post"

B"put"

C"delete"

D"patch"

Attempts:

3 left

💡 Hint

Common Mistakes

Using HTTP verbs like 'put' or 'delete' which are not standard for forms.

Using 'get' when data should be sent securely.

The method attribute defines how data is sent. post is used to send data securely.

3fill in blank

hard

Fix the error in the input field to make it required for submission.

HTML

<form action="/submit" method="post">
  <input type="text" name="fullname" [1] aria-label="Full Name">
  <button type="submit">Submit</button>
</form>

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

Arequired

Breadonly

Cdisabled

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readonly' which prevents editing but does not require input.

Using 'disabled' which disables the field and excludes it from submission.

The required attribute makes sure the user fills this field before submitting.

4fill in blank

hard

Fill both blanks to create a password input field with a label.

HTML

<label for=[1]>Password:</label>
<input type=[2] id="pass" name="password" aria-required="true">

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

A"pass"

B"password"

D"text"

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching the label 'for' and input 'id' values.

Using type="text" instead of password.

The label uses for="pass" to link to the input with id="pass". The input type password hides the typed characters.

5fill in blank

hard

Fill all three blanks to create a form with a checkbox and submit button.

HTML

<form action=[1] method=[2]>
  <input type=[3] id="agree" name="terms" aria-label="Agree to terms">
  <label for="agree">I agree to the terms</label>
  <button type="submit">Submit</button>
</form>

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

A"/register"

B"post"

C"checkbox"

D"text"

Attempts:

3 left

💡 Hint

Common Mistakes

Using type="text" for the checkbox input.

Using method="get" when post is preferred for forms.

The form sends data to /register using post. The input type checkbox lets users agree to terms.

Practice

1. What does the action attribute in an HTML form specify?

easy

A. The type of input fields inside the form

B. The style of the form on the page

C. The method used to send the form data

D. The URL where the form data is sent after submission

Solution

1. Step 1: Understand the role of action attribute

   The action attribute tells the browser where to send the form data when the user submits the form.

2. Step 2: Differentiate from other attributes

   The method attribute controls how data is sent, not where. Styling and input types are unrelated to action.

3. Final Answer:

   The URL where the form data is sent after submission -> Option D

4. Quick Check:

   action = URL destination [OK]

Hint: Remember: action = destination URL for form data [OK]

Common Mistakes:

• Confusing action with method
• Thinking action controls form style
• Assuming action sets input types

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Check attribute order and values

   Both action and method attributes are needed. The method should be 'post' and action should be '/submit'. The order of attributes does not affect correctness.

2. Step 2: Validate each option

   The <form method='post' action='submit'> has incorrect action (missing leading '/'). The <form action='/submit' method='post'> uses correct attribute names and values. The one with method='get' uses wrong method for POST. The one with method='submit' uses invalid method and action values.

3. Final Answer:

   <form action='/submit' method='post'> -> Option B

4. Quick Check:

   Correct syntax with POST method and action URL [OK]

Hint: Use for POST forms [OK]

Common Mistakes:

• Using 'submit' as method instead of 'post' or 'get'
• Mixing up method and action attribute values
• Using wrong attribute names

3. What happens when a user submits this form?

<form action='/send' method='get'>
  <input type='text' name='username' value='alice'>
  <input type='submit'>
</form>

medium

A. The form data is not sent because method is missing

B. The browser sends a POST request to '/send' with username in the body

C. The browser sends a GET request to '/send?username=alice'

D. The browser reloads the page without sending data

Solution

1. Step 1: Identify form method and action

   The form uses method='get' and action='/send', so data will be sent via URL query string to '/send'.

2. Step 2: Understand how GET sends data

   GET appends form data as key=value pairs in the URL. Here, username=alice is added to the URL.

3. Final Answer:

   The browser sends a GET request to '/send?username=alice' -> Option C

4. Quick Check:

   GET method sends data in URL [OK]

Hint: GET method sends data in URL query string [OK]

Common Mistakes:

• Thinking GET sends data in request body
• Assuming missing method means no data sent
• Confusing reload with form submission

4. Identify the error in this form code:

<form action='/submit' method='post'>
  <input type='text' name='email'>
  <input type='submit' value='Send'>
</form>

Why might this form cause accessibility issues?

medium

A. Missing <label> for the input field

B. Incorrect method attribute value

C. Submit button missing type attribute

D. Action attribute URL is invalid

Solution

1. Step 1: Check form attributes and elements

   The form uses correct action and method. The submit button has a value and defaults to type='submit'.

2. Step 2: Identify accessibility issue

   The input field lacks a <label> element, which helps screen readers and improves usability.

3. Final Answer:

   Missing <label> for the input field -> Option A

4. Quick Check:

   Labels improve accessibility [OK]

Hint: Always add <label> for inputs to help all users [OK]

Common Mistakes:

• Thinking submit button needs explicit type
• Assuming method='post' is wrong
• Believing action URL must be absolute

5. You want to create a form that sends user feedback to '/feedback' using POST. The form should have a text area labeled 'Comments' and a submit button labeled 'Send Feedback'. Which code snippet correctly implements this with accessibility and submission basics?

hard

A. \n Comments\n \n Send Feedback\n

B. \n \n \n

C. \n Comments\n \n Send Feedback\n

D. \n Comments\n \n \n

Solution

1. Step 1: Check form action and method

   The form must send data to '/feedback' using POST method. <form action='/feedback' method='post'>\n <label for='comments'>Comments</label>\n <textarea id='comments' name='comments'></textarea>\n <button type='submit'>Send Feedback</button>\n</form> and B have method='post', but B lacks label.

2. Step 2: Verify accessibility and button labeling

   <form action='/feedback' method='post'>\n <label for='comments'>Comments</label>\n <textarea id='comments' name='comments'></textarea>\n <button type='submit'>Send Feedback</button>\n</form> uses a <label> linked to the textarea with for and id, improving accessibility. The submit button is a <button> with clear text.

3. Step 3: Eliminate incorrect options

   <form action='/feedback' method='get'>\n <label>Comments</label>\n <textarea id='comments'></textarea>\n <button>Send Feedback</button>\n</form> uses GET method and missing name attribute on textarea, and label is not linked. <form action='/feedback'>\n <label for='comments'>Comments</label>\n <textarea id='comments' name='comments'></textarea>\n <input type='submit' value='Send Feedback'>\n</form> misses method attribute, so defaults to GET.

4. Final Answer:

   code snippet with proper action, method, label, and button -> Option A

5. Quick Check:

   Use POST + label + submit button for accessible form [OK]

Hint: Use label with for/id and method='post' for forms [OK]

Common Mistakes:

• Omitting method attribute defaults to GET
• Not linking label to input with for and id
• Using GET when POST is required