Form structure in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a form element.

HTML

<[1] action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</[1]>

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

Adiv

Bform

Csection

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using a

or

instead of a

tag.

Placing input fields outside the form tag.

The form tag defines a form in HTML. It groups input elements and allows data submission.

2fill in blank

medium

Complete the code to add a submit button inside the form.

HTML

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

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

Areset

Bbutton

Csubmit

Dlink

Attempts:

3 left

💡 Hint

Common Mistakes

Using type="button" which does not submit the form.

Using type="reset" which clears the form inputs.

The submit type on a button sends the form data to the server when clicked.

3fill in blank

hard

Fix the error in the input field to make it accessible by linking label and input.

HTML

<label for="[1]">Username:</label>
<input type="text" id="username" name="username">

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

Ausername

Buser

Cname

Duser_name

Attempts:

3 left

💡 Hint

Common Mistakes

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

Omitting the id attribute on the input.

The for attribute in the label must match the id of the input to connect them for accessibility.

4fill in blank

hard

Fill both blanks to create a text input with a placeholder and required attribute.

HTML

<input type="[1]" name="email" placeholder="[2]" required>

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

Atext

Bemail

CEnter your email

DEnter your name

Attempts:

3 left

💡 Hint

Common Mistakes

Using email type but placeholder says 'Enter your name'.

Leaving out the placeholder or required attribute.

The input type should be text for general text input. The placeholder shows a hint inside the input box.

5fill in blank

hard

Fill all three blanks to create a form with a label, input, and submit button.

HTML

<form action="[1]" method="[2]">
  <label for="user">[3]</label>
  <input type="text" id="user" name="user">
  <button type="submit">Send</button>
</form>

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

A/send-data

Bpost

CUsername

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using get method when post is expected.

Leaving action empty or incorrect.

Label text not matching the input purpose.

The action attribute sets the URL to send data. The method is usually post for sending data securely. The label text describes the input.