1. Today - Forms!
WD Students produce a basic HTML/XHTML document using forms.
Find the group that best matches the part of the project you are going to work on for forms:
You will need a piece of paper and a pencil/pen

2. Chapter 6 – Web Page Forms

3. Forms
HTML controls how the form looks, it does not do the processing of the form…that is done by the server which is usually coded in:
CGI Scripts (Common Gateway Interface)
ASP
C/C++
PHP
Visual Basic
We are just building the FORM, not coding the Server

4. Form Items
Control Elements – different parts of form such as input boxes, buttons, text areas
Field – where the user can enter information
Field Value – the information that is entered
Form Label – label around the field that is what the user sees… “First Name”…”Item Purchased”

5. Form Element Setting up the form <form name = “name” >
<!—all of the code for your form goes here->
</form>

6. Input Boxes
When data is sent to server it is sent as a name/value pair – name of field is paired with data the user entered
<input type = “text” name=“name” />
size = “value” ----changes the width of the box on screen
maxlength = “value” ----maximum length of characters user may enter in a text box
value=“value” ----default value in text box

7. First Name <input type = “text” name=“fname” size=“30” />

8. Shows as * on screen, not secure
Password Input Boxes
Shows as * on screen, not secure
<input type=“password”>
********

9. Selection Lists
<select name=“name”> <option>first list item</option> <option>second list item</option> </select>
If you want things to be in a group you…
<optgroup label=“Name of Group”>
<option>…</option>
</optgroup>

10. <label for=“ordertype”>Order Type</label> <select name=“ordertype”> <option value=“carryout”>Carry Out</option> <option value=“delivery”>Delivery</option> <option value=“dinein”>Dine In</option> <option value=“take”>Take and Bake</option>

11. Items you can add to Selection Lists: optgroup --- allows you to group things in your Selection List size=“value” ---- changes # of items displayed in a box at a time multiple=“multiple” ---- user can select more than 1 value selected = “selected” ----default selection

12. Option Buttons / Radio Buttons
Can only select 1 item from the list
Same names, different ids and values!
<fieldset>
<legend>…..what goes around option buttons</legend>
<input type=“radio” name=“name” value=“uniqueID”> Label
<input type=“radio” name=“name” value=“uniqueID”> Label #2
</fieldset>

13. <label>Was your service friendly</label> <fieldset> <label for=“sYes”>Yes</label> <input type=“radio” name=“service” value=“yes”> <label for=“sNo”>No</label> <input type=“radio” name=“service” value=“no”>
Value sent to server

14. Check Boxes
Can select multiple values, not just 1 like in radio buttons <fieldset class="optionGroup"> <legend>How did you hear about us? (check all that apply)</legend> <input type="checkbox" name="radio" value="yes"/>Radio <input type="checkbox" name="tv" value="yes"/>TV <input type="checkbox" name="friend" value="yes"/>Friend </fieldset> Can add checked=“checked” to have a checked selection

15. Text Area Box
<textarea name=“name” rows = “#” cols=“#”> text to show up as default </textarea>

16. Buttons Types of buttons Submit Button – submits a form to the server
<input type = “submit” value=“Send Registration” />
Reset Button – resets the form to the default values
<input type=“reset” value=“Cancel” />
Command Buttons – if you write script to do something when clicked, it doesn’t do anything on its own
<input type=“button” value=“text to be displayed” />

17. Custom Buttons </button> Adding labels, pictures….
<button name=“name” value=“value” type=“type”>
<img src=“….” />
Text
</button>
reset, submit, or button

18. File Buttons
<input type=“file” name=“file_name” /> …the Browse button in a web page
Browse

19. Form Attributes In Form Elements…. ….. methods:
<form action =“url” method=“type” enctype=“type”>
…..
</form>
methods:
get = default, appends the form data to the end of the URL specified in the action attribute
post = sends form data in a separate data stream, most people use this method

20. Form Attributes
<form action =“url” method=“type” enctype=“type”> …..</form>
Enctype options:
application/x-www-form-urlencoded
the default format…data is transferred as a long text string and spaces and non-text characters are encoded
multipart/form-data – used when sending files to a server, spaces and non-text characters are preserved
text/plain – data is transferred as plain text with no encoding of spaces or non-text characters

21. Mailto Action
If you want to send the information through an and not to a server use:
<form action=“mailto: _address” method=“post” enctype=“text/plain”>
</form>

22. Tab Order and Access Keys
Tab Order – when you press tab, what order do you go in…
<input name=“fname” tabindex=“2” />
if negative or 0 omitted from tab order
Access Key – used with Alt to get to boxes quickly
<inut name=“lname” accesskey=“l” />