Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition

Web Forms Copyright © Texas Education Agency, All rights reserved.2

What do Web Forms Do? Copyright © Texas Education Agency, All rights reserved.3 HTML supports tags that allow you to create forms; it does not have the ability to process the information collected from the form. When you create a form, the values inside the form are sent to a script. The script then uses the values it has been given to perform the action it was programmed to do.

The Form Block The form should be enclosed with an opening and closing form tag. The form block will group the data together to be sent to the script for processing. Copyright © Texas Education Agency, All rights reserved.4

The form tag attributes The form tag contains two required attributes. action – specifies where the data in the form should be sent for processing This value is typically a URL or a script file. method – specifies how the data is to be sent to the script post – The data is sent through a virtual network pipe to the script; generally more secure. get – The data is sent through the url and is visible; the data can be cached by the browser and less secure. Copyright © Texas Education Agency, All rights reserved.5

The form tag attributes Copyright © Texas Education Agency, All rights reserved.6 The data collected from this form will be sent by post to the address in the action.

Collecting Data Most data is collected using the input tag. There are other tags as well that can collect data. The input tag will create a form field. The input tag should include the name attribute so the script will know what the data represents. The input tags in the form must be able to match up with the script. Copyright © Texas Education Agency, All rights reserved.7

The input tag The input tag requires at least two attributes: name – identifies the data collected in the field type – specifies which type of field to create Copyright © Texas Education Agency, All rights reserved.8

Hands-on Practice Open a new document in your text editor and enter the following code Copyright © Texas Education Agency, All rights reserved.9 Forms Sample Code 1

Hands-on Practice Add the additional text shown in red to your document Copyright © Texas Education Agency, All rights reserved.10 <form method=“post” action=“ Sample Code 2

The text field Text fields are created using the input tag and setting the type to text. The text field is used to input single lines of information. Copyright © Texas Education Agency, All rights reserved.11 <form method=“post” action=“ Username: Sample Code 3

The text field Save your document as forms.htm and preview it in your web browser. You should see the following form. Copyright © Texas Education Agency, All rights reserved.12

Password Field Password fields are created using the INPUT tag and setting the TYPE to password. The password field is used to input single lines of information that need to be masked. Data is NOT encrypted. Copyright © Texas Education Agency, All rights reserved.13 Username: Password: Sample Code 4

Password Field Copyright © Texas Education Agency, All rights reserved.14 Resave the document and refresh it in your browser. You should get the following output.

Hidden Fields Hidden fields are often used in forms to send additional information that is not entered by the visitor to the processing script. Hidden fields do not show up on the form… they are hidden, but the information is still sent. Copyright © Texas Education Agency, All rights reserved.15 <form method=post action=“ Username: Sample Code 5

Submit Button Submit buttons are created using the INPUT tag and setting the TYPE to submit. The Submit button is used to send data from a form to a processing script. When the Submit button is clicked, it will automatically send all data entered into the form to the processing script. Copyright © Texas Education Agency, All rights reserved.16

Reset Button Copyright © Texas Education Agency, All rights reserved.17 The Reset button is used to clear information out of a form. Reset buttons are created using the INPUT tag and by setting the TYPE to reset.

Submit Button Copyright © Texas Education Agency, All rights reserved.18 Password: Add the additional text shown in red to your document. Sample Code 6

Checking the Form Copyright © Texas Education Agency, All rights reserved.19 Resave your document and refresh it in the browser. Enter the following information into your form. Username: student Password: web Click login. If you did everything correctly, you should get a confirmation screen.

Radio Buttons Radio buttons are created using the INPUT tag and setting the TYPE to radio. Radio buttons should be grouped by assigning each element the same name, however, each radio button should have a different value. Copyright © Texas Education Agency, All rights reserved.20

Radio Buttons Copyright © Texas Education Agency, All rights reserved Sample Code 7 Add the additional text shown in red to your document.

Radio Buttons Resave your document and preview it in your browser. Copyright © Texas Education Agency, All rights reserved.22 Click on each radio button; you should only be allowed to select one at a time.

Checkboxes Radio buttons are created using the INPUT tag and setting the TYPE to checkbox. Checkboxes allow you to select whether or not an option is true or false. Copyright © Texas Education Agency, All rights reserved.23

Checkboxes Add the following code below the radio buttons on your form. Copyright © Texas Education Agency, All rights reserved Webmastering BCIS Multimedia Sample Code 8

Copyright © Texas Education Agency, All rights reserved.25 Resave your document. You should see the checkboxes below the radio buttons. You should be able to select multiple checkboxes.

Textarea The textarea is created by using the tag. The Reset button is used to clear information out of a form. The textarea may be used when large amounts of text should be entered by the visitor. The attributes COLS and ROWS may also be added to the TEXTAREA tag to specify the size. Copyright © Texas Education Agency, All rights reserved.26

Copyright © Texas Education Agency, All rights reserved.27 Web Design The following code will create a text area. Add the following to your forms.htm document below the checkboxes. The textarea is used for entering large blocks of text, such as an message. Sample Code 9

Copyright © Texas Education Agency, All rights reserved.28 Resave your document. You should see the textarea with the default text written in the field.

Select menu The select menu, can be created to allow visitors to select an item from a list. The and tags should surround the entire list. Each option (item in the list) should be proceeded by the tag. Only the selected item will be displayed. Copyright © Texas Education Agency, All rights reserved.29

Copyright © Texas Education Agency, All rights reserved.30 Freshman Sophomore Junior Senior Add the following code to forms.htm. The code below will create a dropdown list, or select box. Sample Code 10

Copyright © Texas Education Agency, All rights reserved.31 Resave your document. The select box should show Junior as the selected option.