ad

Tuesday, December 2, 2025

How to use the HTML datetime Attribute

How to use the HTML datetime Attribute

web designing theory

Syntax 

 Syntax of HTML <datetime> tag


  <input type="datetime-local" id="datetime">

How to use the HTML datetime Attribute

Example 

<!DOCTYPE html>
<html>
    <head>
        <title> HTML Input Type Datetime </title>

    </head>
   <body><center>
        <h3> HTML  input type="datetime" element</h3>
      <form>
        <label>Select your DateTime :-</label>
        <input type="datetime-local" id="datetime" >
      </form>
    </center>
    </body>
 
</html>


How to use the HTML datetime Attribute

Explain Program

Step  1] 

<!DOCTYPE html>

This declare the document type.

browser that the document is written in html

Step 2 ]

<html>.... . </html>

html is the root element of the html page.

 Every thing inside it is part of the webpage.

Step 3]

<head>
     
  <title> HTML Input Type Datetime </title>

    </head>

  <head>  section 

 head section contains metadata about page. not visible on the page itself.

<title> tag

title section set the title of the page shows the browser tab.

Step 4]

<body><center>

< body> tag  contains all the content visible to webpage.

<body> tag contains  all the visible content of the page.

inside <body> show the browser screen.

<center>  all the content center

Step 5]

<h3> HTML  input type="datetime" element</h3>

<h3> tag is a level 3 heading.

display a title on the page 

Step 6]

<form>
        <label>Select your DateTime :-</label>
        <input type="datetime-local" id="datetime" >
      </form>


<form> tag defines HTML  form user can input data.

   <label>Select your DateTime :-</label>

 <label> tag  provide Text label  for input field.
  label tag  accessibility because screen readers can read the label  user understand input.
 allows user to click on the label to focus input user.
 
<input type="datetime-local" id="datetime" >

   <input type>  create a date and time input field.
   id  assign unique identifier .
  user click the field and choose  date and time picker.

  Step 7]

closing the Tag
  
 
</center>
    </body> 
    </html>

How to use the HTML datetime Attribute