The form element
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which attribute on <form> specifies where the data is sent?
2. What does method="post" do?
3. True or false: forms can be nested inside other forms.
4. True or false: <FORM> with capital letters is valid HTML.
5. Which method is most appropriate for a search form?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<form action="/login" method="post"> <button>Login</button> </form> | ATag names must be lowercase - <FORM> and </FORM> should be <form> and </form> | |
| 2<form action="/search" method="get"> <input type="text" name="q"> <button>Search</button> </form> | BA search form that appends query data to the URL - method get makes the search bookmarkable | |
| 3action specifies the URL where form data is sent on submission | CA form that sends data to /login using POST - the button submits the form when clicked | |
| 4All form controls must be inside <form> - inputs outside the form are not submitted | D<form action="/register" method="post"> <button>Register</button> </form> | |
| 5<FORM action="/go" method="post"> <button>Go</button> </FORM> | EAttribute values must be in double quotes - action=/submit should be action="/submit" | |
| 6<form action=/submit method="post"> <button>Submit</button> </form> | F<form action="/send" method="post"> <input type="text" name="msg"> <button>Send</button> </form> |
C
Definitions
action
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<___ action="/submit" method="post">
<button>Send</button>
</form>
2.
<form ___="/login" method="post">
<button>Login</button>
</form>
3.
<form action="/save" ___="post">
<button>Save</button>
</form>
4.
<form action="/send" method="___">
<button>Submit</button>
</form>
5.
<form action="/search" method="get">
<button>Search</button>
</___>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<FORM action="/submit" method="post">
B
<input type="text" name="name">
C
<button>Submit</button>
D
</form>
Question 2
A
<form action="/login">
B
method="post"
C
<input type="text" name="user">
D
<button>Login</button>
E
</form>
Question 3
A
<form action="/search" method="get">
B
<input type="text" name="q">
C
<button type=submit>Search</button>
D
</form>
Question 4
A
<form action="/register">
B
<input type="email" name="email">
C
<input type="password" name="pass">
D
</form>
E
<button>Register</button>
Question 5
A
<form>
B
<input type="text" name="city">
C
<input type="text" name="state">
D
<input type="text" name="zip">
E
<Button>Submit</Button>
F
</form>
Answer Key
The form element
Section A: Quick Questions
Q1
A — action
Q2
B — Sends data in the HTTP request body
Q3
A — False
Q4
B — False
Q5
A — get
Section B: Match the Pairs
Q1
<form action="/login" method="post">
<button>Login</button>
</form> → A form that sends data to /login using POST - the button submits the form when clicked
Q2
<form action="/search" method="get">
<input type="text" name="q">
<button>Search</button>
</form> → A search form that appends query data to the URL - method get makes the search bookmarkable
Q3
action specifies the URL where form data is sent on submission → <form action="/register" method="post">
<button>Register</button>
</form>
Q4
All form controls must be inside <form> - inputs outside the form are not submitted → <form action="/send" method="post">
<input type="text" name="msg">
<button>Send</button>
</form>
Q5
<FORM action="/go" method="post">
<button>Go</button>
</FORM> → Tag names must be lowercase - <FORM> and </FORM> should be <form> and </form>
Q6
<form action=/submit method="post">
<button>Submit</button>
</form> → Attribute values must be in double quotes - action=/submit should be action="/submit"
Section C: Definitions
Q1
action — The <form> attribute that specifies the URL where the form data is sent when the user submits. Without it, data is sent to the current page URL.Section D: Fill in the Blanks
Q1
<form action="/submit" method="post">
<button>Send</button>
</form>Q2
<form action="/login" method="post">
<button>Login</button>
</form>Q3
<form action="/save" method="post">
<button>Save</button>
</form>Q4
<form action="/send" method="post">
<button>Submit</button>
</form>Q5
<form action="/search" method="get">
<button>Search</button>
</form>Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <FORM> should be written as <form>.
Q2
B — Attributes must be written inside the opening tag, not on a separate line. The method attribute belongs in the <form> opening tag: <form action="/login" method="post">.
Q3
C — Attribute values must be in double quotes: type="submit", not type=submit without quotes.
Q4
D — The </form> closing tag appears before the button element. The button must be inside the form: move </form> after the button.
Q5
E — HTML tag names must be lowercase. <Button> and </Button> should be <button> and </button>.