Post on 14-Jan-2015
description
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