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.