HTML & CSS · Forms & Inputs · Lesson 22 of 25
Input Types and Attributes
Concept
Input Types and Attributes
Changing type gives you checkboxes, radio buttons, dates, and more — each with built-in browser behavior. placeholder, required, and disabled fine-tune how an input behaves.
Radio buttons only behave as a mutually exclusive group when they share the same name attribute — different names create independent, unrelated buttons.
By the end of this lesson
- Explain the core idea behind Input Types and Attributes.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
Syntax
<input type="text | email | checkbox | radio | date" name="field" required />ExampleRunnable
<input type="checkbox" id="agree" required />
<input type="radio" name="plan" value="free" checked />
<input type="text" placeholder="Your name" required />A grouped set of radio buttons
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> ProSelf-check before continuing
Without looking at the example, describe what changes when you modify one input in Input Types and Attributes. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Add a required checkbox and two radio buttons (in the same name group) to a form.
Loading editor…
Console