HTML Forms

What is it?

The HTML elements that allow you to create forms on your site.

Why should I learn it?

The Web is becoming more and more interactive. You must create sites that provide interactivity and engagement with a user. One way a user can interact with a site is by interacting with form elements.

What can I do with it?

You can create text inputs, radio buttons, checkboxes or dropdown menus. You can use forms with JavaScript to control what is displayed on a page, to interact with data or to receive form responses from users.

How long will it take?

You already know how HTML works. It will take a few minutes to learn the elements and attributes associated with forms. Later, you will learn the JavaScript commands to interact with data that a user inputs.

Resources

Getting Started

Forms allow you to collect data or pass information from users. You can ask users for information or create interactives that can be sorted, filtered or otherwise customized. Forms can collect data that can be processed to go into a database or they can interact with other parts of your code. Understanding how forms work is the first step in making websites more responsive to user input. When we move into JavaScript, you'll be able to collect inputs or data from a user and act upon it.

We'll add a form to the index.html page you have created in the previous exercises or use the basic html code below. A form can be inserted on the page in a div, so that it can be formatted in the layout. You can use form elements with other html elements like paragraphs and tables to provide for a strong form design.

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Insert the basic form tag somewhere on the page. Everything in the form will be surrounded by this tag.

Depending on what you are doing with the form, the element can include id, name or class attributes. We'll be using these attributes as we learn to work with form data. But first, you will learn about different form elements.

Text Inputs

Text Field – a short text field; the name is the variable name of the field.

Text Area – a longer field, for comments, etc. You can control the size.

<label for="message">Comments:</label>
<textarea rows="4" cols="50" id="message" name="message"></textarea>

Label - this indicates the text associated with a form element. Technically, you can use any regular html tag to do this, but "label" is the correct way to associate the label with the actual form element. It also lets you use styles to consistently control the label, and it focuses on the related element with the same "id" when you click on the label text with the associated "for" value.

Code Sample - Text Inputs

HTML

You insert elements within the form tag. Of course, you can include any html elements in your forms, as well.

Radio Buttons

Radio Button – gives user a choice of one item in a series. Use this option if you only want the user to be able to pick one. Using radio buttons in a series, you give them the same name and a unique value and a unique id. Each of these attributes has a different function. The value of the selected button will be what is sent when the form is submitted.

See code sample for example.

Notice how the button is picked when the label is selected. This is due to the "for" attribute in the label matching the "id" attribute in the input.

We will be using radio buttons for user input for the quiz example.

Code Sample - Radio Button

HTML

Add the code above to your html within the form to add a series of selections to use with radio buttons.

Check Boxes

Check Box – allows user to choose as many as they want with a checkbox. Like radio buttons, you use a common name and a unique value for each box. The values of the selected boxes will be what is sent when the form is submitted.

The multiple values of a checkbox are sent as an "array" or list of elements.

Code Sample - Check Box

HTML

Add the code above to your html within the form to add a series of selections to use with a checkbox. If you refresh the page, you will see the beginning of your form, including a text input, a radio button series and a checkbox series.

Dropdowns

Dropdowns provide another way to allow users to select from a series. It uses the select and option elements, each with a unique value. See the Dropdown functioning below and get the code on the right.

You can include the multiple="yes" attribute to allow for multiple selects in the list if the user holds down the command/control key in making the selections.

We will be using dropdowns for user input on several graphical and filtering examples.

Code Sample - Dropdown

HTML

Use the code above to add a dropdown to your page. Refresh to see the dropdown.

Buttons

Buttons – you must have a Submit button for the form to submit. You can also have a Reset button to allow the user to reset all form values.

A newer version is the Button tag. This allows you use anything as the text, including other html tags and images

<button type="submit">Submit</button><button type="reset">Reset</button>

Code Sample - Buttons

HTML

Your form should now include all the elements we have addressed above, text inputs, radio buttons, check boxes, dropdown and a submit button. Refresh the page to see the final form.

Additional Inputs

There are other input types you may want to try, depending on what you are collecting in your forms, like color, range or date. Each brings up a visual element for the user to use in selecting their desired option. The "color" type brings up a color picker visual. The "range" type displays a slider. And the "date" type shows a calendar visual. See The Input Element for descriptions of these features. Try the examples below and see the code samples to the right. Ranges and dates allow you to establish minimum, maximum and default values.

Color Picker

Pick a color

Range Input

Choose: 1 to 5

1 5

Date Input

Date:

Code Sample - Additional Elements

HTML

Form Layout

