Date post: | 18-Jan-2016 |
Category: |
Documents |
Upload: | darleen-nelson |
View: | 223 times |
Download: | 6 times |
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!