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.

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.

<form id="myform"> </form>

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.

<p>Name: <input type="text" id="yourname" name="yourname" /></p>

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.

<label for="yourname">Name</label> <input type="text" id="yourname" />

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.

<label for="bike">Bike</label> <input type="checkbox" name="vehicle" value="Bike" id="bike" /> <label for="car">Car</label> <input type="checkbox" name="vehicle" value="Car" id="car"/>

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.

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.

<input type="submit" value="Submit"><input type="reset" value="Reset">

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

 

Range Input

1 5

 

Date Input

 

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). Use the "col" classes to control the spacing within rows, i.e. col-md-2, col-md-10. The sample code uses basic CSS and Bootstrap classes to make a simple layout. Include this code in a file that has links to the Bootstrap CSS and JS files.

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.

There are many other Bootstrap classes that you can try to improve the layout of your forms.

The form-group class provides spacing betweeen groups.

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.

Find more information about Bootstrap Forms.

Code Sample - Form Layout with CSS

CSS

HTML

Code Sample - Form Layout with Bootstrap

CSS

Apply in style section or css page. You can apply any CSS you need to the form. This CSS provides some basic styling and media query for the html code provided.

HTML

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!