Input Attributes
Part of the Fundamentals section of Coddy's HTML journey — lesson 37 of 60.
Here are some other useful attributes for text inputs:
placeholder: Provides a short hint that describes the expected value of the input field (e.g., "Enter your name").value: Sets the initial value of the input field.maxlength: Specifies the maximum number of characters allowed in the input field.
Here's an example of how to create a text input with a placeholder:
<input type="text" name="username" placeholder="Enter username">In this example, we have a text input with the name "username" and a placeholder that says "Enter username". When the input field is empty, the placeholder text will be displayed inside the field. Once the user starts typing, the placeholder text will disappear.
Challenge
EasyCreate an HTML document that includes a form with the following text input fields:
- A text input with the name "firstname" and a placeholder that says "Enter your first name".
- A text input with the name "lastname" and a placeholder that says "Enter your last name".
- A text input with the name "email" and a placeholder that says "Enter your email". Set the maximum length of this input to 50 characters.
Cheat sheet
Useful attributes for text inputs:
placeholder: Provides a short hint that describes the expected value of the input fieldvalue: Sets the initial value of the input fieldmaxlength: Specifies the maximum number of characters allowed in the input field
Example of a text input with placeholder:
<input type="text" name="username" placeholder="Enter username">The placeholder text is displayed when the input field is empty and disappears when the user starts typing.
Try it yourself
<!DOCTYPE html>
<html>
<body>
<!-- Write code here -->
</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