1. How to Write Web Forms
By Mimi Opkins

2. What We’ll Cover Today
HTML Forms
Fields
Validation
Processing

3. Forms Provides Information to Servers
Uses a variety of different input fields to gather data
JavaScript can be used to validate input
Server program typically returns an HTML page back to the browser

4. Form Components
Form Header
Named Input Fields
Action Buttons

5. Form Tag Makes up the Form Header component
All form elements are contained within FORM tags
<FORM>
</FORM>

6. Form Tag (con’t.)
ACTION attributes specifies the URL of the processing script (program)
<FORM ACTION=myprog.php>

7. Form Tag (con’t.)
METHOD attribute tells the browser how to send the form data to the server
GET
POST
example: <FORM METHOD=POST ACTION=myprog.php>

8. Form Fields Example

9. Form Fields Example

10. Form Fields Example

11. Form Fields Example

12. Named Input Fields Comprise the bulk of a form
Appear as standard window controls such as buttons and boxes
Can assign each field a unique name that is later used in the script

13. Types of Input Fields Text Box Password Box Checkbox Radio Button
Hidden Field
Text Areas (Windows)
Images
File
Menu

14. Input Tag Handles the majority of named input fields
Can place most of the fields you need on your form
Different attributes depending on the value of the TYPE attribute
<INPUT TYPE=field type>

15. Text and Password Fields
Simple Data Entry Fields
Password field appears as ****
Requires the NAME attribute
<INPUT TYPE=TEXT NAME=“vendor”>
<INPUT TYPE=PASSWORD NAME=“secret”>

16. Text and Password Fields Optional Attributes
SIZE
how many characters wide the field will be
MAXLENGTH
maximum number of characters that can be entered in the field
VALUE
place default text in the field

17. Checkboxes Used to provide users with several choices
<INPUT TYPE=“CHECKBOX” NAME=“cream” VALUE=“CREAM”>
<INPUT TYPE=“CHECKBOX” NAME=“sweetner” VALUE=“SUGAR”>
CHECKED attribute preselects a checkbox

18. Radio Buttons Only one option can be selected
<INPUT TYPE=“RADIO” NAME=“drink” VALUE=“COFFEE”>
<INPUT TYPE=“RADIO” NAME=“drink” VALUE=“TEA”>
CHECKED attribute preselects a radio button

19. Hidden Fields Used to send information to the server about a form
Not used for data entry
Field contents are not displayed
<INPUT TYPE=“HIDDEN” NAME=“secret code” VALUE=“XYZ”>

20. Textarea Tag Used for multiple-line text entries Use the TEXTAREA tags
Text between the TEXTAREA tags shows up on the input window by default

21. Textarea Optional Attributes
COLS
specifies number of columns
ROWS
specifies number of rows
WRAP
Netscape extension to wrap the text in the window

22. Menus Used to produce pull-down or scrollable option menus
Uses the SELECT and OPTIONS tags
<SELECT NAME=“pets”>
<OPTION>DOG</OPTION>
<OPTION>CAT</OPTION>
</SELECT>

23. Menu Optional Attributes
SIZE attribute in SELECT tag
specifies how many options to be displayed on the screen (default is 1)
MULTIPLE attribute in SELECT tag
users can choose multiple options

24. Menu Optional Attributes (con’t.)
SELECTED attribute in OPTION tag
preselects an option
VALUE attribute in OPTION tag
value sent to server instead of the option displayed on the browser screen

25. Action Buttons SUBMIT users submit the data they entered to the server
<INPUT TYPE=“SUBMIT” VALUE=“Submit Data”>

26. Action Buttons (con’t.)
RESET
clears out any data entered into the forms and sets all the named input fields back to their default values
<INPUT TYPE=“RESET” VALUE=“Clear Data”>

27. Using Images as Submit Buttons
Can create a custom image to be a SUBMIT button
Clicking it instructs the browser to submit the form
Use the TYPE and SRC attributes
<INPUT TYPE=“IMAGE” SRC=myimg.gif>

28. Form Validation Form Validation can be accomplished with
JavaScript on the Client Side
Scripts on the Server Side

29. Form Navigation
By default, the natural tabbing order will match the source order in the markup.
The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page.

30. Tab Order

31. Using Tabindex in a Form

32. What is Tabindex
"the position of the current element in the tabbing order for the current document"
What this means is that when a customer comes to your page, if they hit tab to navigate through the site, the first link they will be taken to is the link listed as tabindex="1".
This is followed by tabindex="2" and tabindex="3"...
Then elements that do not have a tabindex set (or don't support the tabindex attribute) come after that, in the order they appear on the page.

33. What Elements Support Tabindex
a <a href="" tabindex="1"></a>
area <area href="" tabindex="1" type="rect" coords="" />
button <button tabindex="1" name="" value="" id="" />
input <input tabindex="1" name="" value="" id="" />
object <object tabindex="1" name="" value="" id="" />
select <select tabindex="1" name="" value="" id="" ></select>
textarea <textarea tabindex="1" cols="30" rows="4"></textarea>

34. Using Tabindex – It’s Simple
Go to your web page and look at it as if you were a customer.
When a customer comes to the page, what is she likely to want to click on first? Or what do you want her to click on first?
Make that tabindex="1".
Move through the page in that fashion.

35. Passing Form Data When the SUBMIT button is clicked, the browser
Packages the form data into a single string -- encoding
Sends the encoded string to the server using either the GET or the POST method

36. URL Encoding
Browser gathers all the data and strings it together using NAME=VALUE pairs
Pairs are separated by &

37. URL Encoding Example If I entered my name into the following form:
<FORM ACTION=myprog.php METHOD=“POST”>
<INPUT TYPE=“TEXT” NAME=“first”>
<INPUT TYPE=“TEXT” NAME=“last”>
<INPUT TYPE=“SUBMIT”>
</FORM>

38. URL Encoding Example (con’t.)
URL encoded string
first=Mimi&last=Opkins
POST will sent it via Standard Input
GET will append the string to the URL
myprog.php?first=Mimi&last=Opkins

39. More Encoding Blanks are translated to ‘+’
I love HTML becomes I+love+HTML
Special characters become a % followed by their hexadecimal equivalent
! Becomes %21
I love HTML! Becomes I+love+HTML%21

40. HTTP Methods
Method used by the form is stored in the REQUEST_METHOD environment variable
For GET method, the input is stored in QUERY_STRING
For POST method, the input is in STDIN

41. Form Processing Server Executes PHP Program
PHP Program reads in form values
Process Program
Generates HTML page
Returns control to the Web Server
Resulting Page is returned to the browser

42. PHP Behinds the Scenes Unencode the data
%xx becomes a special character
+ becomes a blank
comment=I+love+HTML%21 becomes comment=I love HTML!

43. PHP Behinds the Scenes (con’t.)
Divide the data into NAME=VALUE pairs by splitting at each &
first=Mimi&last=Opkins becomes
first=Mimi last=Opkins
Loads data into predefined variables according to their name
Handles both scalar and array data