← HTML & CSS

Text inputs (input)

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.

Part of: HTML and CSS Journey — Module 27

What it does: name="email" means the entered value is sent as email=entered_value. Without name, the value is not submitted. <input> ends after its attributes and the closing >. There is no </input> closing tag in HTML. type specifies the input field type - text, email, password, etc. 'kind' is not a valid HTML attribute. name is the key used when form data is sent to the server. The visible label is a separate <label> element. HTML tag names must be lowercase. <INPUT> is non-standard - use <input>. placeholder shows grey hint text inside the empty input. It disappears when the user starts typing.

Common mistakes: HTML tag names must be lowercase. <INPUT> should be written as <input>. The type attribute must use = and double quotes: type="text", not type text without equals sign and quotes.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Text inputs (input) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which attribute on <input> determines what kind of field it creates?

typekind

Matches

↓

Tag names must be lowercase - <INPUT> should be written as <input>

Applying

Meanings

Term

name

Meaning

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.

Practice

Testing

Gaps

< type="text" name="username">

Check Answer

Spots

1<INPUT type="text" name="q">

2<input type="email" name="email">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which attribute on <input> determines what kind of field it creates?

A. type ✓

B. kind

type specifies the input field type - text, email, password, etc. 'kind' is not a valid HTML attribute.

2. True or false: an <input> element requires a closing </input> tag.

A. False ✓

B. True

<input> is self-closing - it has no content and no closing tag. Writing </input> is invalid HTML.

3. What does the name attribute do on an input?

A. Identifies the value when the form is submitted ✓

B. Sets the visible label above the field

name is the key used when form data is sent to the server. The visible label is a separate <label> element.

4. True or false: <INPUT> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <INPUT> is non-standard - use <input>.

5. What does the placeholder attribute do?

A. Shows hint text inside the field before the user types ✓

B. Sets the default submitted value of the field

placeholder shows grey hint text inside the empty input. It disappears when the user starts typing.

Match the Pairs

<input type="text" name="username"> → A self-closing text input - type sets it as a text field and name identifies the value on submission

<input type="text" name="q" placeholder="Search."> → placeholder shows hint text inside the empty field - it disappears when the user starts typing

The name attribute identifies the input's value when the form is submitted → <input type="text" name="email">

<input> is self-closing - it has no content and must not have a closing </input> tag → <input type="text" name="first">

<INPUT type="text" name="q"> → Tag names must be lowercase - <INPUT> should be written as <input>

<input type="text"> → The name attribute is missing - without name the input value is not included in form submission

Key Term

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.

Fill in the Blanks

1. <input type="text" name="username">

Hint: Type the self-closing element name used to create a text field

2. <input type="text" name="city">

Hint: Type the attribute name that specifies what kind of input field this is

3. <input type="text" name="email">

Hint: Type the attribute name that identifies this input when the form is submitted

4. <input type="text" name="q" placeholder="Search">

Hint: Type the attribute name that shows hint text inside the input before the user types

5. <input type="text" name="first">

Hint: Type the type value that creates a single-line text field

Spot the Error

Question 1

A <INPUT type="text" name="q">

B <input type="email" name="email">

C <button>Search</button>

Line A — HTML tag names must be lowercase. <INPUT> should be written as <input>.

Question 2

A <form>

B <input type text name="city">

C <button>Submit</button>

D </form>

Line B — The type attribute must use = and double quotes: type="text", not type text without equals sign and quotes.

Question 3

A <form>

B <input type="text" name="user">

C <input type="password">

D <button>Login</button>

E </form>

Line C — Password inputs should have a name attribute so the value is included in form data. Add name="pass" or similar.

Question 4

A <form>

B <input type="text" name="first">

C <input type="text" name="last">

D <input type="text" name=email>

E </form>

Line D — Attribute values must be in double quotes: name="email", not name=email without quotes.

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">

Line E — The type attribute value must be in double quotes: type="text", not type=text without quotes.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?