Transcript CIS 1310 – HTML & CSS

9
Forms
CIS 1310 – HTML & CSS
Learning Outcomes

Describe Common Uses of Forms on Web Pages

Create Forms on Web Pages

Associate Form Controls & Groups

Create Custom Image Buttons

Use CSS to Style a Form

Configure New HTML5 Form Controls

Describe Features & Uses of Server-side Processing
CIS 1310 – HTML & CSS
Forms Overview


Forms Are Used All Over the Web to:

Accept Information

Provide Interactivity
Types of Forms

Order

Search

Sign-up

Survey
CIS 1310 – HTML & CSS
<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

Script that Transmits Data to Web Server
Required
CIS 1310 – HTML & CSS
<form>

Attributes

autocomplete=“on | off”

enctype=“type”

Specifies Type & Format of Submitted Form Data

application/x-www-form-urlencoded


multipart/form-data


Single Text String
Binary Data or Text Containing Non-ASCII Characters
text/plain

Separated Field / Value Pairs
CIS 1310 – HTML & CSS
<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 1310 – HTML & CSS
<form>

Attributes

name=“type”


novalidate=“novalidate”


Specifies the Name of a Form
Specifies Form Should Not be Validated when Submitted
target=“_blank | _self | _parent | _top”

Specifies Where to Display the Response After Form Submission
CIS 1310 – HTML & CSS
enctype Attribute
CIS 1310 – HTML & CSS
<input />

<input />


Defines Type & Appearance for Form Input Elements
Attributes

autocomplete=“on | off”


autofocus=“autofocus”


Specifies Whether <input> has Autocomplete Enabled
Specifies that <input> Automatically Gets Focus on Page Load
checked=“checked”

Initial State of Checkbox / Radiobutton is Selected
CIS 1310 – HTML & CSS
<input />

Attributes

disabled=“disabled”


form=“form_id”


Disables Form Element Use
Specifies One or More Forms <input> Element Belongs to
height=“#pixels”

Specifies Height of <input> Element

Only for TYPE=IMAGE
CIS 1310 – HTML & CSS
<input />

Attributes


list=“datalist_id”

Refers to a <datalist> Element

Contains Pre-defined Options for an <input> Element
max=“# | date”


maxlength=“#”


Specifies Maximum Value for an <input> Element
Sets Maximum Number of Characters for a Text Field
min=“# | date”

Specifies Minimum Value for an <input> Element
CIS 1310 – HTML & CSS
<input />

Attributes

multiple=“multiple”


name=“Text”


Provides an ID for the Form Element
pattern=“regexp”


Specifies User Can Enter More Than One Value
Specifies a Regular Expression that Value is Checked Against
placeholder=“regexp”

Specifies Short Hint that Describes Expected Value
CIS 1310 – HTML & CSS
<input />

Attributes

readonly=“readonly”


required=“required”


Specifies Input Field Must be Filled Out Before Submission
size=“width | (width,height)”


Prevents User from Altering Contents of Element
Sets Width & Height of a Text Element
src=“url”

Specifies URL of Image When TYPE=IMAGE
CIS 1310 – HTML & CSS
<input />

Attributes

type=“text | password | hidden | checkbox | radio |
submit | reset | color | date | email | tel | url | number |
range | search | 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 1310 – HTML & CSS
<input />

Attributes

type

checkbox


Generates a Multiple Selection Element
radio

Generates a Mutually Exclusive Element


submit


Name Values Must be the Same
Button that Processes Form Data by the ACTION Attribute
reset

Button that Restores Form to Its Original State
CIS 1310 – HTML & CSS
<input />

Attributes

type

color


date | datetime | time | month | week


Provide the User with a Color Picker
Select Date / Time in Appropriate Format
email | tel | url

Accept Data for E-mail Addresses, Telephone Numbers, URLs

Performs Rudimentary Validation
CIS 1310 – HTML & CSS
<input />

Attributes

type



number

Value Must be Numeric; Accepts Restrictions

Utilizes Spinner Control
range

Accepts a Range of Numeric Values

Utilizes Slider Control
search

Accept Search Terms
CIS 1310 – HTML & CSS
<input />

Attributes

type

button


image


Button that Executes a Script
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 1310 – HTML & CSS
<datalist>

<datalist>…</datalist>


Specifies a List of Pre-defined Options for an <Input>
Example
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer“ />
<option value="Firefox“ />
<option value="Chrome“ />
<option value="Opera“ />
<option value="Safari“ />
</datalist>
CIS 1310 – HTML & CSS
<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 id Value
CIS 1310 – HTML & CSS
<select>, <option>, & <optgroup>

<select>…</select>


Create a Drop-down Menu or Scrolling List
Attributes

disabled=“disabled”


multiple=“multiple”


Allows Users to Choose More than One Item
name=“text”


Disables Form Element Use
Associates a Name With the List
size=“#”

Sets the Number of Choices Visible Within the Menu
CIS 1310 – HTML & CSS
<select>, <option>, & <optgroup>

<option>…</option>


Creates an Item in a Drop-down Menu or Scrolling List
Attributes

disabled=“disabled”


selected=“selected”


Disables Form Element Use
Indicates Item Should be the Default Choice
value=“value”

Value For Item When Form is Submitted
CIS 1310 – HTML & CSS
<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 1310 – HTML & CSS
<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 1310 – HTML & CSS
<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 1310 – HTML & CSS
<textarea>

Attributes

name=“text”


readonly=“readonly”


Associates a Name With the Element
Prevents User From Altering Textarea’s Contents
rows=“#”

Specifies Number of Rows in Textarea

Required
CIS 1310 – HTML & CSS
<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 1310 – HTML & CSS
<button>

<button>…</button>


Create Graphically Interesting Form Buttons
Attributes

disabled=“disabled”


name=“text”


Disables Form Element Use
Associates a Name With the Element
type=“button | submit | reset”

Defines Button Type
CIS 1310 – HTML & CSS
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 1310 – HTML & CSS
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 1310 – HTML & CSS
Form Layout

Structure



Single Column

Faster

Single Eye Movement
Name:
Address:
Two-Column Right

Slower

Fewer Mistakes

Awkward Appearance
Two-Column Left

Slowest

Higher Risk of Error

Name:
Address:
Name:
Address:
Difficult to Map from Label to Field
CIS 1310 – HTML & CSS
Form Layout

Character Limits


No Warning

Assumes Visitor Should Know

Keyboard Appears to Stop Working
Inform Visitor
CIS 1310 – HTML & CSS
Radio Buttons

Indicate Default

Give People Control and Align with Their Expectations

Expedite Tasks

Harness the Power of Suggestion

Assist

Sway

Horizontal Radio Buttons are Difficult to Scan

Use <label> to Enlarge the Target Clickable Area
CIS 1310 – HTML & CSS
Form Buttons

Descriptive Text


Register Now / Cancel vs. OK / Cancel
Option Weight

Primary vs. Secondary Actions

Bigger is Easier
CIS 1310 – HTML & CSS
Server-side Scripts

Embedded Within a Web Page


Accesses File with Extension Such as:

.php (PHP)

.asp (Active Server Pages)

.cfm (Adobe ColdFusion)

.jsp (Sun JavaServer Pages)

.aspx (ASP.Net)
Uses Direct Execution

Script is Run by Web Server or Extension Module to Server
CIS 1310 – HTML & CSS
Server-side Processing Steps

Web Page Invokes Server-side Processing

Via Form or Link

Web Server Executes Server-side Script

Script Accesses Requested:


Database

File

Process
Web Server Returns Web Page

With Requested Information or Confirmation of Action
CIS 1310 – HTML & CSS