Forms

Collecting Data

CSS Class 5

Forms

• Create a form • Add text box• Add labels• Add check boxes and

radio buttons • Build a drop-down list • Group drop-down

options

• Insert text area • Add hidden field• Add password field• File upload field and

submit button

What is a Form?

• A form is a page that collects data for some specified purpose

• An XHTML form is a section of a document that has normal content, markup, and special elements called "controls"

Forms

• Go to form links posted at blog (“form links”)

• Observe the following:• What type of data is asked for?• How the page is composed: header, body, footer• Mixture of elements (dropdown windows, radio

buttons, etc)

Controls

• Controls: are checkboxes, radio buttons, menus, etc) and labels on those controls

• Go to “ Tryit” links at blog and try checkboxes, radio buttons, etc

Formsform

• All content of form and form controls must be wrapped inside form

• Forms have two required attributes:•action•method

Forms

• What does the action do?– Action makes the

“road” to the server that performs the action

• What does the method do?– Method tells the

browser how to send the data.

• There are two ways

Formsform action

• action is the path to the page on the server that will process the form

• Written like this:•<form action= “contact_action”|

Formsform method

• method instructs the browser about how it should send the data: get and post

• Written like this:•<form action= “contact_action” method=“post”>

Formsget

• What is “get?”• get sends the information as part of the URL as

a query string• URL visible on the action page will consist of the

address of the page followed by a question mark and then the form data

• written like this:• <form action= “contact_action” method=“post”>

Formsget

Disadvantages of get:

URL has a limited length

Security

Information can be altered by user

Cannot send binary data

Search engines use get because it can be saved as a bookmark or favorite

Formspost

• For forms where the information has any length, use post

• Browser sends the form data in the HTTP headers (the information it sends to the server when it connects)

• Any amount of data can be sent in a post• get is default, recommended to use post

Text Boxinput

• Most common element is the “single line text field”

• input with required type attribute

• Looks like this:

<input type=“text”

Text Boxinput

• input requires a type attribute

• the type attribute tells exactly which control is desired. Example:

<input type=“text”

Text Boxinput

• When the browser sends info to server, it needs to associate the user-entered data with the form control into which it was entered, so every form control has a required name attribute

Text Boxname attribute

• name may consist only of letters, numbers, dashes, and underscores

