SYST 28043

Web Technologies

SYST 28043

Web Technologies

XHTML Forms

04/21/23 Wendi Jollymore, ACES 2

FormsForms

Used to get user input on a web page

Can use scripts or server programs to process form dataWe’ll use PHP next week

Form elementContains all the other elements that define your input controls

04/21/23 Wendi Jollymore, ACES 3

<form> Tag<form> Tag

Contains the entire formAttributes:

method=“GET/POST”How the form data is sent to the server

action=“”Contains the name of the file that processes your page

<form method=“POST” action=“saveData.php”>

…</form>

04/21/23 Wendi Jollymore, ACES 4

GET vs. PostGET vs. Post

GETSends form data as part of URLAfter URL, a ? symbol, then dataName-value pairs

fieldName=value

Pairs separated with &field1=value1&field2=value2

http://www.blah.ca?name=Fred+Flintstone&iq=2

This is not very secure or private

04/21/23 Wendi Jollymore, ACES 5

GET vs. POSTGET vs. POST

POSTData is sent in a separate input streamAllows you to send more data

URL length is limited

More secureGET data is recorded in server logs, browser history etcPOST data is not

We’ll talk more about GET/POST when we learn PHP

04/21/23 Wendi Jollymore, ACES 6

Input TagsInput Tags

Most input controls can be defined with <input /> tag

Type attribute defines the kind of input control:

E.g. <input type=“text”>Text, password, checkbox, radio, hidden, button, submit, reset, file, etc.

Value attributeThe value the control hasDepends on the type attribute

04/21/23 Wendi Jollymore, ACES 7

Input TagsInput Tags

Name vs. IDName attribute

Unique name for this element

Id attributeSame as name (replacing name, eventually)

Sometimes you’ll use one or other

Safer to just use both

04/21/23 Wendi Jollymore, ACES 8

Text BoxesText Boxes

To get plain text input from usertype=“text”Attributes

maxlength=“n”Maximum number of characters allowed

size=“n”Visible size of box in # of characters

Value attributeCan contain default value in box

04/21/23 Wendi Jollymore, ACES 9

Password FieldsPassword Fields

A text box that doesn’t show contents

Shows * symbols instead of characters

type=“password”Other attributes same as text box

04/21/23 Wendi Jollymore, ACES 10

Check BoxesCheck Boxes

Used for on/off or yes/no type of questionsUsed for lists that allow multiple selectionstype=“checkbox”Value attribute contains the value sent to the server if box is checkedChecked=“checked”

Sets default to checked

04/21/23 Wendi Jollymore, ACES 11

Radio ButtonsRadio Buttons

Used for lists of itemsUser can select only one

type=“radio”name attribute must be the same for each radio button in a group

Treats group like one input fieldValue attribute contains value returned for this field (selected button)

checked=“checked”To select default item

04/21/23 Wendi Jollymore, ACES 12

ButtonsButtons

Submit buttonWhen clicked, triggers form processingtype=“submit”

Reset buttonAutomatically reloads formCauses all controls to be reinitializedtype=“reset”

Set value property if you want these to day something else

04/21/23 Wendi Jollymore, ACES 13

ButtonsButtons

If you want some other kind of buttontype=“button”

Need to set onclick eventE.g. run a script

<input type="button" value="Add To Cart" name="addCart" onclick="addToCart();"/>

04/21/23 Wendi Jollymore, ACES 14

Text AreaText Area

A multi-line text boxMax 1,024 characters

<textarea></textarea>Attributes:

rows=“n” cols=“n”Sets number of visible rows and columns

Default text goes between the tags

04/21/23 Wendi Jollymore, ACES 15

ListsLists

List BoxA list of items that might show a scroll bar

Drop-down listA list of items that you have to “pull down” to see

Both use the <select></select> tagsize=“n” attribute

To set the number of visible rows in list boxLeave this out to make a drop-down list

04/21/23 Wendi Jollymore, ACES 16

ListsLists

Lists contain a set of <option></option> elements

Each one represents an item in the listValue attribute contains the value returned when an item is selectedselected=“selected”

For default selection<optiongroup label=“labelName”></optiongroup> tags

Used to group items in the list

04/21/23 Wendi Jollymore, ACES 17

Setting Tab OrderSetting Tab Order

The order in which the user moves from control to control using tab keyA logical and natural tab order helps user fill out a form fasterTab index = the numeric order of tabbed controls

tabindex=“n” added to an element

04/21/23 Wendi Jollymore, ACES 18

Using Field LabelsUsing Field Labels

Most input controls will have promptsField labels make pages more accessible

They’re also very coolYou can click the label to put cursor in/on control

<label></label> tagPrompt goes in betweenfor=“” attribute

The name of the control the label is paired with

04/21/23 Wendi Jollymore, ACES 19

Using Field LabelsUsing Field Labels

Examples:

<label for="txtName">Your Name:</label><input type="text" id="txtName" /><br />

Your Gender: <br /><input type="radio" name="gender" id="male" />

<label for="male"> Male</label><br /><input type="radio" name="gender" id="female" />

<label for="female"> Female</label>

04/21/23 Wendi Jollymore, ACES 20

Fieldset and LegendFieldset and Legend

Putting borders and labels around groups of controls

Organization, neat, professional

<fieldset></fieldset>Adds a borderUse CSS style attribute to customize

<legend>Text label</legend>Put inside fieldset to add a labelCan also customize with CSS

04/21/23 Wendi Jollymore, ACES 21

Homework ExerciseHomework Exercise

See Forms NotesMake up your own survey, or do the one in the notesDue at the end of next class

Work on this during the rest of classNext class:

Finish homework exercise given todayPHP!