Course Content
Ultimate HTML
Ultimate HTML
Input Attributes
The HTML <input>
element allows us to create various form controls for collecting user input. We can customize the behavior and appearance of these controls using different attributes. Let's explore some commonly used attributes:
value
The value
attribute is used to set the initial value of the <input>
element. The specific value it takes depends on the input type:
- For buttons (
type="button"
,type="reset"
,type="submit"
), it defines the text displayed on the button; - For text (
type="text"
) and password (type="password"
) fields, it defines the default value of the input field; - For checkboxes (
type="checkbox"
) and radio buttons (type="radio"
), it defines the value associated with the input.
Note
The
value
attribute cannot be used with<input type="file">
.
Example:
index
index
index
autofocus
The autofocus
attribute specifies that the input field should automatically have focus when the web page is loaded. When the page loads, the input field will be selected automatically, allowing the user to start typing without clicking on the input field first.
Example:
index
index
index
required
The required
attribute is used to make an input field mandatory. It specifies that the input field must be filled out before the user can submit the form. If the user tries to submit the form without filling out the required input field, they will receive a validation error message indicating that the field is required.
Example:
index
index
index
placeholder
The placeholder
attribute provides a hint or example of the expected input value to the user. A short text string is displayed inside the input field before the user enters any value. This is useful for fields requiring specific formatting, such as phone or credit card numbers.
Example:
index
index
index
Note
In the examples above, we use different
type
attributes for the<input>
elements, significantly affecting their appearance and functionality. We'll delve deeper into various input types in the next chapter.
Thanks for your feedback!