# Form Controls

This article provides an overview of the basic form controls: text inputs, checkboxes, dropdown menus, buttons and other elements that allow for the basic user interactions in HTML. All controls have default styles that can be changed using CSS which is explored in the next section of this course. The Interaction basics course explores how you can use form controls to save user input using JavaScript and Vue.js.

# Button

There’s a special tag for buttons in HTML:

<button>Cancel</button>
<button>OK</button>

The default look of the button element is different on different operating systems and in different browsers, but usually it has a border and responds to clicks by changing a background color.

# Text input

The input tag with type="text" attribute allows users to enter text in a single-line box:

<input type="text" placeholder="Enter your name here...">

Note that the input element does not have a closing tag.

placeholder is an optional attribute that specifies what text must be shown when the input is empty.

There are other types of input—like email and password—that work similarly to text and provide additional features:

• email enables email-friendly keyboard on mobile devices.
• password hides user input behind black circles.

<input type="email" placeholder="Enter email...">
<input type="password" placeholder="Enter password...">

To create a multi-line text input field, you need to use the textarea element:

<textarea placeholder="Enter description..."></textarea>

Unlike input, the textarea element has a closing tag.

# Checkbox

To add a checkbox control to a prototype, you need the input tag with the type="checkbox" attribute and the label container:

<input type="checkbox">
<label>Use font smoothing when available</label>

label is optional, and you can put the text in a span or a div instead. But label comes with a special attribute, for, that allows to make the text clickable too. Here’s how it works:

<div>
  <input type="checkbox" id="smoothing">
  <label for="smoothing">I agree with Privacy Policy</label>
</div>

• You add the id attribute to the input tag with a value of your choice.
• You add the for attribute to the label tag with the same value.

When the label is clicked, the browser looks for an input with the id that matches the value in the for attribute, and if it finds one, it acts like the checkbox was clicked:

The syntax is a little complex, but implementing this feature is usually a necessary step. Most users expect the text to be clickable, because it is clickable in most applications. Also, text has a larger area than a checkbox control, which makes it an easier target.

You can also add the checked attribute to the input tag if you want the control to be checked by default:

<div>
  <input type="checkbox" id="smoothing" checked>
  <label for="smoothing">I agree with Privacy Policy</label>
</div>

The checked attribute doesn’t require a value, so it doesn’t have an equal sign and parentheses.

# Radio buttons

The implementation of radio buttons is similar to checkbox controls, with the type attribute set to radio:

<div>
  <input type="radio" name="options" id="a" checked>
  <label for="a">Option A<label>
</div>
<div>
  <input type="radio" name="options" id="b">
  <label for="b">Option B<label>
</div>
<div>
  <input type="radio" name="options" id="c">
  <label for="c">Option C<label>
</div>

Radio buttons require the name attribute. The radio buttons with the same value in the name attribute are tied in a group, which allows only one of them to be selected at a time.

One of the radio buttons can be selected by default with the checked attribute.

You can make labels clickable with pairs of the id and the for attributes, as described the Checkboxes section above.

# Dropdown

To create a dropdown menu, you need the select element populated with option elements:

<select>
  <option>Free</option>
  <option>Pro</option>
  <option>Enterprise</option>
</select>

The option element has some optional attributes:

• selected makes the option selected by default.
• disabled doesn't allow a user to select an option from the list.

These attributes allow you to create a control that has a placeholder value—one that is shown by default, but cannot be selected by a user:

<select>
  <option selected disabled>Select an option...</option>
  <option>Free</option>
  <option>Pro</option>
  <option>Enterprise</option>
</select>

# Practice

Design a form:

1. Create a new pen, and use this article as a reference to add form controls to the prototype.
2. Wrap controls in div containers to create line breaks.
3. Instead of manually typing in tags, like <textarea></textarea>, enter the name of the tag, like textarea and press tab on the keyboard. Sometimes this shortcut will add attributes that were not covered in this article. Feel free to either ignore those attributes, or delete them, or find information about them online and try using them.