Form elements allow users to enter data into a web page. HTML defines form elements like text boxes, radio buttons, checkboxes, and select menus. When a form is submitted, name/value pairs are sent to a server-side script or program for processing. Common server-side technologies for processing forms include CGI, ASPX, PHP, and JSP. Each form element has attributes like type, name, id, and value that define its functionality and how data is sent to the server.

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