Text inputs (input)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which attribute on <input> determines what kind of field it creates?
2. True or false: an <input> element requires a closing </input> tag.
3. What does the name attribute do on an input?
4. True or false: <INPUT> with capital letters is valid HTML.
5. What does the placeholder attribute do?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<input type="text" name="username"> | AThe name attribute is missing - without name the input value is not included in form submission | |
| 2<input type="text" name="q" placeholder="Search."> | Bplaceholder shows hint text inside the empty field - it disappears when the user starts typing | |
| 3The name attribute identifies the input's value when the form is submitted | C<input type="text" name="first"> | |
| 4<input> is self-closing - it has no content and must not have a closing </input> tag | DTag names must be lowercase - <INPUT> should be written as <input> | |
| 5<INPUT type="text" name="q"> | EA self-closing text input - type sets it as a text field and name identifies the value on submission | |
| 6<input type="text"> | F<input type="text" name="email"> |
C
Definitions
name
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<___ type="text" name="username">
2.
<input ___="text" name="city">
3.
<input type="text" ___="email">
4.
<input type="text" name="q" ___="Search">
5.
<input type="___" name="first">
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<INPUT type="text" name="q">
B
<input type="email" name="email">
C
<button>Search</button>
Question 2
A
<form>
B
<input type text name="city">
C
<button>Submit</button>
D
</form>
Question 3
A
<form>
B
<input type="text" name="user">
C
<input type="password">
D
<button>Login</button>
E
</form>
Question 4
A
<form>
B
<input type="text" name="first">
C
<input type="text" name="last">
D
<input type="text" name=email>
E
</form>
Question 5
A
<form>
B
<input type="text" name="q">
C
<input type="text" name="tag">
D
<input type="text" name="filter">
E
<input type=text name="sort">
Answer Key
Text inputs (input)
Section A: Quick Questions
Q1
B — type
Q2
B — False
Q3
A — Identifies the value when the form is submitted
Q4
A — False
Q5
A — Shows hint text inside the field before the user types
Section B: Match the Pairs
Q1
<input type="text" name="username"> → A self-closing text input - type sets it as a text field and name identifies the value on submission
Q2
<input type="text" name="q"
placeholder="Search."> → placeholder shows hint text inside the empty field - it disappears when the user starts typing
Q3
The name attribute identifies the input's value when the form is submitted → <input type="text" name="email">
Q4
<input> is self-closing - it has no content and must not have a closing </input> tag → <input type="text" name="first">
Q5
<INPUT type="text" name="q"> → Tag names must be lowercase - <INPUT> should be written as <input>
Q6
<input type="text"> → The name attribute is missing - without name the input value is not included in form submission
Section C: Definitions
Q1
name — The <input> attribute that identifies the field's value when the form is submitted. Without name, the input value is not sent to the server.Section D: Fill in the Blanks
Q1
<input type="text" name="username">Q2
<input type="text" name="city">Q3
<input type="text" name="email">Q4
<input type="text" name="q" placeholder="Search">Q5
<input type="text" name="first">Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <INPUT> should be written as <input>.
Q2
B — The type attribute must use = and double quotes: type="text", not type text without equals sign and quotes.
Q3
C — Password inputs should have a name attribute so the value is included in form data. Add name="pass" or similar.
Q4
D — Attribute values must be in double quotes: name="email", not name=email without quotes.
Q5
E — The type attribute value must be in double quotes: type="text", not type=text without quotes.