Web Design and Development

Web Design and Development Unit 11: Designing Forms

DESIGNING FORMS • Client-side vs. Server-side Quiz • 1. Web browser • 2. Processing Web requests • 3. Embedded scripts • 4. Saving and retrieving data • 5. JavaScript • 6. CSS • 7. Programming can be encrypted • 8. User's computer • 9. Reduced amount of browser bugs or compatibility issues • 10. Limited in control and problems with operating systems and browsers

DESIGNING FORMS • Client-side vs. Server-side Answers • 1. Web browser: Client-side • 2. Processing Web requests: Server-side • 3. Embedded scripts: Client-side • 4. Saving and retrieving data: Server-side • 5. JavaScript: Client-side • 6. CSS: Client-side • 7. Programming can be encrypted: Server-side • 8. User's computer: Client-side • 9. Reduced amount of browser bugs or compatibility issues: Server-side • 10. Limited in control and problems with operating systems and browsers: Client-side

DESIGNING FORMS • UNDERSTANDING THE PURPOSE OF FORMS • Up to this point, you’ve learned almost everything you need to know to create functional, attractive, and somewhatinteractive Web pages. • If you think about it, however, the pages you’ve created thus far have a one-way information flow.

DESIGNING FORMS • FORMS • Forms provide a departure from client-side activity to server-side interaction. This unit is about creating HTML forms to collect information from people visiting your website. • Forms enable you to gather just about any kind of information for immediate processing by a server-side script or for later analysis using other applications

DESIGNING FORMS • OBJECTIVES • The topics in this unit will enable you to create any type of form possible with HTML: • You’ll discover how HTML forms interact with server-side scripts to provide interactivity. • You’ll create simple forms to understand the basic process. • You’ll learn all the types of form controls you can use to create radio buttons, check boxes, and more. • You’ll utilize more advanced form controls to more fully utilize the power of forms.

DESIGNING FORMS • UNDERSTANDING FORM AND FUNCTION • To begin, you need to understand a few things about forms: • First, a form is part of a Web page that you create using HTML elements (tags). • Each form contains a form element that contains special controls, such as buttons, text fields, check boxes, Submit buttons, menus, and more.

DESIGNING FORMS • UNDERSTANDING FORM AND FUNCTION • These controls make up the user interface for the form (that is, the pieces of the form users see on the Web page). • When people fill out forms, they’re interacting with these HTML elements.

DESIGNING FORMS • UNDERSTANDING FORM AND FUNCTION • When someone fills out an HTML form, they enter information or make choices based on the form controls you created (i.e. buttons, text fields, check boxes, Submit buttons, menus). • When the user submits the form, the browser collects all the data from the form and sends it to the URL specified as the form’s action. • It’s up to the program residing at that URL to process the form input and create a response for the user.

DESIGNING FORMS • UNDERSTANDING FORM AND FUNCTION • It’s important that you understand the implications of this final step: • When a user clicks the Submit button, the process ceases to be one of pure HTML and becomes reliant on applications that reside on the Web server. • In other words, for your form to work, you must already have a program on the server that will store or manipulate the data in some manner. Server-side Interactivity

DESIGNING FORMS • UNDERSTANDING FORM AND FUNCTION • Where does this server-side script come from?: • The server-side script is written by a programmer usually in a language called PERL. • It’s written in conjunction with the HTML form page so that it will understand all of the control “keywords” being sent to it. • Many pre-written PERL scripts can be found on the Internet and adapted for your purposes.

DESIGNING FORMS • TASK: EXERCISE 11.1: • Creating a Simple Form That Accepts a Name and a Password • Click the link to access the exercise: Task: Exercise 11.1

DESIGNING FORMS • USING THE <form> TAG • To accept input from a user, you must wrap all your input fields inside a <form> tag. • The purpose of the <form> tag is to indicate where and how the user’s input should be sent. • Forms are block-level elements. That means when you start a form, a new line is inserted. • Note: Form controls must appear inside another block level element inside the <form> element to be considered valid. A <div>, <p>, or <table> will suffice.

DESIGNING FORMS • USING THE <form> TAG: the action attribute • Most forms send their data to scripts once submitted: • <form action=“http://www.galenahigh.com/survey.pl" method="post"> • You also can make the action link to another Web page or a mailtolink: • <form action="mailto:somebody@isp.com" method="post"> • This attaches the form data set to an email, which then is sent to the email address listed in the action attribute. • Tip: To test your forms, it’s recommended you use the getmethod and leave out the action attribute of the form tag. When you submit the form, the values you entered will appear in the URL for the page so that you can inspect them and make sure that the results are what you expected.

