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.
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.
Cheat sheet
Labels provide clear visual cues for form inputs using the <label> tag:
<label for="field">Label text</label>
<input type="text" id="field">The for attribute in the label must match the id attribute of the corresponding input field to create a proper connection.
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 #2