<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <form>
    <p> This control can be used to select a range. 
    <input type=range></p>
    <p> This control can be used to choose a date. Go on... click on that dropdown arrow
    <input type=date></p>
    <p> Try entering a number greater than 9 on this text box here and see how it reacts 
    <input type="number" … min="1" max="9"></p>
    <p> How adorable is this progress bar! 
    <progress value="80" max="100"></progress></p>
    <p> Checkout this colour picker. Yes, click on it.
    <input type="color"></p>
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.