Adding Form Inputs

To collect information from users, you can use the input tag with different type attributes like text, checkbox, and radio.

There are several different input types available in HTML, and choosing the right one can make your form much easier for users to complete. Each type behaves differently depending on whether you want a single answer or a group of selections from the user.

Text Inputs

The text type is the most common input, used for short, single-line text like names or addresses:

Checkboxes

Use the checkbox type when you want to allow the user to select one or more options from a predefined list. Each checkbox should have its own value attribute. If you want a checkbox to be selected by default when the page loads, you can add the checked attribute to the tag:

Radio Buttons

Use the radio type when you want the user to select exactly one option from a group. To link several radio buttons together in a group, you must give them the same name attribute. Just like with checkboxes, you can use the checked attribute to pre-select one of the options:

Notice how they share name="gender". If you gave them different names, the browser wouldn't know they are part of the same choice and would allow the user to select both.

Full Working Example

The following example demonstrates how all three types can be used together in a simple form:

<!DOCTYPE html>
<html>
<head>
<title>Form Inputs Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  form {
    background: #fdfdfd;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    max-width: 400px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .input-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  .choice-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
  }
</style>
</head>
<body>

<form action="/html/tags/html_form_tag.cfm">
  
  <div class="form-group">
    <label for="username" class="input-label">Username:</label>
    <input type="text" id="username" name="username">
  </div>

<div class="form-group choice-group">
    <span class="input-label">Interests:</span>
    <label><input type="checkbox" name="interests" value="coding"> Coding</label>
    <label><input type="checkbox" name="interests" value="design"> Design</label>
    <label><input type="checkbox" name="interests" value="music"> Music</label>
  </div>

<div class="form-group choice-group">
    <span class="input-label">Subscription Level:</span>
    <label><input type="radio" name="level" value="basic" checked> Basic (Free)</label>
    <label><input type="radio" name="level" value="pro"> Pro ($10/mo)</label>
    <label><input type="radio" name="level" value="premium"> Premium ($20/mo)</label>
  </div>

</body>
</html>

View Output Full Screen Preview

Select Menus

Another way to provide a list of choices is using the select and option elements. This is used for creating dropdown lists, which is particularly handy when you have many options that would take up too much space as a list of checkboxes or radio buttons.

For more details, see Create a Dropdown Select Menu.