Form Input Types

Text

We've already seen how to gather input from text fields, but there are a variety of other types of form fields as well: Select boxes, radio buttons and checkboxes are perhaps the most prominent.

HTML5, finalized in 2014 and now widely supported, also introduced a number of additional input types, including date, color, email, tel, url, number, and many others. See the MDN for a full list of HTML input types. Bootstrap also has more information about them here.

Generally as you come across the need to gather input in a particular way, you'll do some research to figure out how to read input in that way. We'll introduce a few of the most common input field types. But first, a note of warning:

Always `parseInt()` Number Values

Just because you mark your HTML input field as number, date, or tel, don't expect it to come in as the JavaScript number type. Marking it in your html as type="number" just means that the browser will do some preliminary checking to encourage the user to enter a number rather than some text. But when you use .val() to read the input, it will still come in as a JavaScript string, not a number. The HTML input types mostly just help indicate to the user what type of input is expected and/or allow the user to more easily enter a value such as a date or color.

Select Boxes

Simple select boxes (where the user can only select one item) are pretty easy to implement.

select-boxes-form-input-type

This goes inside the form in your html:

<select class="form-control" id="beverage">
  <option>Coffee</option>
  <option>Tea</option>
  <option>Kombucha</option>
  <option>Water</option>
</select>

And this is one way to read out the value in your form submit event handler:

var beverage = $("#beverage").val();

If you wanted to instead give each option a value different from the text the user sees, you could change your select to look like this:

<select class="form-control" id="beverage">
  <option value="1">Coffee</option>
  <option value="2">Tea</option>
  <option value="3">Kombucha</option>
  <option value="4">Water</option>
</select>

Now when you gather the input with $("#beverage").val() you'll get "1", "2", "3" or "4". Note that they still come in as strings, so in this case you would probably want to use parseInt() to convert the inputted data to a number.

Radio Buttons

Radio buttons allow the user to select one and only one option from a list.

Here's an example of doing radio buttons (this would go inside the form in your html):

<div class="radio">
  <label>
    <input type="radio" name="flavor" value="chocolate" checked>
    Chocolate
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="flavor" value="vanilla">
    Vanilla
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="flavor" value="cookiesandcream">
    Cookies & Cream
  </label>
</div>

And a way to read the value selected:

var flavor = $("input:radio[name=flavor]:checked").val();

Checkboxes

Checkboxes work similarly to radio buttons, but allow users to select multiple options. Because we want to be able to collect all of a user's selections, we will first need to learn about something called an array, which we will do next week. In its simplest form, an array is simply a list of multiple items packaged together.

Date

The date input type provides an easier interface for users to browse, select, and input dates:

form-input-type-date-picker

<div class="form-group">
  <label for="born">Date of birth:</label>
  <input id="born" class="form-control" type="date">
</div>

var dob = $("#born").val();

Color

You may not have seen this one before! The color form input type, when clicked, opens a special panel where users can fine-tune and select specific colors:

form-input-type-color-selector

<div class="form-group">
  <label for="color">What is your favorite color?</label>
  <input id="color" class="form-control" type="color">
</div>