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?
How long will it take?
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
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 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 - 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.
Code Sample - Text Inputs
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 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.
Code Sample - Radio Button
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 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.
I have a bike
I have a car
Code Sample - Check Box
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.
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.
Code Sample - Dropdown
Use the code above to add a dropdown to your page. Refresh to see the dropdown.
Code Sample - Buttons
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.
You can use things like tables to format a form, but the most efficient way to do this is to use the fieldset element with CSS. It 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
By using labels and fieldset, you can apply CSS to control the appearance of your form with things like padding, width and float.
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.
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.