How To Display Current Date In HTML Textbox
Last Updated : Jan 1, 2023
IN - HTML
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.
Step By Step Guide On How To Display Current Date In HTML Textbox :-
- 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 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!
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.