1. CIS 1310 – HTML & CSS 9 Forms

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

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

4. 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 Email Script that Transmits Data to Web Server Required

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

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

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

8. CIS 1310 – HTML & CSS enctype Attribute

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

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

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

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

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

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

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

16. 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 email | tel | url Accept Data for E-mail Addresses, Telephone Numbers, URLs Performs Rudimentary Validation

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

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

19. CIS 1310 – HTML & CSS <datalist>  … Specifies a List of Pre-defined Options for an  Example

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

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

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

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

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

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

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

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

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

29. CIS 1310 – HTML & CSS Emailing Form Data  mailto:address@email Value of the Action Attribute Can Automatically Include Subject Line mailto:mike@cod.edu?subject=text Other Options mailto:mike@cod.edu?cc=another@cod.edu &bcc=secret@cod.edu&subject=subscribe &body=Send me your newsletter right away

30. CIS 1310 – HTML & CSS mailto: Example LanGear Product Registration <form name="reg" action="mailto:sales@langear.com?Subject=Register" method=“post" enctype="text/plain"> First Name Last Name Address City State ZIP

31. 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:

32. CIS 1310 – HTML & CSS Form Layout  Character Limits No Warning Assumes Visitor Should Know Keyboard Appears to Stop Working Inform Visitor

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

34. CIS 1310 – HTML & CSS Form Buttons  Descriptive Text Register Now / Cancel vs. OK / Cancel  Option Weight Primary vs. Secondary Actions Bigger is Easier

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

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