1. Forms
Tutorial 6 – Part A
1

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
2

3. Server technologies that work with HTML forms
- CGI / PERL
- ASPX
- PHP
- JSP
3

4. 4

5. The form tag
<form name=“my_form” id=“my_form”>
form elements here
– HTML allowed here also
</form>
5

6. The form tag
<form name=“xyz” id=“xyz”
action=“script “
method= “post or get“
enctype=“ “
target=“ “>
</form>
6

7. input tag
<input type=“type”
identifies the element
name=“name” to the server
id=“id” used for CSS /JavaScript
value=“user entry” />
7

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”
8

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

10. Text box
<input type=”text"
name=“last_name"
id=“last_name” >
value – what the user enters
10

11. Text box Attributes
<input type=”text"
name=“last_name "
id=“last_name "
size="number of characters “
maxlength=" maximum_characters “ >
11

12. label tag
• Associates a description with a form element
• Used for accessibility and JavaScript
<label for=“id”>
some text
</label>
12

13. label tag
13

14. radio buttons / option buttons
<input type=”radio"
name=“name"
id=“id"
value= “value“ >
14

15. radio buttons
<input type=”radio"
name=“name"
id=“id" Must code in a value
The value
value= “value“ > identifies
the choice
15

16. radio buttons
 Occur in groups
 Must have the same name
 Must have different values
 Mutually exclusive
16

17. Checked by Default
<input type=”radio"
checked = “checked” />
<input type=”radio"
checked >
17

18. check box
<input type=”checkbox"
name=“name"
id=“id" Must code in a value
The value
value= „value“ >
identifies
the choice
18

19. check boxes
 Occur in groups
 Can have the same name
 Must have different values
 Can check all choices
19

20. check box group – same name
<input type=”checkbox"
name=“os”
id=“os1”
value= “WinXP“ >
<input type=”checkbox"
name=“os”
id=“os2”
value= “Windows2000“ >
20

21. check box group – different name
<input type=”checkbox"
name=“os1”
id=“os1”
value= “WinXP“ >
<input type=”checkbox"
name=“os2”
id=“os2”
value= “Windows2000“ >
21

22. Force a check
<input type=”checkbox"
checked = “checked” />
<input type=”checkbox"
checked >
22

23. missing value attribute
<input type=”checkbox"
name=“xyz”
id=“xyz” />
If checked – will return “on” as the “value”
23

24. select / drop down list
 Has one name attribute
 Must have different values
 “value” attribute is optional
 Can check multiple choices
24

25. A Selection List
<select name=“job“ id=“job”> Text will be “value”
<option>Please select one</option>
<option>Programmer </option>
<option>Database Manager </option>
</select>
25

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>
26

27. A Multiple Selection List
<select name=“job“ id=“job” multiple=“multiple”>
<option>CEO</option>
All options
<option>Director</option> are shown
<option>Supervisor</option>
</select>
27

28. Multiple Selection List
with set options visible
<select name=“job“ id=“job” multiple
size=“3”>
<option>CEO</option>
3 options
are shown
<option>Director</option>
<option>Supervisor</option>
</select>
28

29. selected by default
Automatically
<select name=“job“ id=“job”> selected
<option value="none"> Please select one</option>
</select>
29

30. force a choice
<option value ="pgmr” selected=“selected”>
Programmer
</option>
<option value ="pgmr” selected>
Programmer
</option>
30

31. Option Groups <optgroup>
31

32. Textarea element
 Multi-line text box
 Uses fixed width font
 Sized using rows and columns
32

33. Textarea <textarea>
<textarea rows="4" cols="50"
name="" id="">
</textarea>
33

34. fieldset and legend elements
 Logically groups elements
 Draws a box
 The <legend> tag defines a caption
for the fieldset element
34

35. <fieldset>
<legend> </legend>
form elements
</fieldset>
35

36. tabindex / accesskey attributes
 Assigns a tabbing order
 Assigns a keyboard shortcut
36

37. tabindex / accesskey attributes
<label for=“name">Name (Alt-n):</label>
<input type="text“
name=“name“
id="name“
tabindex="1"
accesskey="n">
37

38. readonly / disabled attributes
<input type=” ”
readonly=”readonly” />
<input type=” ”
disabled>
38

39. Other input elements
<input type=”password" >
<input type=”hidden" >
<input type=”image" >
<input type=”file" >
<input type=”submit" >
<input type=”reset" >
39

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

41. type=“file”
41

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

43. Three Types of Buttons
• Command button
– used with JavaScript
• Submit button
• Reset button
43

44. Submit Button
<input type=”submit"
name=“"
Not really needed
id=““
value= „what_it_says” >
Calls the action of the form
44

45. Reset
Reset Button
<input type=”reset"
name=“"
Not really needed
id=““
value= „what_it_says“ >
Clears all the values in the form
45

46. Click Me
Command Button
<input type=”button"
name=“"
id=““
value= „what_it_says“ >
Used with JavaScript
46