1

Forms

Tutorial 6 – Part A

2

Forms

• HTML language creates the form elements

• Data entered in the form element can only

be retrieved or processed through a

program or script running on a Web Server

3

Server technologies that work with HTML forms

- CGI / PERL

- ASPX

- PHP

- JSP

4

5

The form tag

<form name=“my_form” id=“my_form”>

form elements here

– HTML allowed here also

</form>

6

The form tag

<form name=“xyz” id=“xyz”

action=“script “

method= “post or get“

enctype=“ “

target=“ “>

</form>

7

input tag

<input type=“type”

name=“name”

id=“id”

value=“user entry” />

identifies the element to the server

used for CSS /JavaScript

8

input tag

<input type=“type”

name=“name”

id=“id”

value=“some_value” >

Every element has a “name” to identify it

The user enters a “value”

9

name / value pairs are sent to the server when the form is submitted

10

Text box

<input type=”text"

name=“last_name" id=“last_name” >

value – what the user enters

11

Text box Attributes

<input type=”text" name=“last_name " id=“last_name "

size="number of characters “ maxlength=" maximum_characters “ >

12

label tag

<label for=“id”> some text</label>

• Associates a description with a form element

• Used for accessibility and JavaScript

13

label tag

14

radio buttons / option buttons

<input type=”radio"

name=“name" id=“id"

value= “value“ >

15

radio buttons

<input type=”radio"

name=“name" id=“id"

value= “value“ >

Must code in a value

The value identifies the choice

16

radio buttons

Occur in groups

Must have the same name

Must have different values

Mutually exclusive

17

Checked by Default

<input type=”radio"

checked = “checked” />

<input type=”radio"

checked >

18

check box

<input type=”checkbox"

name=“name" id=“id"

value= ‘value“ >

Must code in a value

The value identifies the choice

19

check boxes

Occur in groups

Can have the same name

Must have different values

Can check all choices

20

check box group – same name

<input type=”checkbox" name=“os” id=“os1” value= “WinXP“ >

<input type=”checkbox" name=“os” id=“os2” value= “Windows2000“ >

21

check box group – different name

<input type=”checkbox" name=“os1” id=“os1” value= “WinXP“ >

<input type=”checkbox" name=“os2” id=“os2” value= “Windows2000“ >

22

Force a check

<input type=”checkbox" checked = “checked” />

<input type=”checkbox" checked >

23

missing value attribute

<input type=”checkbox"

name=“xyz”

id=“xyz” />

If checked – will return “on” as the “value”

24

select / drop down list

Has one name attribute

Must have different values

“value” attribute is optional

Can check multiple choices

25

A Selection List

<select name=“job“ id=“job”>

<option>Please select one</option>

<option>Programmer </option>

<option>Database Manager </option>

</select>

Text will be “value”

26

A Selection List

<select name=“job“ id=“job”>

<option value="none"> Please select one</option>

<option value ="pgmr">Programmer </option>

<option value =“dbm">Database Manager </option>

</select>

27

A Multiple Selection List

<select name=“job“ id=“job” multiple=“multiple”>

<option>CEO</option>

<option>Director</option>

<option>Supervisor</option>

</select>

All options are shown

28

Multiple Selection List with set options visible

<select name=“job“ id=“job” multiple size=“3”>

<option>CEO</option>

<option>Director</option>

<option>Supervisor</option>

</select>

3 options are shown

29

selected by default

<select name=“job“ id=“job”>

<option value="none"> Please select one</option>

</select>

Automaticallyselected

30

force a choice

<option value ="pgmr” selected=“selected”> Programmer </option>

<option value ="pgmr” selected> Programmer </option>

31

Option Groups <optgroup>

32

Textarea element

Multi-line text box

Uses fixed width font

Sized using rows and columns

33

Textarea <textarea>

<textarea rows="4" cols="50" name="" id="">

</textarea>

34

fieldset and legend elements

Logically groups elements

Draws a box

The <legend> tag defines a caption

for the fieldset element

35

<fieldset> <legend> </legend>

form elements</fieldset>

36

tabindex / accesskey attributes

Assigns a tabbing order

Assigns a keyboard shortcut

37

tabindex / accesskey attributes<label for=“name">Name (Alt-n):</label>

<input type="text“ name=“name“ id="name“ tabindex="1" accesskey="n">

38

readonly / disabled attributes

<input type=” ” readonly=”readonly” />

<input type=” ” disabled>

39

Other input elements

<input type=”password" ><input type=”hidden" >

<input type=”image" ><input type=”file" >

<input type=”submit" ><input type=”reset" >

40

type=“hidden” hidden fields – used to send information to server

41

type=“file”

42

type=“image”

<input type=“image” src =“photo.jpg” >

43

Three Types of Buttons

• Command button

– used with JavaScript

• Submit button

• Reset button

44

Submit Button

<input type=”submit" name=“" id=““ value= ‘what_it_says” >

Calls the action of the form

Not really needed

45

Reset Button

<input type=”reset" name=“" id=““ value= ‘what_it_says“ >

Clears all the values in the form

Not really needed

Reset

46

Command Button

<input type=”button" name=“" id=““ value= ‘what_it_says“ >

Used with JavaScript

Click Me