copyright © texas education agency, 2013. all rights reserved.1 web technologies website forms /...

Copyright © Texas Education Agency, 2013. All rights reserved. 1

Web Technologies

Website Forms / Data Acquisition

Web Forms


What do Web Forms Do?


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.


<form>

</form>

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.


The form tag attributes

<form method=“post” action=“http://www.myscript.com/process.php”>

</form>


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.


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


Hands-on Practice Open a new document in your text editor and

enter the following code


<html><head> <title>Forms</title></head><body>

</body></html>

Sample Code 1

Hands-on Practice

Add the additional text shown in red to your document


<body><form method=“post”

action=“http://www.ieclass.com/jslabs/lab2-1a.php”>

</form></body>

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.


<body> <form method=“post”

action=“http://www.ieclass.com/jslabs/lab2-1a.php”>

Username:<input type=“text” size=“30” name=“user”></form></body>

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.


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.


Username:<input type=“text” size=“30” name=“user”><br />Password:<input type=“password” size=“10” name=“password”>

Sample Code 4

Password Field


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.


<body> <form method=post

action=“http://www.ieclass.com/jsforms/lab2-1a.php”>

<input type=“hidden” name=“labcode” value=“3287”>Username:<input type=“text” size=“30” name=“user”>

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.


Reset Button


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


<br />Password:<input type=“password” size=“10” name=“password”>

<br /><input type=“submit” value=“login”><input type=“reset”></form>

Add the additional text shown in red to your document.

Sample Code 6

Checking the Form


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.


Radio Buttons


<input type=“reset”><br><input type="radio" name="Grade" value="10" />10<br /><input type="radio" name="Grade" value="11" />11<br /><input type="radio" name="Grade" value="12" />12 </form>

Sample Code 7

Add the additional text shown in red to your document.

Radio Buttons

Resave your document and preview it in your browser.


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.


Checkboxes

Add the following code below the radio buttons on your form.


<input type="radio" name="Grade" value="12" />12<br />

<input type="checkbox" name="Web" />Webmastering<br />

<input type="checkbox" name="BCIS" />BCIS

<br /><input type="checkbox" name="Multimedia" />Multimedia

Sample Code 8


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 <textarea> 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.



<br />

<textarea cols="30" rows="5“ name=“message”>

Web Design

</textarea>

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 email message.

Sample Code 9


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 <select> and </select> tags should surround the entire list.

Each option (item in the list) should be proceeded by the <option> tag.

Only the selected item will be displayed.



<br>

<select name="grade" size=“1”><option value="freshman">Freshman</option><option value="sophomore">Sophomore</option><option value="junior" selected>Junior</option><option value="senior">Senior</option></select>

Add the following code to forms.htm.

The code below will create a dropdown list, or select box.

Sample Code 10


Resave your document. The select box should show Junior as the selected option.

copyright © texas education agency, 2013. all rights reserved.1 web technologies website forms /...

Documents

form field

following form

form block

input tags

text field text fields

field type

type of field

password field password