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
The attributes of form are name, action and method. 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.
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 name and a unique value. The value of the selected button will be what is sent when the form is submitted.
Code Sample - Radio Button
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
Add the code above to your html within the for 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.
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.