The HTML elements are used to add particular features to web pages. For instance, the “<table>” element creates a table, the “<input>” element is used to add an input field, and many more. In HTML, attributes are utilized to specify the additional information to the elements.
This post will instruct you how to define a default value for “<input type = “text”>” without using the attribute “value”.
Before jumping into the discussion, let’s first see how to use the “value” attribute specified in <input> element, which is a better option to define a default value for “the <input>” element.
What is HTML “value” Attribute?
In HTML, the “value” attribute is used to set the input element’s default value.
Example
The following code block shows the “<input>” element having the “type”, “class”, and “value” attributes:
Here is the description of the above-stated attributes:
-
- “type” attribute sets the input field type, such as checkbox, radio, text, or more.
- “class” and “id” attributes are set to access the element in CSS or JavaScript for further manipulation.
- “value” attribute sets the default value.
Output
Let’s add the CSS styles to the “<input>” element to make it presentable.
Style “input-style” Class
The “.input-style” is used to access the class for styling, and the following properties are applied to it:
padding: 10px;
font-size: 20px;
border-radius: 10px;
border: 1px solid rgb(204 203 203);
box-shadow: 1px 1px 1px 1px rgb(204 203 203);
}
Here:
-
- “padding” adds space within the element’s border.
- “font-size” defines the font’s size.
- “border-radius” makes the element’s edges round.
- “border” applies border around the element.
- “box-shadow” adds a shadow around the element. It specifies the values for its horizontal offset, vertical offset, blur effect, spread effect, and color.
Output
How to Define a Default Value for “input type=text” Without Using Attribute “value”?
In HTML, there are multiple ways to set a default value for “input type= text”. Some of them are listed below:
-
- Using “placeholder” attribute
- Using JavaScript “value” property
- Using jQuery “val()” method
Method 1: How to Define a Default Value for “input type=text” Using the HTML “placeholder” Attribute?
The method to set the default value for the “<input>” element is the “placeholder” attribute. This attribute is set to display the content on the input element:
Output
So far, we have explained how to set the default value of the “<input>” element in HTML. You can also specify the default value using JavaScript and jQuery. Let’s discuss those approaches one by one.
Method 2: How to Set a Default Value for “input type=text” Using the JavaScript “value” Property?
You can also determine the default value of an input field using JavaScript. To include JavaScript code in HTML, add the “<script>” tags:
document.getElementById('example').value = 'default';
</script>
Within the “<script>” tags, specify the “document.getElementById()” to fetch the input element by id. Then, append the “value” property and set the default value to the element.
Output
Method 3: How to Specify a Default Value for “input type=text” Using the jQuery “val()” Method?
Another efficient way to define the default value for “input type=text” is the jQuery “val()” method. jQuery is a JavaScript library. It is required to download jQuery before using its methods or includes it through CDN like Google.
To download it, visit jQuery.com. Then, specify the reference within the “<head>” section of the HTML:
<script src="jquery-3.6.1.min.js"></script>
</head>
To include jQuery with the CDN, specify the following code:
In HTML, within the “<script>” element, add the “$()” method with the id of an element as a parameter and fetch the element. Then, append the “.val()” method with it to specify the default value:
$('#example).val('default');
</script>
Output
It can be observed that the default value for the input field has been successfully set.
Conclusion
In HTML, to define a default value for “<input type = text>”, the “value” attribute is used. However, several alternative ways exist, such as using the “placeholder” attribute, JavaScript code, and jQuery methods. To add JavaScript and jQuery code in HTML, specify the “<script>” tags. The “value” property in JavaScript and the “val()” method in jQuery are utilized to set the default value. This post has explained the methods to set the default value for “<input type = text>” without using the “value” attribute.
