1. HTML Forms

2. Methods
HTML Forms
POST
GET
Javascript

3. Destinations Server CGI (server program) Server Page (PHP, JSP)
XML over http (”AJAX”) (javascript)
Client Side
User input to javascript
Send messages to javascript on other page

4. HTML <form> Tag
Designates a form within an HTML and XHTML documents and contains all text and tags that make up the form
Multiple forms can be included in a document
Forms cannot be nested (put inside each other)

7. <form> attributes
Value
action
URL to where the form data will be submitted. if blank, it sends to the current page
method
How data is sent: GET or POST
enctype
Encoding Type; the format of the data. Default= application/x-www-form-urlencoded
target
Anchor target (windows / frames) same as <a>’s target
name
Name of form (can be used to refer to form in javascript.) id
Optional: for CSS or javascript
URL/URI could be
javascript:your_function(…)
1 other enctype which is multipart which you can look up if you need it-- it allows FILE uploads.

8. Form Elements
<input> Used to create input fields: text, password, simple button, checkbox, radio button, file upload
<select> Displays choices in a drop-down menu or scrolling list known as a selection list
<textarea> Used to create a text box in which users can enter multiple lines of text
<button> Creates a button with content (e.g., an image)

9. <input>

10. <Input> Fields
<input> tag is used to create input fields that use different types of interface elements to gather information
Attributes characterize the input field
Old tried and true method
Breaks normal convention of HTML tags doing a single thing

11. <input> attributes
Value
align
discouraged - alignment like <img>: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top
checked
Check box or radio button defaults to selected
maxlength
Maximum letters that can be entered
name
This name is set with the value when you submit
size
# of characters can be visibly seen on the screen
src
URL for an image (in special cases)
type
TYPE of input: text, password, radio, checkbox, reset, submit, button, image, hidden
value
default value

12. Accessibility accesskey=”key” form elements(tags) all support it
tabindex=”###”
tab moves thru fields and this determines the order
starts at 1
All form tags support these

13. Input Fields Example

14. <form action=”mailto:jbussjae@wind. winona. msus. edu
<form enctype="text/plain" name=“exampleForm”>
Name<br /> <input type=“text” name=“name” value=“The White House” size=50><br /> Address<br /> <input type=“text” name=“address” value=“1600 Pennsylvania Ave.” size=50><br /> City, State, Zip<br /> <input type=“text” name=“city” value=“Washington” size=38> <input type=“text” name=“state” value=“DC” size=2 maxlength=2> <input type=“text” name=“zip” value=“20500” size=5 maxlength=5>
</form>

15. Password Boxes An <input> tag with type = password
Each character the user types in the text field shows up as an asterisk (*) to hide it from onlookers
Can include other attributes
NAME, VALUE, MAXLENGTH and SIZE

16. Check Boxes An <input> tag with type = checkbox
Used to create a box that can be set to yes (checked) or no (unchecked)
Can specify default state using CHECKED attribute; unchecked box information not sent
Only name=value pair from checked boxes is submitted with form data
Can be grouped (although not mutually exclusively)

17. example
<p> <input type="checkbox" name="checkboxOne" value="1"> one</p><p> <input type="checkbox" name="checkboxTwo" value="2"> two</p><p> <input type="checkbox" name="checkboxThree" value="3" checked="checked"> three</p>

18. Radio Buttons An <input> tag with type = radio
Used to create a group of buttons from which only one button can be selected
Mutually exclusive
Can specify a default value using the CHECKED attribute
Only one name=value pair is submitted with form data
All buttons in group have same name attribute

19. example
<p> <input type="radio" name="radiogroup" value="1"> one</p><p> <input type="radio" name="radiogroup" value="2"> two</p><p> <input type="radio" name="radiogroup" value="3" checked> three</p>

20. Reset Buttons An <input> tag with type = reset
Clears all form entries and resets each form element to its initial value specified by the VALUE attribute
Default label (Reset) appears if the VALUE attribute is not included

