How to Add a datepicker in form Using HTML

Forms are an important and common tool for any application. They comprise input fields such as name, gender, email, and many more. Various forms utilize a datepicker to fill in the date type inputs. A datepicker is a widget that helps users with the facility to pick one date without manually typing it. It is usually used in forms to assist the user ease in adding dates to the form.

This article will guide you on how to add datepicker in form using HTML.

How to Add Datepicker in form Using HTML?

The syntax to add a datepicker in the form is given as follows:

Here, both the input field type and id are set as “date”.

Example: Adding a Datepicker in form Using HTML

In the HTML file, add a div element with the “main-content” class name. Within this div:

• Add another div with the “form-content” class.
• Then, add an HTML <form> element that holds the input fields for name and date of birth.
• The label element surrounds these input fields.
• <br> tags are specified to add line breaks.
• Lastly, add <button> element to create a button on the form:

Now, move on to the CSS section to style the elements.

Style “body” Element

The body section is applied with the “background-color” property to set its background color.

Style “main-content” div

The “.main-content” refers to the div main-content. Below are the properties applied to it:

• “background-color” property sets the element’s background color.
• “width” property sets the element’s width.
• “height” property sets the element’s height.
• “padding” property sets space around the element’s content or inside the border.
• “padding-top” property adds space to the top of the element’s content.
• “border-radius” property makes the element’s edges round.
• “margin” property adds space around the element.
• “font-size” property is utilized to set the font size.

Style “form-content” div

Style “input” Element

Style “button” Element

The styling properties applied to the <button> element are explained below:

• “color” property specifies the font color.
• “box-shadow” property applies the shadow on the element having values for x-offset, y-offset, blur, spread, and color.
• “transition” property is utilized to change the element’s properties smoothly. It specifies the property values to which it is applied, its duration, and its type. In our case, “ease” is used to specify the element’s transition to start slowly, then fast, and slow at the end.

Style the “button” Element on “hover”

The button applied with the “transform” property with the value set as “translate(3px, 3px)” will move the element in the x-axis and y-axis ordinates.

Here is the final look of the form:

It can be observed that the datepicker has been successfully added to the form.

Conclusion

A datepicker is associated with the date input fields where the user can select a date. It provides a user with ease. To do so, input elements are associated with the attribute “date” type, like this “ <input type=”date” id=”date”>. This post has demonstrated how to add a datepicker in form using HTML.