The <input> tag creates an input field for forms. It's a void element (no closing tag) and requires a type attribute to specify what kind of input to create (text, password, email, checkbox, radio, etc.).

<input

Step 2

Common input types include: text (single-line text), password (hidden text), email (email validation), checkbox (multiple selections), radio (single selection), submit (form submission button), and button. Always include the type attribute!

<input type="text" name="username" placeholder="Enter username">

Step 3

The name attribute identifies the input when the form is submitted. The placeholder shows hint text. Use id and for (on label) for accessibility. Always wrap inputs in a <form> tag for proper form handling.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter username">
</form>

Step 4

In the browser, the input field appears. Users can type in text inputs, check boxes, select radio buttons, etc. The type determines the input's behavior and appearance.

<input type="text" name="username" placeholder="Enter username">

Step 5

Checkpoint: Which attribute is required for <input> to specify the input type?

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

Step 6

Correct! The type attribute is required and specifies what kind of input to create. Common types include text, password, email, checkbox, and radio.

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

Step 7

Now it's your turn. Input fields are essential for forms and user interaction. Complete the challenges below to master the <input> tag!

input.html

1 / 7

⌨️

Tutor:The <input> tag creates an input field for forms. It's a void element (no closing tag) and requires a type attribute to specify what kind of input to create (text, password, email, checkbox, radio, etc.).

⭐ 0 EXP

Input Mastery

Unlock nodes by learning input types and form attributes.

Concept 1: The Input Tag

The <input> tag creates an input field for forms. It's a void element (no closing tag) and requires a type attribute to specify what kind of input to create (text, password, email, checkbox, radio, etc.).

System Check

Which attribute is required for <input> to specify the input type?

nametypeidplaceholder

Community Holo-Net

Share Form Structures

Created effective forms with inputs? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <input> Tag

Pascual Vila

Frontend Instructor.

Input Types

Common input types include: text (single-line text), password (hidden text), email (email validation), checkbox (multiple selections), radio (single selection), submit (form submission button), button, number, date, and many more. The type attribute determines the input's behavior and appearance.

Required Attributes

The type attribute is required and specifies the input type. The name attribute identifies the input when the form is submitted. Always include both for proper form functionality.

Form Structure and Accessibility

Always wrap inputs in a <form> tag. Use <label> with the for attribute matching the input's id for accessibility. The placeholder attribute shows hint text. Use required for mandatory fields.

Best Practices

Always include the type and name attributes. Use id and connect it to a <label> for accessibility. Wrap inputs in a <form> tag. Use appropriate input types for better validation and user experience. Add placeholder for hints and required for mandatory fields.

Input Tag Glossary

<input>: HTML void element that creates an input field for forms. Requires a type attribute to specify the input type (text, password, email, checkbox, radio, etc.).
type Attribute: Required attribute that specifies what kind of input to create. Common values: text, password, email, checkbox, radio, submit, button, number, date, etc.
name Attribute: Identifies the input when the form is submitted. Required for form inputs to be properly processed. Used to access input values in form data.
Form Structure: Inputs should be wrapped in a <form> tag. Use <label> with for matching the input's id for accessibility. This helps screen readers understand form structure.
Common Input Types: text (single-line text), password (hidden text), email (email validation), checkbox (multiple selections), radio (single selection), submit (form button), button, number, date, file, search, tel, url, and many more.

📖 INDEX