DESIGNING FORMS • USING THE <form> TAG: the “get” method attribute • The method attribute supports two values: get or post. The method indicates how the form data should be packaged in the request that’s sent back to the server. • The getmethod appends the form data to the URL in the request. The form data is separated from the URL in the request by a question mark and is referred to as the query string. If we have a text input field named searchstring and enter Orangutans in the field, the resulting would look like the following: • http://www.example.com/search?searchstring=Orangutans • The method attribute is not required; if you leave it out, the get method will be used.

DESIGNING FORMS • USING THE <form> TAG: the “post” method attribute • The other method is post. Instead of appending the form data to the URL and sending the combined URL-data string to the server, post sends the form data to the location specified by the action attribute in the body of the request. • The <form> tagalone is just a container for the input fields that are used to gather data from users. It just indicates where the data should go and how it should be packaged. • To actually gather information, you’re going to need items called form controls.

DESIGNING FORMS • USING THE <label> TAG • Whenever you enter text that describes a form field, you should use the <label> tag, and use the for attribute to tie it to the control it labels. • To create a label, begin with the opening label tag and then enter the for attribute. The value for this attribute, when present, must match the id or name attribute for the control it labels. • Next, enter text that will serve as the label and then close the element with the end label tag: • <label for=“controlQB">Who is your favorite NFL Quarterback?</label> • <input type="text" name="favqb" id="controlQB">

DESIGNING FORMS • USING THE <label> TAG • The <label> tag doesn’t cause any visible changes to the page, but you can style it using CSS. • One common styling approach people use is to apply a special style to the labels of required fields. • For example, you might declare a style rule like this: label.required { font-weight: bold } • You can then set the class for the labels for all the required fields in your form to “required,” and the labels for those fields will appear in boldface. <label class=“required” for =“Last”>Expiration Date</label> <input type="text" name=“last_name" id=“Last" />

DESIGNING FORMS • CREATING FORM CONTROLS WITH THE <input> TAG • Now it’s time to learn how to create the data entry fields. Form controls are special HTML tags used in a form that enable you to gather information from visitors to your web page. • The information is packaged into a request sent to the URL in the form’s action attribute. • The input element consists of an opening tag with attributes, no other content, and no closing tag: • <input attributes>

DESIGNING FORMS • CREATING FORM CONTROLS WITH THE <input> TAG • <input attributes/> • The key point is to use the correct attributes to create the form control you need. • The most important of these is type, which specifies what kind of form control to display. • For all controls, except Submit and Reset buttons, the name attribute is required. • It associates a name with the data entered in that field when the data is sent to the server.

DESIGNING FORMS • CREATING FORM CONTROLS WITH THE <input> TAG • You can create many different types of controls using the input element. These include: • Text Controls • PasswordControls • Check Box Controls • Radio Buttons • Large Text-Entry Fields • Menuswith select and option • Submit Buttons • Reset Buttons

DESIGNING FORMS • CREATING text CONTROLS WITH THE <input> TAG • Text controls enable you to gather information from a user in small quantities. • This control type creates a single-line text input field in which users can type information, such as their name. • To create a text input field, create an input element and choose text as the value for the type attribute. Make sure to name your control so that the server script can process the value: • <label for=“petname">Enter your pet’s name</label> • <input type="text" name=“petname">

DESIGNING FORMS • CREATING text CONTROLS WITH THE <input> TAG • <label for=“petname">Enter your pet’s name</label> • <input type="text" name=“petname">

DESIGNING FORMS • CREATING text CONTROLS WITH THE <input> TAG • You can modify the appearance of text controls using the size attribute. Entering a number sets the width of the text control in characters: • <input type="text" name="petname" size="15"> • To limit the number of characters a user can enter, add the maxlength attribute to the text control. • This doesn’t affect the appearance of the field; it just prevents the user from entering more characters than specified by this attribute. If users attempt to enter more text, their web browsers will stop accepting input for that particular control: • <input type="text" name="petname" size="15" maxlength="15" />

DESIGNING FORMS • CREATING text CONTROLS WITH THE <input> TAG • To display text in the text control before the user enters any information, use the value attribute. If the user is updating data that already exists, you can specify the current or default value using value, or you can prompt the user with a value: • <input type="text" name="petname" size="15" maxlength="15" value="Enter Pet Name">

