Creating Forms. Speaker: Ray Ryon

Transcription

1 Creating Forms Speaker: Ray Ryon In this lesson we will discuss how to create a web form. Forms are useful because they allow for input from a user. That input can then be used to respond to the user with additional information. For example, an E-Commerce business could use a form to make a sale. For an organization, a form could be used to gather membership information. You will see multiple uses of forms on the Internet. There are also multiple methods of handling the data once the user submits it. For our purposes we will look at one simple method of handling the data since most of the other methods are beyond the scope of this course. That method is to the form data. The main focus that we will place on forms is how to create them. We will be creating a web page that is pictured. Page 1 of 6

2 Notice the form contains a textbox for the name, a check box, radio buttons, a select list and two buttons. The complete code will be listed at the end of this document. However I will describe the pieces of code that create the form. Let s begin with the HTML code. First you will need to create the basic HTML web page using normal tags such as html, head, title, body and h1. Don t forget to place comments in the code. Form Tag Next, decide where your form will be. To show where the form is, you will code beginning and ending form tags. The form tag is similar to when you built a Table and you had beginning and end table tags with additional tags between to build the table. The form tag is similar in that it shows the start of the form but there will be several additional statements that are used to create the inside part of the form. The beginning form tag will also require some attributes. The first attribute is method. We will use method="post. Another option is method="get. These options are used by server processing which isn t how we will be processing the form, so I ll skip these in this lesson. The other attribute that is found on the form tag is the action attribute. This attribute identifies what will be done when the form is submitted. If the action was on a server the action would be the name of a program that processes the data. Since that is beyond our scope we will use the mailto option to send the data to an account. The example form tag will be: <form method="post" action="mailto:my address@indianhills.edu"> Don t forget to place an ending form tag. </form> Let s talk about a few of the elements that go in between the beginning and end form tags. Text Box The text box element will create a box that allows the user to type text. It is probably the most commonly used form element. The tag that will be used for creating this and most of the form elements is input. To create different elements an attribute called type is added. For the text box, type will be set to equal text. The other main attribute we will need on form elements is a name or id. I use both because different browsers will support one or the other or both. However the name attribute is deprecated and only supported on older browsers. The main use of the id/name is to uniquely identify the form element. This id will be sent along with the typed data to identify which element collected it. For example, suppose we had a text box for first name and another for last name. When the data is submitted we wouldn t know which data came from which text box unless we had unique ids for each. Page 2 of 6

3 The html code to create a text box will look like this. <input type="text" name="fname" id="fname" /> This code will only create the text box. To help the user you should also provide a description either before or after the input tag. Check Box A check box is created for making it quicker to enter data. A single click to check or no click to leave it unchecked is much quicker than typing in a word in a text box. Also it is easier for the data to be interpreted after it has been submitted from a checkbox. For example, suppose you had a text box to collect a yes or no answer. When the data is submitted for processing it would be hard to know if the values that were typed in were YES, yes, y, Y or even YA. The program to process the data from a text box would have to check for all possibilities which seem to be unlimited. With a checkbox there will only be one value to identify and that is the one that is placed in the html tag when the form is created. The check box is created similar to the text box. Create an html input tag. Set the type attribute to checkbox. Add a name and id to give it a unique identifier. Then finally add a value attribute with the value you want for data processing to look for when the checkbox is checked. The html code to create a check box will look like this. <input type="checkbox" name="webex" id="webex" value="yes" /> Similar to the text box, this input tag only creates the box to place the check mark in. There should be a description either before or after the input tag. Radio Buttons Radio buttons are similar to check boxes in that they can allow for quicker data entry and more precise values. The main difference is that radio buttons are made for choices of multiple options where you want only one selected. When you click on one radio button all the other buttons in the same group will be cleared. The html code for a radio button also is placed in an input tag. The type will be set to radio. A name and id are used to uniquely identify the radio button. And a value is coded that will be used for data processing when that radio button is selected. As I mentioned radio buttons are created in groups. Each name and id is the same for all radio buttons in the same group but the values will be different to identify which button is selected. The radio button that is selected will be the only one that will be submitted for data processing. The html code to create a radio button will look like this. value="ie" /> Each input tag with type set to radio will create a circle for the user to check. There should be a description either before or after each input tag so the user knows which one is to be checked. Page 3 of 6

