<h3>hidden type for inputs</h3>
(you can't see this one, since it's hidden! 😁)
<input type="hidden" />

<h3>text type for inputs</h3>
This is for any text input
<div class="fl" style="margin-bottom: 2rem; margin-top: 1rem;">
<input type="text" />
</div>

<h3>password type for inputs</h3>
Anything entered here will be a password.
<div class="fl" style="margin-bottom: 2rem; margin-top: 1rem;">
<input type="password" />
</div>

<h3>submit type for inputs</h3>
This produces a submit button.
<pre><code>&lt;input type="submit" value="Submit" />
</code></pre>
<input type="submit" value="Submit" />

  <h3>button type for inputs</h3>
This produces a button, which does not submit the form.
<pre><code>&lt;input type="button" value="My Button" />
</code></pre>
<input type="submit" value="My Button" />

  <h3>search type for inputs</h3>
This will show a little <code>x</code> when you start typing in it. 
<div class="fl" style="margin-bottom: 2rem; margin-top: 1rem;">
<input type="search" />
</div>

  <h3>radio type for inputs</h3>
The <cdoe>radio</code> type is for a set of items, where we can only select one. We can differentiate different sets of <cdoe>radio</code> buttons by giving them matching <cdoe>name</code> attributes. For example, below, the first two <cdoe>input</code>s have the name <cdoe>radio-set</code>, so we can only select one from that set.

<strong>Note:</strong> that the <code>value</code> is the value submitted when we click submit. If we want to give these a <code>label</code>, we need to add text beside the <code>input</code> or use the <code>label</code> html tag.
<pre><code>&lt;form>
    &lt;input type="radio" name="radio-set" value="Some Radio" />
    &lt;input type="radio" name="radio-set" value="Another Radio" />
    &lt;input type="radio" name="radio-set-2" value="Another Radio" />
    &lt;input type="radio" name="radio-set-2" value="One Radio" />
&lt;/form>
</code></pre>
<form action="#">
    <input type="radio" name="radio-set" value="Some Radio" />
    <input type="radio" name="radio-set" value="Another Radio" />
    <input type="radio" name="radio-set-2" value="Another Radio" />
    <input type="radio" name="radio-set-2" value="One Radio" />
</form>

<h3>checkbox type for inputs</h3>
The <code>checkbox</code> type is similar to <code>radio</code>, only we can select multiple items here. Again, we can split them into sets, but you'll still be able to select multiple <code>input</code>s.
<pre><code>&lt;form>
    &lt;input type="checkbox" name="checkbox-set" value="Some Checkbox" />
    &lt;input type="checkbox" name="checkbox-set" value="Another Checkbox" />
    &lt;input type="checkbox" name="checkbox-set-2" value="Another Checkbox" />
    &lt;input type="checkbox" name="checkbox-set-2" value="One Checkbox" />
&lt;/form>
</code></pre>
<form action="#">
    <input type="checkbox" name="checkbox-set" value="Some Checkbox" />
    <input type="checkbox" name="checkbox-set" value="Another Checkbox" />
    <input type="checkbox" name="checkbox-set-2" value="Another Checkbox" />
    <input type="checkbox" name="checkbox-set-2" value="One Checkbox" />
</form>

<h3>reset type for inputs</h3>
This will reset all other form input elements. It creates a button which simply says `Reset`:
<pre><code>&lt;form>
    &lt;input type="text" value="Some Value" />
    &lt;input type="reset" />
&lt;/form>
</code></pre>

Try changing the value of the input below, and then click <strong>Reset</strong>
<div style="margin-bottom: 2rem; float: left; margin-top: 1rem; width: 100%;">
<form>
    <input type="text" value="Some Value" />
    <input type="reset" />
</form>
</div>

<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
}
.fl {
  float: left; width: 100%;
}
code {
    background: #191f2b;
    border-radius: 6px;
    padding: 0.15rem 0.25rem;
    margin: 0 0.25rem;
    font-size: .95rem;
    box-shadow: 0 2px 15px rgb(0 0 0 / 5%);
    color: #fff;
    font-family: Monaco,Menlo,Courier New,monospace;
    font-weight: 400;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}