DESIGNING FORMS • CREATING text CONTROLS WITH THE <input> TAG • In this case, “Enter Pet Name” appears in the field when the form is rendered in the Web browser. It remains there until the user modifies it. • Caution: When you’re using the value attribute, using a value that’s larger than the size of the text control can confuse the user because the text will appear to be cut off.

DESIGNING FORMS • CREATING password CONTROLS WITH THE <input> TAG • The password and text field types are identical in every way except that the data entered in a password field is masked so that someone looking over the shoulder of the person entering information can’t see the value that was typed into the field. • Tip: You don’t have to limit your use of the password control to just passwords. You can use it for any sensitive material that you feel needs to be hidden when the user enters it into the form.

DESIGNING FORMS • CREATING password CONTROLS WITH THE <input> TAG • To create a password control, create an input element with the type set to password. To limit the size of the password control and the maximum number of characters a user can enter, you can use the size and maxlength attributes just as you would in a text control. Here’s an example: • <label for="userpassword">Enter your password</label> • <input type="password“ name="userpassword" size="8" maxlength="8">

DESIGNING FORMS • CREATING password CONTROLS WITH THE <input> TAG • Caution: When data entered in a password field is sent to the server, it is not encrypted in any way. Therefore, this is not a secure means of transmitting sensitive information. • Although the users can’t read what they are typing, the password control provides no other security measures.

DESIGNING FORMS • CREATING Submit buttons WITH THE <input> TAG • Submit buttons are used to indicate that the user is finished filling out the form. • Setting the type attribute of the form to “submit” places a Submit button on the page with the default label determined by the browser, usually “Submit”. • To change the button text, use the value attribute and enter your own label, as follows: • <input type="submit" value="Send Form Data">

DESIGNING FORMS • CREATING Submit buttons WITH THE <input> TAG • Note: Your forms can contain more than one Submit button. • If you include a name attribute for a Submit button, the value that you assign to the field is sent to the server if the user clicks on that Submit button. • This enables you to take different actions based on which Submit button the user clicks, if you have more than one. • For example, you could create two Submit buttons, both with the name attribute set to "action". The first might have a value of "edit" and the second a value of "delete".In your script, you could test the value associated with that field to determine what the user wanted to do when he submitted the form.

DESIGNING FORMS • CREATING Reset buttons WITH THE <input> TAG • Reset buttons set all the form controls to their default values. These are the values included in the value attributes of each field in the form (or in the case of selectable fields, the values that are preselected). • As with the Submit button, you can change the label of a Reset button to one of your own choosing by using the value attribute, like this: • <input type="reset" value="Clear Form"> • Caution: Reset buttons can be a source of some confusion for users. Unless you have a really good reason to include them on your forms, you should probably just avoid using them. If your form is large and the user clicks the Reset button when he means to click the Submit button, he isn’t going to be pleased with having to go back and re-enter all of his data.

DESIGNING FORMS • CREATING Check Box CONTROLSWITH THE <input> TAG • Check boxes are fields that can be set to two states: on andoff. • To create a check box, set the input tag’s type attribute to “checkbox”. The name attribute is also required, as shown in the following example: • <label>Check to receive SPAM email <input type="checkbox" name="spam"></label>

DESIGNING FORMS • CREATING Check Box CONTROLSWITH THE <input> TAG • To display the check box as checked, include the checked attribute, as follows: • <input type="checkbox" name="year" checked="checked"> • You can group check boxes together and assign them the same control name. This allows multiple values associated with the same name to be chosen:

DESIGNING FORMS • CREATING Check Box CONTROLSWITH THE <input> TAG • When this form is submitted to a script for processing, each check box that’s checked returns a value associated with the name of the check box. If a check box isn’t checked, neither the field name nor value will be returned to the server—it’s as if the field didn’t exist at all. • NOTE: You may have noticed that when we applied labels to these check box elements, we put the input tags inside the label tags. There’s a specific reason for doing so. When you associate a label with a check box (or with a radio button, as you’ll see in the next section), the browser enables you to check the box by clicking the label as well as by clicking the button. That can make things a bit easier on your user.