21. Submit Buttons An <input> tag with type = submit
Submits the form to a CGI script on a server
OR it can have the browser send the form data to an address
Default label (Submit Query) appears if the VALUE attribute is not included

22. Image Submit Buttons An <input> tag with type = image
Displays a graphical image and submits the form to a CGI script on a server
Use SRC attribute to specify image to be displayed on the button
<input type="image" name="test" alt="Submit" src="test.gif">

23. Command Buttons An <input> tag with type = button
Use an onclick event handler to execute JavaScript code that performs some type of function (e.g., a calculation)
Default value set with the VALUE attribute is transmitted along with the form data when submitted
The old way to do a button; works everywhere.
Buttons are text and drawn by the browser
Note- older validators complain if you do not have a form tag around these- but newer HTML often ignores this and it is ok to do so (since there is no form to send because each item is handled by javascript)

24. File Upload There is only 1 way to submit binary data & files
type=”file”
accept=”text/html, text/plain”
MIME types (standard for file types)
browsers largely ignore this completely
requires form enctype be changed to multipart
LOOK IT up if you need this; you will have to do somethings different on the server.
Note: online progress bars are faked with server and javascript/AJAX. fancy sites use Flash instead.

25. <textarea>

26. Multiline Text Fields
<textarea> tag is used to create a field in which users can enter multiple lines of information
specify the size:
cols=”80” characters
rows=”3” lines of text
AKA: Multiline text fields or Text Areas

27. <select>

28. Selection List
Creates a selection list that presents users with fixed lists of values from which to choose
Can appear as:
List of choices
Drop-down menu
Can also have a scroll bar

29. <select> Attributes
Value
multiple
Allows multiple items to be selected
if used: multiple=”multiple”
name
Name for the data when submitted
size
# of lines to display
1 is a menu
>=2 is a drop down list

30. Example
<select name="selectName" size="1"><option value="one">first</option><option value="two">second</option><option value="three">third</option></select>
<p></p>
<select name="selectName" size="4" multiple=”multiple”> <option value="one">first</option> <option value="two">second</option> <option value="three">third</option></select>

31. <option> Attributes
Value
label
Alternate text to display (as opposed to what is in-between its tags)
selected
Default option selected
value
The value that gets submitted (yes, what you choose in the menu and the value that is sent are totally different!)

32. <optiongroup> Allows you to group <options>
label = “name of group”
no name just ends up blank, like a menu divider

33. <button>

34. <button> tag <button type=“submit”>
Identical in function to <input type = “submit”
Allows greater flexibility with button text:
html (text + images) is allowed in the button label
the “NEW” way to do a button
really old browsers will not recognize it

35. Example
<button name="buttonName" type="button" value=”whocares”>
Button <img src="something.png" alt="image"> Text
</button>
<!-- button type can also be “reset” or “submit” -->

36. Label

37. <label> for= attribute ID of the form tag the label is for
<label for=“someID”> text other html tags …</label>
<input id=”someID” … />
ALTERNATE (popular method)
<label>text <input ... /></label>
2 ways- the easy popular way only works if you can place the input inside the label tag. often this can not be done-- for example, you have a nicely formatted form with aligned fields and labels in a table-- to jump between columns in the table you use FOR and ID because it is impossible in that situation to have a <label> reach between columns in the table.

38. Fieldset

39. <fieldset> Places a box around the group form elements
No attributes! just place form elements inside it
CSS attributes still can be used

40. <legend> Label the fieldset using <legend>
no attributes needed
must be contained INSIDE the <fieldset> your labeling
Recommend it that its the 1st element inside the <fieldset>

41. HTML 5 - future input supports more types
date-time, date, month, week, time
number
url
regular expression tag attribute!!!

42. XFORM - past? XML format that does forms - not used on the web
Complex and split into two parts
Data Model
Form Model
Form fields are abstracted away from literal GUI widgets of today, given the attributes the browser decides what widget fits best
This is one of the main reasons XHTML 2 died before getting off the ground-- it made you use this to do any forms on a webpage! the format is more complex than HTML itself!