HTML Tutorial 6: Working with Forms

CIS 1315 – Web Development for Educators

CIS 1315

HTMLTutorial 6: Working with Forms


<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


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

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


enctype Attribute


<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


<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


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

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


<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


<select>, <option>, & <optgroup>

<select>…</select> Create a Drop-down Menu or Scrolling List


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


Disables Form Element Use

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


Disables Form Element Use label=“text”

Not Selectable LABEL Appears Above Each Group in Menu / List Required


<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> Creates a Multiline Text Input Box

Attributes cols=“#”

Specifies Width of Textarea in Columns Limit is 72 Required

disabled=“disabled” Disables Form Element Use


<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


<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


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


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>


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:


Form Layout

Character Limits

No Warning

Assumes Visitor Should Know

Keyboard Appears to Stop Working

Inform Visitor


Form Buttons

Descriptive Text

Register Now /Cancel vs. OK /Cancel

Option Weight

Primary vs. Secondary Actions

Bigger is Easier

HTML Tutorial 6: Working with Forms

Documents

Transcript of HTML Tutorial 6: Working with Forms