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>  … 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 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 Single Text String multipart/form-data 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” 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

CIS 1310 – HTML & CSS enctype Attribute

CIS 1310 – HTML & CSS  Defines Type & Appearance for Form Input Elements  Attributes autocomplete=“on | off” Specifies Whether has Autocomplete Enabled autofocus=“autofocus” Specifies that Automatically Gets Focus on Page Load checked=“checked” Initial State of Checkbox / Radiobutton is Selected

CIS 1310 – HTML & CSS  Attributes disabled=“disabled” Disables Form Element Use form=“form_id” Specifies One or More Forms Element Belongs to height=“#pixels” Specifies Height of Element Only for TYPE=IMAGE

CIS 1310 – HTML & CSS  Attributes list=“datalist_id” Refers to a Element Contains Pre-defined Options for an Element max=“# | date” Specifies Maximum Value for an Element maxlength=“#” Sets Maximum Number of Characters for a Text Field min=“# | date” Specifies Minimum Value for an Element

CIS 1310 – HTML & CSS  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

CIS 1310 – HTML & CSS  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

CIS 1310 – HTML & CSS  Attributes type=“text | password | hidden | checkbox | radio | submit | reset | color | date | | 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  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 1310 – HTML & CSS  Attributes type color Provide the User with a Color Picker date | datetime | time | month | week Select Date / Time in Appropriate Format | tel | url Accept Data for Addresses, Telephone Numbers, URLs Performs Rudimentary Validation

CIS 1310 – HTML & CSS  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  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 1310 – HTML & CSS <datalist>  … Specifies a List of Pre-defined Options for an  Example

CIS 1310 – HTML & CSS <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,, &,, &  … 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 1310 – HTML & CSS,, &,, &  … 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 1310 – HTML & CSS,, &,, &  … 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 & &  … Visually Groups Form Elements into a Panel  … Provides a Caption for a Fieldset Can be Used to Explain Their Capabilities or Contents

CIS 1310 – HTML & CSS <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” Associates a Name With the Element readonly=“readonly” 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>  … Create Graphically Interesting Form Buttons  Attributes disabled=“disabled” Disables Form Element Use name=“text” Associates a Name With the Element type=“button | submit | reset” Defines Button Type

CIS 1310 – HTML & CSS ing Form Data  Value of the Action Attribute Can Automatically Include Subject Line Other Options &body=Send me your newsletter right away

CIS 1310 – HTML & CSS mailto: Example LanGear Product Registration <form name="reg" method=“post" enctype="text/plain"> First Name Last Name Address City State ZIP

CIS 1310 – HTML & CSS Form 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:

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