DESIGNING FORMS • CREATING Check Box CONTROLSWITH THE <input> TAG • In the examples thus far, we have tied labels to fields by putting the field name in the “for” attribute of the label, but that doesn’t work for check boxes because multiple form fields have the same name, and the browser would not figure out which check box the label applies to. • Instead we put the input tag inside the label tag. We could achieve the same result by assigning a unique id to each check box and associating them with the labels that way, but nesting the tags is easier.

DESIGNING FORMS • CREATING Radio buttons WITH THE <input> TAG • Radio buttons, which generally appear in groups, are designed so that when one button in the group is selected, the other buttons in the group are automatically unselected. • They enable you to provide users with a list of options from which only one option can be selected. • To create a radio button, set the type attribute of an input tag to “radio”. • To create a radio button group, set the name attributes of all the fields in the group to the same value.

DESIGNING FORMS • CREATING Radio buttons WITH THE <input> TAG • To create a radio button group with three options, the following code is used:

DESIGNING FORMS • CREATING Radio buttons WITH THE <input> TAG • We’ve used the same <label> technique here that we did in the check box example. Placing the radio buttons inside the labels makes the labels clickable as well as the radio buttons themselves. • We’ve changed the display property for the labels to block so that each radio button appears on a different line. Ordinarily we’d apply that style using a style sheet; we used the style attributes to include the styles within the example.

DESIGNING FORMS • CREATING Radio buttons WITH THE <input> TAG • As with check boxes, if you want a radio button to be selected by default when the form is displayed, use the checkedattribute. • One point of confusion is that even though browsers prevent users from having more than one member of a radio button group selected at once, they don’t prevent you from setting more than one member of a group as checked by default.

DESIGNING FORMS • USING IMAGES AS Submit buttons • Using image as the type of input control enables you to use an image as a Submit button: • <input type="image" src="submit.gif" name="submitformbtn"> * Form controls with the type image support all the attributes of the <img> tag. You can also use the same CSS properties you would use with <img> tags to modify the appearance and spacing of the button.

DESIGNING FORMS • CREATING LARGE TEXT-ENTRY FIELDS WITH textarea • The textareaelement creates a large text entry field where people can enter as much information as they like. • To create a textarea, use the <textarea> tag. To set the size of the field, use the rows and cols attributes. These attributes specify the height and width of the text area in characters. A text area with cols set to 60 and rows set to 10 creates a field that’s 60 lines of text high and 10 characters wide. • <textarea name="question4" rows="10" cols="60">Enter your answer here • </textarea>

DESIGNING FORMS • CREATING LARGE TEXT-ENTRY FIELDS WITH textarea • If you leave out the rows and cols attributes, the browser default will be used. This can vary, so you should make sure to include those attributes to maintain the form’s appearance across browsers. • The closing textareatag is required and any text you place inside the textareatag is displayed inside the field as the default value. • Tip: You can also change the size of a textareawith the height and width CSS properties. You can alter the font in the text area using the CSS font properties, too.

DESIGNING FORMS • CREATING MENUS WITH select AND option • The select element creates a menu that can be configured to enable users to select one or more options from a pull-down menu or a scrollable menu that shows several options at once. • The <select> tag defines how the menu will be displayed and the name of the parameter associated with the field. • The <option> tag is used to add selections to the menu. • The default appearance of select lists is to display a pull-down list that enables the user to select one of the options.

DESIGNING FORMS • CREATING MENUS WITH select AND option • Here’s an example of how a select menu is created: • As you can see in the code, the field name is assigned using the name attribute of the <select> tag. • NOTE: There are some usability issues associated with select lists. When you think about it, select lists that enable users to choose one option are basically the equivalent of radio button groups. It’s up to you to decide which tag to use in a given circumstance. If you need to present the user with a lot of options, select lists are generally the proper choice. A select list with a list of states is a lot more concise and usable than a group of 50 radio buttons. By the same token, if there are four options, radio buttons probably make more sense.

DESIGNING FORMS • FORM SECURITY • It’s important to remember that regardless of what you do with your form controls, what gets sent back to the server when the form is submitted is really up to your user. There’s nothing to stop them from copying the source to your form, creating a similar page on their own, and submitting that to your server. If the form uses the get method, the user can just edit the URL when the form has been submitted. • The point here is that there is no form security. In an upcoming unit, you’ll learn how to validate your forms with JavaScript. Even in that case, you can’t guarantee that users will supply the input that you intend. What this means is that you must always validate the data entered by your users on the server before you use it.

Web Design and Development