• Naming conventions (requirements of processing language, not XHTML:

• Begin with a letter, not a number

• Name may be case sensitive

• Check with developer of processing script for others

Continuing…

<input type=“text” name = “firstname”/>

input tag always empty, so put “/”

Text Boxform

• Set the visible width of the field: add size to the input tag:

<input type=“text” name = “firstname” size=“30” />

Text Boxform

• Limit the number of characters:

– Set the length with the maxlength attribute, which does not need to be the same as size

• Looks like this:

<input type=“text” name = “firstname” size=“30” maxlength = “20”/>

Text Boxform

• Prefill data using the value attribute:

<input type=“text” name = “firstname” size=“30” maxlength = “20” value=“Enter name here” />

Adding Labelslabel

• Apply two ways:

1. Wrap label text and input tag in the label tag:

<label>First Name: <input type=”text” name=“fname” /></label>

Use this when there is no code separating label from field

Adding Labelslabel

• 2. Associate them by7 add id attribute to the form field, then setting the label element’s for attribute to a value matching the id:

• <td><label for=“fname”>First Name</label></td><td><input type=“text” name=“fname” id=“fname” /></td>

Use this when other code needs to appear between the label and the control.

Check Boxes & Radio Buttonscheck box radio

• Use when user selects from a list:

– check boxes– radio buttons– select list

• Use input element• Both require name (identical because the

data can then be handled as a logical set)

Check Boxes & Radio Buttonscheck box radio

• Require a value• Value should be unique to each button

• Value attribute allows you to set meaning of the check box or radio button

Check Boxes & Radio Buttonscheck box radio

• Adding pre-select

• Use checked=“unchecked” attribute to the tag

• Example:

<input type=“checkbox” name=“offers” value=“1” checked=“checked”/>

Drop-Down List

• Drop-down lists are spacesavers

• Rely on two primary elements:•select•Option

• select defines the list as a whole and provides its name

within select, there is a series of option tags

Drop-Down Listoption tags

• Each option tag has a value, which is the data to be sent to the server

• Between the opening and closing option tags is the text the user will see in the browser

<select name=“states”>

<option value=“AL”>Alabama</option>

<option value=“AK”>Alaska</option>

</select>

Drop-Down Listmultiple

• select lists a single selection• Create additional attributes with multiple

• Always has value of multiple• Tells browser it should allow more than

one selection• size attribute determines number of

options visible on screen• Browser will automatically add scroll bar

Group Drop-Down Optionsoptgroup

• Grouping elements within a long list

Place in the select tag and will wrap around a set of option elements

optgroup element takes a required label attribute

Allows for insertion of a description of the group of options that follow

Group Drop-Down Optionsoptgroup

• Looks like this: • XHTML does not limit number of options in optgroups (just like select)

• Can’t nest subcategories

<optgroup label="Midwest Region"> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MO">Missouri</option> <option value="NE">Nebraska</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="SD">South Dakota</option> <option value="WI">Wisconsin</option>

</optgroup>

Insert Text Areatextarea

• To allow user to input large blocks of text– Example: craigslist

• textarea element

• Takes a required name attribute

• Size of box: – Default varies with browser– Accepts row and col to set size

Insert Text Areatextarea

• Setting size of box looks like this. Note that because textarea is a container element, there is a closing tag

<label>Additional Comments:<br /> <textarea name="comments" rows="5" cols="30" tabindex="70"></textarea> </label>

Insert Text Areatextarea

• Limiting input: without JavaScript, no way to limit the information into a textarea

• Some browsers restrict to 65,536 characters

Insert Text Areatextarea

• Allowing user to mark up text:• Use FCKEditor• Implemented with both XHTML and JavaScript

Add a Hidden Fieldhidden

• For when designer needs to embed data that should not be editable by or visible to users

• Google hides preference for language in a hidden field named hl

Add a Hidden Fieldhidden

• Looks like this:

– Use input, set the type attribute to hidden– name attribute is required– Provide value attribute representing data

being embedded<input type="hidden" name="ref" value="1" />

</p>

Add a Password Fieldpassword

• Use input with a type of password• Browser automatically replaces the text being

inserted with asterisks• Looks like this:<p><label>Please create a password:<input type="password" name="pword" tabindex="80" />

</label></p>

Add a File Upload Fieldfile

• Consists of two parts:– Text field for the path to the file– Button that allows user to browse computer’s

hard drive for file

• Use input field with type set to file• Name required for file, of course

Add a File Upload Fieldfile

• Designer issues:• size and maxlength not supported• Makes size of boxes different• No control over Browse text• Browsers only allow one file per upload field

• Looks like this:<p><label>If you would like us to review a file, please upload it:<input type="file" name="upload" /></label></p>

Add a File Upload Fieldenctype

• Also needed:– Add an additional attribute to the form tag:

Enctype

The default enctype is application/x-www-form-urlencoded, which makes browser send all text

File needs to be sent as binary data, the rest can be sent as text, so add enctype and set its value to multipart/form-data

Also set method to post

Add a File Upload Fieldenctype

• Looks like this:

<form method=“post” action=“form_action” enctype=“ multipart/form-data”>

<label>Select a file to upload: <input type=“file” name=“upload” /> </label> </form>

Add a Submit Buttonsubmit

• Form complete, user now needs to send it

• Use input element with a type set to submit

• XHTML requires a name for the button

• Assure consistency across browsers by providing a value attribute

• Size of button determined by length of text but can be precisely controlled with CSS

Add a Submit Buttonsubmit

• Return or Enter key sending:– Browsers inconsistent in how this is handled vs.

clicking the button– All browsers submit the form with Return and

Enter but some do not submit the button’s name and value to the server

– If using multiple submit buttons on a form, provide a unique name for each

– Use server processing script to see which button was clicked, then do necessary processing

Other button typesreset button

reset

• Setting input type to reset creates a button that will clear form

• Use is not recommended

button

• Setting input type to button creates a generic button with no default behavior

• With generic button, provide JavaScript code to instruct its function

• Often used for client-side scripting