Creating well designed forms is critical to the success of your usage of the form. You can use things like tables to format a form, but the most efficient way to do this is to use CSS. You can use flexbox techniques to put items in columns. Think about the exact layout you wish for a form, including spacing, visuals and any instructions. The code sample with CSS shows an example of creating your own CSS classes to control the layout, classes for row (this is the parent element with display: flex, so that elements below are place next to each other), col-left, col-right, and radio-items. These are class names that we create and provide the CSS to control display, alignment and spacing. Put the CSS in the head of a document and the form html where you want it to appear in your page. Play with the classes to create your own layout. You may also need to create media queries to support the presentation of the form at smaller sizes.

For Bootstrap Users: If you are using the Bootstrap framework, you can use basic Bootstrap grid classes (container, row, col). There are many other related classes that you can use to improve the layout of your forms. You can use the form-group and form-check classes that handle the vertical layout requirements for you without additional CSS. See the Bootstrap code sample. Include that in an html page that has links to Bootstrap JS and CSS.

The form-group class provides spacing betweeen groups.

Use the "col" classes to control the layout, i.e. col-sm-2, col-sm-10.

Use col-form-label and form-control for improved spacing on labels and inputs.

form-check, form-check-input and form-check-label provide spacing for radio buttons and check boxes.

The offset class moves the content over in the grid to create the proper layout for the button.

Use containers and rows as you normally would in Bootstrap. Bootstrap takes care of responsive techniques with media queries depending on the col size you use (sm, md, etc). Take your time and consider what you know about layout in creating a good design for your forms.

The form before styling with only HTML looks like this:

The form styled with the sample CSS now looks like this. We have the questions in the left column and the elements for answers in the right. Spacing and alignment help make the form easier to read and fill out for the user.

The form with the sample Bootstrap classes applied now looks this this. The main elements are the container, row and col classes that Bootstrap provides for the grid. Play with the other Bootstrap form classes to achieve desired spacing and alignment.

Find more information about Bootstrap Forms.

Code Sample - Form Layout with CSS

CSS

HTML

<form>
    <div class="row">
    <div class="col-left">
      <label for="email">Email</label>
      </div>
      <div class="col-right">
        <input type="email" id="email" placeholder="Email">
      </div>
    </div>

<div class="row">
    <div class="col-left">
      <label for="password">Password</label>
      </div>
      <div class="col-right">
        <input type="password" id="password" placeholder="Password">
      </div>
    </div>

<div class="row">
    <div class="col-left">
      <label>Radios</label>
      </div>
      <div class="col-right">
   
          <label class="radio-item">
            <input type="radio" name="myoptions" id="option1" value="option1" checked>
            Option one
          </label>
          <label class="radio-item">
              <input type="radio" name="myoptions" id="option2" value="option2">
              Option two
            </label>
            <label class="radio-item">
              <input type="radio" name="myoptions" id="option3" value="option3">
              Option three
            </label>            
      </div>
</div>

Code Sample - Form Layout with Bootstrap

HTML

<div class="container">
  <form>
    <div class="form-group row">
    <div class="col-md-2">
      <label for="email" class="col-form-label">Email</label>
      </div>
      <div class="col-md-10">
        <input type="email" class="form-control" id="email" placeholder="Email">
      </div>
    </div>

<div class="form-group row">
    <div class="col-md-2">
      <label for="password" class="col-form-label">Password</label>
      </div>
      <div class="col-md-10">
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
    </div>

<div class="form-group row">
    <div class="col-md-2">
      <label>Radios</label>
      </div>
      <div class="col-md-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="myoptions" id="option1" value="option1" checked>
            Option one
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="myoptions" id="option2" value="option2">
            Option two
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="myoptions" id="option3" value="option3">
            Option three
          </label>
        </div>
      </div>
</div>

Include this form in an html page that is linked to Bootstrap js and css.

Form Processing

Now that we have a form, we have to figure out what happens when a user submits the data. For the rest of these tutorials, we'll be taking user inputs and using them with JavaScript to manipulate the presentation of information on a page.

But forms are often used for data submission, for things like shopping carts and online orders, information forms, establishing an account login. These forms usually process information to go into a database.

In the old days, we used to be able to include a mailto with an email address as our action for submitting a form. But that requires the user to have an email client available, which is not terribly common these days, since most people use a webmail program and may be filling out a form on a lab computer or a mobile device that does not have an email client.

There are other ways that users can submit information, like to a cgi-bin or php script, but these require server support. We won't be covering those scripts on this site, but you can find form processing scripts in a variety of languages on the Web.

Processing a Form to a Database

There are limitations, of course, to processing form submissions in the way described above. Do you really want to receive several emails with the data in them? By using a Web language like PHP, Ruby or Python, you can also program a form to post to a database (MySQL or others). Then you can program queries to sort and retrieve data to make an interactive website.

There are obviously new ways to quickly create forms for data collection using things like Google Drive.

Moving On

That's a pretty good introduction to HTML Forms. You'll get lots more experience using forms as we move into JavaScript. We'll take inputs from users and create scripts that do something with them, anything from retrieve data based on an input to searching and filtering a dataset. Onward!