Labels for Inputs
Part of the Fundamentals section of Coddy's HTML journey. Lesson 39 of 60.
It’s not always very clear what an input is about without a label. A label gives users a clear visual cue on what type of input is expected in that field. Labels are created using the <label> tag.
Here’s the basic syntax:
<label for="field">Label text</label>
<input type="text" id="field"><label>: The tag that creates the label.
for: A link between the label and a form field. The value offorshould match theidof the form field.
- Label text: The text that describes what the form field is for.
<input>: The form field that the label refers to.
id: The unique identifier for the form field, which matches theforattribute in the label.
Once they are linked, clicking the label text puts the cursor in (focuses) its input, which also gives users a bigger area to click.
Challenge
EasyAdd the following tags inside the <form> tag:
- A
<label>with the text 'First Name:' and theforattribute set to 'firstname'. - An
<input>field withtype="text". - The
<input>field should have anidthat matches the label'sforattribute.
Try it yourself
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Write code here -->
</form>
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Fundamentals
2Text and Formatting
HeadingsParagraphsLine BreaksBold and Italic TextBold and Italic AgainRecap - Formatting8Forms and Inputs Part 1
Form BasicsText InputsInput AttributesPassword FieldLabels for InputsRecap - Basic Form11Event Registration Page
Project OverviewHeader Section
Event Details SectionRegistration FormFooter Section9Forms and Inputs Part 2
Radio ButtonsCheckboxesDropdownsButtonsButtons in FormsRecap - Forms #1Recap - Forms #2Practice on your own: Web playground