How To Display Current Date In HTML Textbox
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to display current date in HTML textbox, do You know that a simple HTML textbox, also called an input box having text type, can be used to display the current date?
Yes, it is possible. We will see this possibility through an example.
HTML with the help of Javascript can serve us this purpose through a function called Date().
We will use <label>, <input>, <button> tags and Javascript functionalities as special mentions.
Step By Step Guide On How To Display Current Date In HTML Textbox :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Display Current Date In HTML Textbox</title>
</head>
<body>
<label>Current Date:</label>
<!-- The following input box is a textbox because of attribute type="text" -->
<input type="text" id="curdate">
<button type="button" onclick="showDate()">Click To Show</button>
<script type="text/javascript">
function showDate() {
document.getElementById("curdate").value=Date();
}
</script>
</body>
</html>
- The HTML file begins with the <!DOCTYPE html> statement which tells the browser about the version of HTML it will use.
- The next line uses the <html> tag with its lang attribute set as “en”, which implies that the language of the content is English.
- The <head> tag succeeding the <html> tag contains information about the content of the webpage. The <title> tag, which contains the title of the webpage, comes as a part of this <head> tag. This title shows up on the browser tab.
- Next begins the <body> tag, which contains the body of the HTML content. The <label> tag begins as the first tag of <body> tag. The <label> tag mentions the label for something, especially used for input boxes.
- An input textbox is displayed using an <input> tag with the attribute type set to “text” and its id attribute set to “curdate”. The text attribute implies the <input> box is a textbox and the id curdate is used to reference this tag from anywhere in the HTML file.
- The <button> tag that follows the <input> tag is used to create a button of “button” type with the function showDate() to be executed when the button is clicked. The contained text “Click To Show” is the text that would appear on the button. What the function showDate() is, we will explain in the next step. The onclick attribute of the <button> tag tells us what the button will do, upon a click. Pretty self-explanatory, isn’t it?
- The <script> tag starts now to add Javascript functionality to the HTML document. The type of this tag is “text/javascript”. We now define the function we spoke of in the preceding step. A function block is defined by writing the keyword function, followed by the function name (showDate()) and two curly braces within the function body rests. The purpose of this function is to set the date inside the textbox.
- The body of the function starts with the document object of which, the getElementById method is used to fetch the element with the id “curdate”. In this case, the returned element is the <input> element.
- Then the value of the returned element, i.e the <input> tag is set by assigning to it the output of the Date() function. The Date() function returns the current date and sets the earlier empty textbox value to the current date. We end this assignment operation with a semicolon (;).
- Now let us note that the <html>, <head>, <tag>, <body>, <label>, <button> and <script> tags are all paired or container tags and have respective ending tags </html>, </head>, </tag>, </body>, </label>, </button> and </script>.
- The <input> tag is singular tag and has no ending tag.
- Now when we run the HTML file in our browser and click the button, we see that the current date is displayed in the textbox. This will work for any chosen day!
Conclusion :-
We saw that with the help of JavaScript function and document object and methods, the current date can be displayed in the textbox.
I hope this tutorial on how to display current date in HTML textbox helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
