In this tutorial we will show you the solution of month and year dropdown in HTML, in HTML there are many ways with the help of which you are able to get information from user.
And from them one is to get numbers from user, here numbers like birth dates, admission date, joining time and other.
Also, there are many ways to get dates from user. You can use a date, month picker or may also use a drop down list.
Hence, today our topic is to get input of month and year in html with the help of drop downs.
There is also an article on month, year picker. You also can go through that for reference.
Step By Step Guide On Month And Year Dropdown In HTML :-
As, we already discuss there are many ways with the help of which you are able to get month and year from user. One is with the help of dropdown list.
For, this we have to use select tag and inside this tag we have to create options with the help of option tag.
I think that it seems to be complex for you, so let’s understand the above lines with the help of codes or say example in html.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <h1> enter the month and year from these options which is your favorite </h1> <select name="" id=""> <option value="">January</option> <option value="">February</option> <option value="">March</option> <option value="">April</option> <option value="">May</option> <option value="">June</option> <option value="">July</option> <option value="">August</option> <option value="">September</option> <option value="">October</option> <option value="">November</option> <option value="">December</option> </select> <select name="" id=""> <option value="">2012</option> <option value="">2013</option> <option value="">2014</option> <option value="">2015</option> <option value="">2016</option> <option value="">2017</option> <option value="">2018</option> <option value="">2019</option> <option value="">2020</option> <option value="">2021</option> <option value="">2022</option> <option value="">2023</option> <option value="">2024</option> <option value="">2025</option> <option value="">2026</option> <option value="">2027</option> </select> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Hence in body tag, first we create a select tag and puts option under this.
- This is used to get month from user, user can select any month from these what he wants to choose.
- After this there is another select in which option are used again and in option we specify some years.
- You are able to make more or less years with the help of option tags as you want to decide limit for user. Whereas the months may remain same.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that there is also a way to make month and year picker with the help of pickers. If you don’t know about pickers don’t worry.
We will discuss this topic in our next session. I hope this tutorial on month and year dropdown in HTML helps you.
About Amruta
