<h3>date type for inputs</h3>
<input type="date" />
<h3>month type for inputs</h3>
<input type="month" />
<h3>week type for inputs</h3>
<input type="week" />
<h3>time type for inputs</h3>
<input type="time" />
<h3>date type for inputs</h3>
<input type="datetime-local" style="margin-bottom: 2rem;" />
<a href="https://fjolt.com/article/html-input-types" target="_blank">Read the article</a>
input {
padding: 0.5rem;
letter-spacing: .5px;
font-size: 1rem;
max-width: 400px;
}
body {
margin: 0;
float: left;
width: 100%;
padding: 0 1rem;
box-sizing: border-box;
overflow-x: hidden;
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
background: rgb(15 19 22);
font-display: swap;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: #fff;
}
a {
float: left;
width: 100%;
margin: 2rem 0;
color: white;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.