HTML Default Attribute
Attributes in HTML
HTML attributes are special terms that alter an HTML element's behavior. They are used in element opening tags and can provide the required functionality or change an element's default functionality. Syntactically, the HTML start tag gains an attribute. They are expressed as name-value pairs inside an element's start tag, separated by an equal sign (" ="), and can be classified as necessary, optional, standard, or event attributes.
Introduction to HTML default attributes
Form element default values are set using HTML's default property.
It enables developers to provide consumers with preliminary data or recommendations by pre-filling form fields with a given value.
This feature comes in very handy when you wish to simplify data entry and provide users with guidance by providing default content.
Reason for default
Setting a default value for a form element is the default attribute's main function.
When a user interacts with the form, the input field first displays the default value. Users have the option to change the default value or accept it as is.
Values
Depending on the kind of element, the default property can be applied to different form elements. As an illustration:
- A string that serves as the default text can be entered as the value for text input fields.
- Checkboxes and radio buttons can indicate whether the item is chosen by default by using a boolean value (true or false).
- The value may be the pre-selected default choice for some items.
Attributes
The global attributes are contained in this element.
1. Autocomplete
A string that serves as a hint for the autocomplete feature of a user agent. For an exhaustive list of values and instructions on using autocomplete, see The HTML autocomplete attribute.
2. Autofocus
Using this Boolean property, we may indicate whether a form control should receive input focus when the page loads. The autofocus property may only be applied to one form element in a document.
3. Disabled
This Boolean property signifies that the control is inaccessible to the user. The control gets its setting from the containing element, such as <fieldset>, if this attribute is not supplied; if no containing element has the disabled attribute set, the control is enabled.
4. Form
The <select> should be associated with the <form> element (its form owner). The id of a <form> in the same document must be the value of this property. (If this property is left empty, the <select> element is linked to any ancestor <form> elements that may exist.)
With the use of this property, you may correlate <select> elements with <form>s outside of <form>s anyplace in the document. It may also overwrite an ancestor <form> element.
5. Multiple
According to this Boolean characteristic, several possibilities in the list may be picked. If an option is left unspecified, only one option may be picked at a time. Most browsers will display a scrolling list box rather than a single-line dropdown when many are given.
6. Name
The control's name may be specified using this property.
7. Required
A Boolean property designating the requirement to choose an option with a non-empty string value.
8. Size
This property indicates how many rows in the list should be seen at once if the control is displayed as a scrolling list box (for example, when many are provided). A select element does not always need to be shown as a scrolling list box by browsers. By default, the value is 0.
Syntax:
<track src="link of the page " default>
Example 1
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Example for default attribute</h1>
<h2>
HTML default Attribute
</h2>
<video width="120"
height="120"
controls>
<track src=
"https://www.youtube.com/watch?v=L2bcbXa2ou4&ab_channel=SwastiMehulMusic"
kind="subtitles"
srclang="en"
label="English"
default>
<source id="myTrack"
src=
"https://www.youtube.com/watch?v=L2bcbXa2ou4&ab_channel=SwastiMehulMusic"
type="video/mp4">
</video>
</body>
</html>
Output
<html><body>
<form>
<label for="Name">Name:</label>
<input type="text" id="username" name="username" default="ABC">
<label for="fruit">Favourite fruits:</label>
<input type="checkbox" id="fruit" name="subscribe" default="true">
<br><br> <label for="fruit">Select your favourite fruit:</label>
<select id="fruit" name="fruit" default="Apple">
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Grapes">Grapes</option>
</select>
<br><br> <input type="submit" value="Submit">
</form>
</body>
</html>
Output
How can We Make an HTML <select> Element's Default Value?
An HTML dropdown list of selectable options is made with the chosen element. When chosen, the value contained in the option tag will be utilized. The necessary option's "selected" property may be used to set the chosen element's default value. This attribute is Boolean. The dropdown list's default display will be the option with the "selected" property. With Javascript's assistance, we may even set the chosen property after the page loads.
Top Techniques
- When using the default attribute, be careful not to interfere with users' ability to customize the field by offering helpful recommendations.
- To enhance the user experience overall, make sure that the default values are pertinent and meaningful to the user.
- Give your forms a thorough test to ensure compatibility with various browsers, especially if you are utilizing dynamic data.
Conclusion
In HTML forms, the default property is a useful tool for improving user engagement. Establishing default settings may help users and streamline the data-entering process, which will ultimately enhance the usability of your online forms.