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. 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.

Insert the basic
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.

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

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.

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

Code Sample - Text Inputs

HTML

 

You insert elements within the form tag. Copy the code above to create a text input. Notice the use of paragraphs to include text to accompany the form elements.

Radio Buttons

Radio Button – gives user a choice, either/or, not both; using radio buttons in a series, you give them the same id and a unique value. The value of the selected button will be what is sent when the form is submitted.

<input type="radio" name="gender" value="male" />Male<br> <input type="radio" name="gender" value="female" />Female

Code Sample - Radio Button

HTML

 

Including the input within the label can provide a different layout. Try it both ways. 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.

<p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br> <input type="checkbox" name="vehicle" value="Car" />I have a car </p>

Code Sample - Check Box

HTML

Including the input within the label can provide a different layout. Try it both ways. 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.

Form Layout

You can use things like tables to format a form, but the most efficient way to do this is to use CSS. The fieldset element is specifically used to group controls and elements within a Web form. If you include a legend with a fieldset, it formats the text at the top of the bounding box. The code sample to the right creates a form that looks like this:

If you are using the Bootstrap framework, you can use the form-group and form-check classes that handle much of the vertical layout requirements for you without additional CSS. Find more information about Bootstrap Forms.

Code Sample - Form Layout

HTML

By using labels and fieldset, you can apply CSS to control the appearance of your form with things like padding, width and float.

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. You set up the script with a few variables and use it as the action for the form. Here is a simple PHP script you can use on your site to process forms, with minimal configuration requirements. Just make sure the following variables are changed to your information the configuration section (around line 443) and change the hidden fields for recipients and required that are set in the html. Instructions are in the files that download with the script. Upload the form and the script to a location on your server. Your server must have PHP support for this script to work. Give it a try, if you are looking to process form submissions directly to email.

$TARGET_EMAIL = array("^youremail@gmail\.com$"); $DEF_ALERT = "youremail@gmail.com";

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. At this time, this site doesn't cover this area, but hopefully will in the future. You can find a tutorial that does this on Lynda.com.

Moving On

That's a pretty good introduction to HTML Forms. You'll get lots more experience using them 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 filter a dataset. Onward!