cis 1310 – html & css 9 forms. cis 1310 – html & css learning outcomes describe common...

CIS 1310 – HTML & CSS

9

Forms


Learning OutcomesLearning 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


Forms OverviewForms Overview

Forms Are Used All Over the Web to:

Accept Information

Provide Interactivity

Types of Forms

Order

Search

Sign-up

Survey


<form><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


<form><form>

Attributes autocomplete=“on | off”

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


<form><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


<form><form>

Attributes

name=“type”

Specifies the Name of a Form

novalidate=“novalidate”

Specifies Form Should Not be Validated when Submitted

target=“_blank | _self | _parent | _top”

Specifies Where to Display the Response After Form Submission


enctype Attributeenctype Attribute


<input /><input />

<input /> Defines Type & Appearance for Form Input Elements

Attributes

autocomplete=“on | off”

Specifies Whether <input> has Autocomplete Enabled

autofocus=“autofocus”

Specifies that <input> Automatically Gets Focus on Page Load

checked=“checked”

Initial State of Checkbox / Radiobutton is Selected


<input /><input />

Attributes

disabled=“disabled”

Disables Form Element Use

form=“form_id”

Specifies One or More Forms <input> Element Belongs to

height=“#pixels”

Specifies Height of <input> Element

Only for TYPE=IMAGE


<input /><input />

Attributes list=“datalist_id”

Refers to a <datalist> Element

Contains Pre-defined Options for an <input> Element

max=“# | date” Specifies Maximum Value for an <input> Element

maxlength=“#” Sets Maximum Number of Characters for a Text Field

min=“# | date” Specifies Minimum Value for an <input> Element


<input /><input />

Attributes

multiple=“multiple”

Specifies User Can Enter More Than One Value

name=“Text”

Provides an ID for the Form Element

pattern=“regexp”

Specifies a Regular Expression that Value is Checked Against

placeholder=“regexp”

Specifies Short Hint that Describes Expected Value


<input /><input />

Attributes

readonly=“readonly”

Prevents User from Altering Contents of Element

required=“required”

Specifies Input Field Must be Filled Out Before Submission

size=“width | (width,height)”

Sets Width & Height of a Text Element

src=“url”

Specifies URL of Image When TYPE=IMAGE


<input /><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


<input /><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


<input /><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


<datalist><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>


<label><label>

<label>…</label>

Associates the Label with a Form Element

Simplify Data Entry

Attributes



for=“name”

Associates Label with Element Using the id Value


<select>, <option>, & <optgroup><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



<option>…</option>

Creates an Item in a Drop-down Menu or Scrolling List

Attributes



selected=“selected”

Indicates Item Should be the Default Choice

value=“value”

Value For Item When Form is Submitted



<optgroup>…</optgroup>

Organizes Menu / List Items into Distinct Groups

Attributes



label=“text”

Not Selectable

LABEL Appears Above Each Group in Menu / List

Required


<fieldset> & <legend><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


<textarea><textarea>

<textarea>…</textarea>

Creates a Multiline Text Input Box

Attributes

cols=“#”

Specifies Width of Textarea in Columns

Limit is 72

Required





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



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


<button><button> <button>…</button>

Create Graphically Interesting Form Buttons

Attributes



name=“text”

Associates a Name With the Element

type=“button | submit | reset”

Defines Button Type


Emailing Form DataEmailing 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


mailto: Examplemailto: 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>


Form LayoutForm Layout

Structure Single Column

Faster Single Eye Movement

Two-Column Right Slower Fewer Mistakes Awkward Appearance

Two-Column Left Slowest Higher Risk of Error

Difficult to Map from Label to Field

Name:

Address:

Name:

Address:

Name:

Address:


Form LayoutForm Layout

Character Limits

No Warning

Assumes Visitor Should Know

Keyboard Appears to Stop Working

Inform Visitor


Radio ButtonsRadio 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


Form ButtonsForm Buttons

Descriptive Text

Register Now / Cancel vs. OK / Cancel

Option Weight

Primary vs. Secondary Actions

Bigger is Easier


Server-side ScriptsServer-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


Server-side Processing StepsServer-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 9 forms. cis 1310 – html & css learning outcomes describe common...

Documents