Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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