<h3>tel type for inputs</h3>
In theory, this will produce an error if you provide an invalid telephone number after pressing submit - however in practice, it does not enforce any particular syntax. So <code>tel</code> is quite similar to <code>text</code>, only it can't contain a carriage return or line feed.
<pre><code>&lt;form>
    &lt;input type="tel" />
    &lt;input type="submit" value="Submit" />
&lt;/form>
</code></pre>
<form action="#">
    <input type="tel" />
    <input type="submit" value="Submit" />
</form>

<h3>url type for inputs</h3>
This will not allow anything which is not in URL format:
<pre><code>&lt;form>
    &lt;input type="url" />
    &lt;input type="submit" value="Submit" />
&lt;/form>
</code></pre>
<form action="#">
    <input type="url" />
    <input type="submit" value="Submit" />
</form>

<h3>email type for inputs</h3>
This will only allow valid emails:

<pre><code>&lt;form>
    &lt;input type="url" />
    &lt;input type="submit" value="Submit" />
&lt;/form>
</code></pre>
<form action="#">
    <input type="url" />
    <input type="submit" value="Submit" />
</form>

<h3>number type for inputs</h3>
This will validate that the input is a number.

<pre><code>&lt;form>
    &lt;input type="" />
    &lt;input type="submit" value="Submit" />
&lt;/form>
</code></pre>
<form action="#">
    <input type="number" />
    <input type="submit" value="Submit" />
</form>

<h3>range type for inputs</h3>
This will create a range bar. Since it lets us select a range, we can also use the <code>min</code>, <code>max</code>, and <cdoe>step</code> attributes to set the minimum value, maximum value, and how much each step increases by respectively.

<pre><code>&lt;form>
    &lt;input type="range" min="1" max="10" step="1" />
    &lt;input type="submit" value="Submit" />
&lt;/form>
</code></pre>
<form>
    <input type="range" min="1" max="10" step="1" />
  <div style="float: left; width: 100%;">
    <input type="submit" value="Submit" />
  </div>
</form>

<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;
}
.plain-code, pre code {
    font-family: Monaco,Menlo,'Courier New',monospace;
    left: 5px;
    margin-top: 0;
    overflow: auto;
    box-sizing: border-box;
    padding: 1rem;
    display: block;
    max-height: 500px;
    line-height: 1.45rem;
    border-radius: 14px;
    min-height: 111px;
    width: 100%;
    float: left;
    background: #151b24;
    font-size: .9rem;
    max-width: 100%;
}
pre {
    padding: 0;
    font-size: 1rem;
    margin: 0 0 3rem 0;
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: auto;
    font-family: Monaco,Menlo,'Courier New',monospace;
    max-width: 100%;
    width: 100%;
    margin: 2rem 0
}