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.