I was scratching my head in some of the latest advanced tutorials when we went through HTML forms. Figured I needed a quick refresher. Couldn't find exactly what I was looking for, but I buckled down and went through this quick list of 18 different input types for HTML forms-- I think it boosted my confidence. "Submit" and the various Javascript triggers involved won't be the hard to get used to in the future.

Below a massive HTML doc with every type we went over.

<!DOCTYPE html>
<html>
  <head>
    <title>Html Forms</title>
  </head>
  <body>
    <h1>HTML Forms</h1>
    <form action="">
      Name: <br />
      <input type="text" />
      <code>input type="text"</code>
      <br />Single line of text, not paragraph.
      <br />
      Password: <br /><input type="password" />
      <code>input type="password"</code>
      <br />Difference here is characters are replaced by bullets.
      <br />
      Submit: <br /><input type="submit" value="Submit" />
      <code>input type="submit" value="submit"</code>
      <br />Takes all field data and sends it somewhere.
      <br />
      Reset: <br /><input type="reset" value="Reset" />
      <code>input type="reset" value="Reset"</code>
      <br />Resets all fields to their default values. Testing by adding default
      data to the field below.
      <br />
      Text field: <br />
      <input type="text" value="Default text" />
      <br />Try typing something in here and pressing the reset button. <br />
      Radio:
      <br /><input type="radio" name="Gender" value="male" />Male<br />
      <br /><input type="radio" name="Gender" value="female" />Female<br />
      <br /><input type="radio" name="Gender" value="other" />Other<br />
      <code>input type="radio" name="Gender" value="male/female/other"</code>
      <br />Radio buttons. Note if you want a group of radio buttons, all their
      "name" values must be the same. Can select only one from an unlimited
      number of choices.
      <br />
      Checkbox: <br />
      <input type="checkbox" value="option 1" /> Option 1<br />
      <input type="checkbox" value="option 2" /> Option 2<br />
      <input type="checkbox" value="option 3" /> Option 3<br />
      <code>input type="checkbox" value="option1/2/3"</code>
      <br />Can select zero or more options.<br />
      Button: <br />
      <input type="button" value="Button" onclick="alert('hi')" />
      <code>input type="button" value="Button" onclick="alert('hi')"</code>
      <br />
      Mainly used to execute Javascript code.<br />
      Color: <br />
      <input type="color" id="send" oninput="result.value = send.value" />
      <input type="text" id="result" />
      <code
        >input type="color" id="send" oninput="result.value = send.value"</code
      ><br />
      <code>input type="text" id="result"</code>
      <br />
      If supported by browser, shows color picker.<br />
      Date: <br />
      <input
        type="date"
        id="sendDate"
        oninput="resultDate.value = sendDate.value"
      />
      <input type="text" id="resultDate" />
      <code>input type="date" then same as color</code><br />
      If supported by browser, shows date picker.<br />
      <br />
      DateTime-Local: <br />
      <input
        type="datetime-local"
        id="sendDateTime"
        oninput="resultDateTime.value = sendDateTime.value"
      />
      <input type="text" id="resultDateTime" />
      <code>input type="datetime-local" then same as color</code><br />
      If supported by browser, shows date picker with time.<br />
      <br />
      Email: <br />
      <input
        type="email"
        id="sendEmail"
        oninput="resultEmail.value = sendEmail.value"
      />
      <br /><input type="submit" /> <br /><input
        type="text"
        id="resultEmail"
      /><br />
      <code
        >type="email" id="sendEmail" oninput="resultEmail.value =
        sendEmail.value"</code
      ><br />
      <code>input type="submit", then input type="text" id="resultEmail"</code
      ><br />
      If supported by browser, email addy is auto-validated.<br />
      <br />
      Month: <br /><input type="month" /><br />
      <code>input type=month</code><br />
      Selects single month.<br />
      Number: <br /><input type="number" /><br />
      <code>input type=number</code><br />
      Autovalidated number.<br />
      Range: <br /><input
        type="range"
        id="sendRange"
        min="0"
        oninput="resultRange.value = sendRange.value"
      /><br />
      <input type="submit" /><br />
      <input type="text" id="resultRange" />
      <code>input type=range</code><br />
      Can use min max values too.<br />
      Search:<br />
      <input type="search" />
      <code>input type=search</code><br />
      Semantic. Auto-closes.<br />
      Time:<br />
      <input type="time" />
      <code>input type=time</code><br />
      URL:<br />
      <input type="url" />
      <code>input type=url</code><br />
      Another auto-validator<br />
      Week:<br />
      <input type="week" />
      <code>input type=week</code><br />
    </form>
  </body>
</html>