Lesson 8 Week 8 Designing Forms Biblical Relationship The Creation of Heaven & Earth Gen. 1:31
Introduction Today’s lesson is about creating HTML forms to collect information from people visiting your Web site. 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.
Objectives At the end of this lesson, you should be able to carry out the followings: • Discovering how HTML forms interact with server-side scripts to provide interactivity • Creating simple forms • Learning all the types of form controls you can use to create radio buttons, check boxes, and more • Using more advanced form controls to enhance your designs • Planning forms so that your data matches any server-side scripts you use
Creating a simple form The following tag is a form created to accept names and password: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”> <html> <head> <title>Page Title</title> </head> <body> </body> </html> <form action=“http://www.example.com/cgi-bin/entrance.cgi” method=“post”> Username: <input type=“text” name=”Username” /> <br> Password: <input type=“password” name=“password” /> <input type=”submit” value=”Log In” /> </form>
Explanations The action attribute, which is required, specifies the URL to the server-side script (including the filename) that will process the form when it’s submitted. It’s very important that the script with the name you’ve entered is present on your Web server at the location the URL specifies. In this example, the full URL for the script was used, but you can just as easily use a relative URL if it makes more sense.
Explanations Cont’d The two most commonly used attributes of the <form> tag are action and method. Both of these attributes are optional. The following example shows how the <form> tag is typically used: <form action=”someaction” method=”get or post”>, this two possible values: post or get defines how form data is submitted to your Web server. The post method includes the form data in the body of the form and sends it to the Web server. The get method appends the data to the URL specified in the action attribute and most often is used in searches.
Explanations Cont’d If you leave out the action attribute, the form is submitted to the current URL. In other words, if the form appears on the page http://www.example.com/form.html and you leave off the action attribute, the form will be submitted to that URL by default. Although most forms send their data to scripts, you also can make the action link to another Web page or a mailto link. The latter is formed as follows: <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.
Explanations Cont’d Notice that both form controls are created using the input element. The type attribute defines which type of control will be created. In this case, you have a text control and a password control. Each type of control has a distinct appearance, accepts a different type of user input, and is suitable for different purposes. Each control is also assigned a name that distinguishes it and its data from the other form controls. Finally, a submit button was added so that the user can send the information she entered into the form to the database.
Putting your form in a table format <form action="http://www.example.com/cgi-bin/entrance.cgi" method="post"> <table border="1"> <tr> <td align="right">Username:</td> <td><input type="text" name="username" /></td> </tr> <td align="right">Password:</td> <td><input type="password" name="password" /></td> </tr> <td align="center"> <input type="submit" value="Log In" style="margin-top: 20px”/> </td> <td><br /></td> </table> </form>
Creating Text Controls 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 or a search term. To create a text input field, create an input element and choose text as the value for the type attribute. <p>Enter your pet’s name: <input type=”text” name=”petname” /></p> You can modify the appearance of text controls by using the size attribute. Entering a number which enlarges the width of the text control in characters: <input type=”text” name=”petname” size=”15” />
Maximum length of characters To limit the number of characters a user can enter, add the maxlength attribute to the text control. Using default value <input type=”text” name=”petname” size=”15” maxlength=”15” value=”Enter Pet Name” /> 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. Creating Password Controls The password and text field types are identical in every way except that the data entered in a password field is Indicated password. <input type=”password” name=”userpassword” size=”8” maxlength=”8” /></p>
Creating Submit & Reset Buttons Creating Submit Buttons Submit buttons are used to indicate that the user is finished filling out the form. <input type=”submit” value=”Send Form Data” /> Creating Reset Buttons Reset buttons set all the form controls to their default values. <input type=”reset” value=”Clear Form” />
<input type=”checkbox” name=”year” checked=”checked” /> Creating Check Box Controls Check boxes are fields that can be set to two states: on and off . 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: <p>Check to receive SPAM email <input type=”checkbox” name=”spam” /></p> To display the check box as checked, include the checked attribute, as follows: <input type=”checkbox” name=”year” checked=”checked” /> Practical work <p>Check all symptoms that you are experiencing:<br /> <input type=”checkbox” name=”symptoms” value=”nausea” /> Nausea <br/><input type=”checkbox” name=”symptoms” value=”lightheadedness” /> Light-headedness<br /> <input type=”checkbox” name=”symptoms” value=”fever” /> Fever<br /> <input type=”checkbox” name=”symptoms” value=”headache” /> Headache </p>
Creating Radio Buttons 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 Practical work <p>Select a color:<br /> <input type=”radio” name=”color” value=”red” /> Red<br /> <input type=”radio” name=”color” value=”blue” /> Blue<br /> <input type=”radio” name=”color” value=”green” /> Green<br /> </p>
Hidden Form Fields Hidden form fields are used when you want to embed data in a page that shouldn’t be seen or modified by the user. <input type=”hidden” name=”id” value=”1402” /> Hidden form fields are generally used when data identifying the user needs to be included in a form. For example, let’s say you’ve created a form that allows a user to edit the name and address associated with her bank account. Because the user can change her name and address, the data she submits can’t be used to look up their account after she submits the form.
The File Upload Control The file control enables a user to upload a file when he submits the form. As you can see in the following code, the type for the input element is set to file: <p>Please select a file for upload: <input type=”file” name=”fileupload” /></p> If you want to use a file upload field on your form, you have to do a lot of behind-the- scenes work to get everything working. For one thing, the program specified in the action attribute of your form must be able to accept the file being uploaded. Second, you have to use the post method for the form. Third, you must set the enctype attribute of the <form> tag to multipart/form-data. <form action=”/cgi-bin/upload.cgi” enctype=”multipart/form-data” method=”post”> <input type=”file” name=”new_file” /> <input type=”submit” /> </form> After you’ve created a form for uploading a file, you need a program that can process the file submission.
Create Large Text-Entry Fields with textarea The textarea element 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 5 and rows set to 40 creates a field that’s 5 lines of text high and 40 characters wide. <p>Please comment on our customer service.<br /> <textarea name=”question4” rows=”10” cols=”60”> Enter your answer here </textarea> </p>
Creating disabled and read only Controls Sometimes you might want to display a form control without enabling your visitors to use the control or enter new information. To disable a control, add the disabled attribute to the form control: <p>What is the meaning of life? <textarea name=”question42” disabled=”disabled”> Enter your answer here. </textarea> </p> When displayed in a Web browser, the control will be dimmed (a light shade of gray) to indicate that it’s unavailable. To create a read-only control, use the readonly attribute: <p>This month: <input type=”text” name=”month” value=”September” readonly=”readonly” /></p>
Quiz Develop a static personal webpage that contains bio-data, Course of study and courses. Include your likes, dislikes, hubbies, places visited/dream to visit, dream about life, best music, movies, best dishes, best novels, role model, mentors among others. Use the necessary tags taught under form as much as possible.