html tutorial 6: working with forms
DESCRIPTION
CIS 1315. HTML Tutorial 6: Working with Forms. . … Region for Elements Used for Soliciting Input Can Have Multiple Forms Cannot Nest Forms Attributes action=“url” Specifies Location of Resource Browser Executes it When Form Data is Submitted - PowerPoint PPT PresentationTRANSCRIPT
CIS 1315 – Web Development for Educators
CIS 1315
HTMLTutorial 6: Working with Forms
CIS 1315 – Web Development for Educators
<form>
<form>…</form> Region for Elements Used for Soliciting Input
Can Have Multiple Forms Cannot Nest Forms
Attributes action=“url”
Specifies Location of Resource Browser Executes it When Form Data is Submitted
Mailto that Submits Data in an Email CGI Script that Transmits Data to Web Server
Required
CIS 1315 – Web Development for Educators
<form>
Attributes
method=“get | post”
Processes Form Data to the URL Specified by ACTION
get
Browser Creates a Query
Includes URL, ?, and Values Generated By the Form
post
Formats Form Data as a Block
CIS 1315 – Web Development for Educators
<form>
Attributes enctype=“type”
Specifies Type & Format of Submitted Form Data
application/x-www-form-urlencoded Single Text String
multipart/form-data Binary Data or Text Containing Non-ASCII Characters
text/plain Separated Field / Value Pairs
CIS 1315 – Web Development for Educators
enctype Attribute
CIS 1315 – Web Development for Educators
<input />
<input /> Defines Type & Appearance for Form Input Elements
Attributes checked=“checked”
Initial State of Checkbox / Radiobutton is Selected disabled=“disabled”
Disables Form Element Use name=“Text”
Provides an ID for the Form Element
CIS 1315 – Web Development for Educators
<input />
Attributes maxlength=“#”
Sets Maximum Number of Characters for a Text Field readonly=“readonly”
Prevents User from Altering Contents of Element size=“width | (width,height)”
Sets Width & Height of a Text Element src=“url”
Specifies URL of Image When TYPE=IMAGE
CIS 1315 – Web Development for Educators
<input />
Attributes type=“text | password | checkbox | radio | hidden |
submit | reset | button | image” Indicates Type of Input Element to Display text
Generates a Textbox password
Generates a Textbox Any Character Entered By User Displays as an Asterisk
hidden Data That Is Necessary For Correct Form Processing Users Cannot See Data
CIS 1315 – Web Development for Educators
<input />
Attributes type
checkbox Generates a Multiple Selection Element
radio Generates a Mutually Exclusive Element
Name Values Must be the Same
submit Button that Processes Form Data by the ACTION Attribute
reset Button that Restores Form to Its Original State
CIS 1315 – Web Development for Educators
<input />
Attributes type
button Button that Executes a Script
image SUBMIT Button that Uses Image Specified by SRC Attribute
value=“value” Value For Non-text Input Elements When Form is Submitted
What Appears on Button Face for Buttons
CIS 1315 – Web Development for Educators
<label>
<label>…</label> Associates the Label with a Form Element
Simplify Data Entry
Attributes disabled=“disabled”
Disables Form Element Use
for=“name” Associates Label with Element Using the NAME Value
CIS 1315 – Web Development for Educators
<select>, <option>, & <optgroup>
<select>…</select> Create a Drop-down Menu or Scrolling List
Attributes disabled=“disabled”
Disables Form Element Use multiple=“multiple”
Allows Users to Choose More than One Item name=“text”
Associates a Name With the List size=“#”
Sets the Number of Choices Visible Within the Menu
CIS 1315 – Web Development for Educators
<select>, <option>, & <optgroup>
<option>…</option> Creates an Item in a Drop-down Menu or Scrolling List
Attributes disabled=“disabled”
Disables Form Element Use
selected=“selected” Indicates Item Should be the Default Choice
value=“value” Value For Item When Form is Submitted
CIS 1315 – Web Development for Educators
<select>, <option>, & <optgroup>
<optgroup>…</optgroup> Organizes Menu / List Items into Distinct Groups
Attributes disabled=“disabled”
Disables Form Element Use label=“text”
Not Selectable LABEL Appears Above Each Group in Menu / List Required
CIS 1315 – Web Development for Educators
<fieldset> & <legend>
<fieldset>…</fieldset>
Visually Groups Form Elements into a Panel
<legend>…</legend>
Provides a Caption for a Fieldset
Can be Used to Explain Their Capabilities or Contents
CIS 1315 – Web Development for Educators
<textarea>
<textarea>…</textarea> Creates a Multiline Text Input Box
Attributes cols=“#”
Specifies Width of Textarea in Columns Limit is 72 Required
disabled=“disabled” Disables Form Element Use
CIS 1315 – Web Development for Educators
<textarea>
Attributes name=“text”
Associates a Name With the Element
readonly=“readonly” Prevents User From Altering Textarea’s Contents
rows=“#” Specifies Number of Rows in Textarea
Required
CIS 1315 – Web Development for Educators
<textarea>
Attributes wrap=“off | soft | hard”
Specifies Word Wrap Handling off
Default Setting No Wrapping
soft Automatically Wraps Treated as One Line when Submitted
hard Automatically Wraps Treated as Multiple Lines When Submitted
CIS 1315 – Web Development for Educators
Emailing Form Data
mailto:address@email Value of the <form> Action Attribute
Can Automatically Include Subject Line
mailto:[email protected]?subject=text
Other Options
mailto:[email protected][email protected]&[email protected]&subject=subscribe&body=Send me your newsletter right away
CIS 1315 – Web Development for Educators
mailto: Example
<html><head><title>LanGear Product Registration</title></head><body style="color: rgb(133,0,0); margin: 0"><form name="reg" action="mailto:[email protected]?Subject=Register" method=“post" enctype="text/plain"> <label for="fname">First Name</label> <input type="text" name="fname" id="fname" size="30" /> <label for="lname">Last Name</label> <input type="text" name="lname" id="lname" size="30" /> <label for="address1">Address</label> <input type="text" name="address" id="address" size="60" /> <label for="city">City</label> <input type="text" name="city" id="city" size="40" /> <label for="state">State</label> <input type="text" name="state" id="state" size="3" /> <label for="zip">ZIP</label> <input type="text" name="zip" id="zip" size="10" maxlength="10" /> <input type="submit" value="Send Registration" /> <input type="reset" value="Cancel" /></form></body></html>
CIS 1315 – Web Development for Educators
Form Layout
Structure Single Column
Faster Single Eye Movement
Two-Column Right Slower Fewer Mistakes Awkward Appearance
Two-Column Left Slower Higher Risk of Error
Difficult to Map from Label to Field
Name:
Address:
Name:
Address:
Name:
Address:
CIS 1315 – Web Development for Educators
Form Layout
Character Limits
No Warning
Assumes Visitor Should Know
Keyboard Appears to Stop Working
Inform Visitor
CIS 1315 – Web Development for Educators
Form Buttons
Descriptive Text
Register Now /Cancel vs. OK /Cancel
Option Weight
Primary vs. Secondary Actions
Bigger is Easier