HTML FormsHTML Forms

MethodsMethodsn HTML Forms

n POST

n GET

n Javascript

n XFORM - XHTML 2

n XML W3C format for business forms

DestinationsDestinationsn Server

n CGI (server program)

n Server Page (PHP, JSP)

n XML over http (”AJAX”) (javascript)

n Client Side

n User input to javascript

n Send messages to javascript on other page

HTML <form> TagHTML <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)

• Completely replaced in XHTML 2 with XFORM 1.0

<form> attributes<form> attributesAttribute Value

actionURL to where the form data will be submitted. if blank, it sends to the

current page

method How data is sent: GET or POST

enctypeEncoding 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

Form ElementsForm Elementsn <input> Used to create input fields: text,

password, simple button, checkbox, radio button, file upload

n <select> Displays choices in a drop-down menu or scrolling list known as a selection list

n <textarea> Used to create a text box in which users can enter multiple lines of text

n <button> Creates a button with content (e.g., an image)

<input><input>

<Input> Fields <Input> Fields

n <input> tag is used to create input fields that use different types of interface elements to gather information

n Attributes characterize the input field

n Old tried and true method

n Breaks normal convention of HTML tags doing a single thing

<input> attributes<input> attributesAttribute Value

aligndiscouraged - 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)

typeTYPE of input: text, password, radio,

checkbox, reset, submit, button, image, hidden

value default value

AccessibilityAccessibility

n accesskey=”key”

n form elements(tags) all support it

n tabindex=”###”

n tab moves thru fields and this determines the order

n starts at 1

Input Fields Example Input Fields Example

<form action=”mailto:jbussjae@wind.winona.msus.edu?subject=RAHSFORM" 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>

Password BoxesPassword Boxes

n An <input> tag with type = password

n Each character the user types in the text field shows up as an asterisk (*) to hide it from onlookers

n Can include other attributes

n NAME, VALUE, MAXLENGTH and SIZE

Check Boxes Check Boxes n An <input> tag with type = checkbox

n Used to create a box that can be set to yes (checked) or no (unchecked)

n Can specify default state using CHECKED attribute; unchecked box information not sent

n Only name=value pair from checked boxes is submitted with form data

n Can be grouped (although not mutually exclusively)

exampleexample

<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>

Radio ButtonsRadio Buttons

n An <input> tag with type = radio

n Used to create a group of buttons from which only one button can be selected

n Mutually exclusive

n Can specify a default value using the CHECKED attribute

n Only one name=value pair is submitted with form data

n All buttons in group have same name attribute

exampleexample

<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>

Reset ButtonsReset Buttons

n An <input> tag with type = reset

n Clears all form entries and resets each form element to its initial value specified by the VALUE attribute

n Default label (Reset) appears if the VALUE attribute is not included

Submit ButtonsSubmit 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 email address• Default label (Submit Query) appears if

the VALUE attribute is not included

Image Submit Buttons

Image Submit Buttons

n An <input> tag with type = image

n Displays a graphical image and submits the form to a CGI script on a server

n Use SRC attribute to specify image to be displayed on the button

n <input type="image" name="test" alt="Submit" src="test.gif">

Command Buttons Command Buttons n An <input> tag with type = button

n Use an onclick event handler to execute JavaScript code that performs some type of function (e.g., a calculation)

n Default value set with the VALUE attribute is transmitted along with the form data when submitted

n The old way to do a button; works everywhere.

n Buttons are text and drawn by the browser

<textarea><textarea>

Multiline Text FieldsMultiline Text Fieldsn <textarea> tag is used to create a field in

which users can enter multiple lines of information

n specify the size:

n cols=”80” characters

n rows=”3” lines of text

n AKA: Multiline text fields or Text Areas

<select><select>

Selection ListSelection Listn Creates a selection list that presents users

with fixed lists of values from which to choose

n Can appear as:

n List of choices

n Drop-down menu

n Can also have a scroll bar

<select> Attributes<select> Attributes

Attribute Value

multiple Allows multiple items to be selectedif 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

ExampleExample<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>

<option> Attributes<option> Attributes

Attribute Value

label Alternate text to display (as opposed to what is in-between its tags)

selected Default option selected

valueThe value that gets submitted (yes, what

you choose in the menu and the value that is sent are totally different!)

<optiongroup><optiongroup>

n Allows you to group <options>

n label = “name of group”

n no name just ends up blank, like a menu divider

<button><button>

<button> tag<button> tagn <button type=“submit”>

n Identical in function to <input type = “submit”

n Allows greater flexibility with button text:

n html (text + images) is allowed in the button label

n the “NEW” way to do a button

n really old browsers will not recognize it

ExampleExample

<button name="buttonName" type="button" value=”whocares”>

Button <img src="something.png" alt="image"> Text

</button>

<!-- button type can also be “reset” or “submit” -->

LabelLabel

<label><label>

n for= attribute

n ID of the form tag the label is for

n <label for=“someID”> text other html tags …</label>

FieldsetFieldset

<fieldset><fieldset>

n Places a box around the group form elements

n No attributes! just place form elements inside it

n CSS attributes still can be used

<legend><legend>

n Label the fieldset using <legend>

n no attributes needed

n must be contained INSIDE the <fieldset> your labeling

n Recommend it that its the 1st element inside the <fieldset>

FutureFutureHTML 5 / XFORMHTML 5 / XFORM

HTML 5HTML 5n input supports more types

n date-time, date, month, week, time

n number

n range

n email

n url

XFORMXFORMn New XML format

n Complex and split into two parts

n Data Model

n Form Model

n Form fields are abstracted away from literal GUI widgets of today, given the attributes the browser decides what widget fits best