4 Select List As you get more options of radio buttons you will start cluttering the form. So radio buttons work best with 3 to 5 choices. A select list will work better when there are more options. This list will only show one option until the user clicks on it. Then a drop down list will appear from where multiple values can be used to make a selection. The select list does not use the input tag like the other form elements. It is created similar to the ordered and unordered lists. First create a beginning select tag and closing select tag. Then between the select tag pair create the individual items using an option tag pair. Since a form can handle multiple selection lists we need to uniquely identify it with the name and id attributes in the select tag. To identify which option is selected there is a value attribute in the option tags. Also the option tag needs to display to the user a description of the option. The description is placed between the option tag and its end option tag. The html code to create a selection list will look like this. <select name="city" id= city > <option value="ankeny">ankeny</option> <option value="ottumwa">ottumwa</option> </select> Buttons When the user is done filling out the form they will need to press a submit button. To display this button use the input tag with the type attribute equal to submit. Each browser has a default caption that appears as text on the button but if you want specific text you should specify that with a value attribute. The html code to create a submit button will look like this. <input type="submit" value="submit" /> If you want the user to be able to clear the form and start all over you can add a reset button. Use the input tag with type attribute equal to reset. Again you can specify the text that will appear on the button using a value attribute. The html code to create a reset button will look like this. <input type="reset" value="start Over" /> Adding Style After you create the html code for a form you will want to help it look better by applying some CSS styles. It is typical to use classes on div tags to apply the style rules. For example you can make a class called.form. Then wrap the form with a div that uses the class= form. Here you could set the font for Page 4 of 6

5 everything in the form. Such as, you could apply a background color. Also you could add a border around the form. Similarly you could create an.element class in the CSS code. Then wrap the individual form elements with a div tag pair set to class= element. This would allow you to add extra space around the elements through use of padding or margin rules. If there were special elements that you wanted to apply different rules you could create additional CSS classes. In the example you will want to look at the various CSS styles that were applied to the form. Submitted Form What happens when the user presses the submit button? At that time the data is sent as indicated by the action attribute on the form tag. Our example indicates it will be ed. Here is an example of the result of the . fname=bob&webex=yes&browser=chr&city=minneapolis You will notice that the data comes from either what the user types in the form element or what was on the value attribute of the form element. Also the id of the form element is shown before the value with an equal sign between the two. An ampersand delimiter is placed between two element s data to separate them. COMPLETE CODE EXAMPLE <html> <head> <!-- Ray Ryon Example of Form --> <title>example of Form </title> <style type="text/css"> /* Embedded CSS styles for Form Example Ray Ryon */ h1{ background-color:#cccccc; border: 3px solid red; padding:14px; margin:30px; text-align:center; }.form{ border: 3px solid blue; }.element { margin:30px; }.buttons { text-align:center; margin-top:15px; } </style> </head> <body> <h1>example of Form </h1> <div class="form"> <form method="post" action="mailto:my address@indianhills.edu"> First name: <input type="text" name="fname" id="fname" /> Page 5 of 6

6 /> <input type="checkbox" name="webex" id="webex" value="yes" /> Check here if you had prior web development experience. What browser do you use?<br /> value="saf" checked="checked"/> value="chr" /> Google Chrome<br /> value="ie" />Internet Explorer<br/> value="moz" /> Mozilla FireFox<br /> Apple Safari<br Internship Location:<select name="city" id= city > <option value="ankeny">ankeny</option> <option value="cedar Rapids">Cedar Rapids</option> <option value="des Moines">Des Moines</option> <option value="grinnel">grinnel</option> <option value="kansas City">Kansas City</option> <option value="minneapolis">minneapolis</option> <option value="muscatine">muscatine</option> <option value="ottumwa">ottumwa</option> <option value="other">other</option> </select> <div class="buttons"> <input type="submit" value="submit" /> <input type="reset" value="start Over" /> </form> </body> </html> Ray Ryon and Indian Hills Community College Page 6 of 6