Session 1 Chapter 10 - How to Work with Forms ITI 134: HTML5 Desktop and Mobile Level II

Class Outline  How to Use Forms and Controls  Other Skills for Working with Forms  How to Use HTML5 for Data Validation  How to Use HTML5 Controls 2/25/ Copyright © Carl M. Burnett

2/25/ Copyright © Carl M. Burnett AttributeDescription type Type of control ie “button”, “text”, “checkbox” name Name of Code disabled Boolean that disables control readonly Boolean that means user can change control value Attributes - Input Elements Attributes of Form Element AttributeDescription name Name for code action URL of processing file method Get or Post target Where to open page

HTML for Form 2/25/ Copyright © Carl M. Burnett <form name=" _form" action="subscribe.php" method="post"> Please enter your address to subscribe to our newsletter. <input type="submit" name="submit" value="Subscribe"> subscribe.php? =zak%40modulemedia.com&submit=Subscribe URL when form submitted with “get” method Example

Attributes Input Element Buttons and Button Element 2/25/ Copyright © Carl M. Burnett AttributesDescriptions typeSubmit, Reset, button, or image valueText to display srcRelative or Absolute URL of image altAlternate Text heightPixels or Percent widthPixels or Percent

2/25/ Copyright © Carl M. Burnett <input type="image" src="images/submit.jpg" alt="Submit button" width="114" height="42"> Four buttons that are created by the input element <img src="images/addtocart.png" width="30" <img src="images/addtocart.png" width="30" height="23" alt="Add to Cart">Add to Cart height="23" alt="Add to Cart">Add to Cart</button> A button that is created by the button element Example

Attributes - Input Element Text Fields AttributesDescriptions type text, password, or hidden value Default value maxlength Max Characters size Width of the field in characters autofocus A boolean attribute to set focus on placeholder Puts a default value or hint in the field. Value is removed when user’s cursor enters the control 2/25/ Copyright © Carl M. Burnett

2/25/ Copyright © Carl M. Burnett Quantity:<input type="text" name="quantity" value="1" size="5" readonly> Username:<input type="text" name="username" autofocus> Password:<input type="password" name="password" maxlength="6" placeholder="Enter your password"> Hidden:<input type="hidden" name="productid" value="widget"> The HTML for text fields Example

Attributes of Radio Buttons and Check Boxes 2/25/ Copyright © Carl M. Burnett AttributesDescriptions type Radio or checkbox value Value Submitted checked Boolean Crust: Thin Crust Deep Dish Hand Tossed Toppings: Pepperoni Mushrooms Olives Example

Attributes of Optgroup and Option Element 2/25/ Copyright © Carl M. Burnett ElementAttributesDescriptions optgroupLabel Text used to identify group optionvalue Value sent to server optionselected Boolean value Style: 10" 12" 16" 10" 12" 16" Example

Attributes of Select Element for List Boxes 2/25/ Copyright © Carl M. Burnett AttributesDescriptions size Number if item to display multiple Boolean for multiple select Pepperoni Sausage Mushrooms Black olives Onions Canadian bacon Pineapple Example

Attributes of Textarea Element 2/25/ Copyright © Carl M. Burnett AttributesDescriptions rows Approximate number of rows cols Approximate number of columns wrap Text wrap specifications: hard | soft (default) CSS for Text Area HTML for Text Area Comments: textarea { height: 5em; width: 25em; font-family: Arial, Helvetica, sans-serif; } Example

The HTML for a form with label elements 2/25/ Copyright © Carl M. Burnett AttributesDescriptions for Set the id of the related control. id required for form that use labels for attributes. Quantity: <input type="text" name="quantity" id="quantity" value="1" size="5"> Crust: <input type="radio" name="crust" id="crust1" value="thin"> Thin Crust <input type="radio" name="crust" id="crust2" value="deep"> Deep Dish <input type="radio" name="crust" id="crust3" value="hand"> Hand Tossed Example

HTML that uses fieldset and legend elements 2/25/ Copyright © Carl M. Burnett Crust <input type="radio" name="crust" id="crust1" value="thin"> Thin Crust <input type="radio" name="crust" id="crust2" value="deep"> Deep Dish <input type="radio" name="crust" id="crust3" value="hand"> Hand Tossed Example

Attributes of the input element for a file upload control AttributesDescriptions accept The types of files accepted for upload. multiple Boolean attribute to upload more than one file. <form name="upload_form" action="send .php" method="post" enctype="multipart/form-data"> Attach an image: <input type="file" name="fileupload" accept="image/jpeg, image/gif"> HTML for a file upload control Example 2/25/ Copyright © Carl M. Burnett

Aligned label, text box, and button controls First name: <input type="text" name="firstname" id="firstname" autofocus> Last name: Address: City: State: Zip code: <input type="submit" name="register" id="button" value="Register"> Example The CSS for the controls The HTML for the controls label { float: left; width: 5em; text-align: right;} input { margin-left: 1em; margin-bottom:.5em;} #button { margin-left: 7em;} 2/25/ Copyright © Carl M. Burnett

The CSS for the enhanced form body { font: 90% Arial, Helvetica, sans-serif; margin: 20px; } label { color: navy; float: left; width: 8em; font-weight: bold; text-align: right;} input { width: 15em; margin-left: 1em; margin-bottom:.5em;} input:focus { border: 2px solid navy; } #button, #reset { width: 7em; box-shadow: 2px 2px 0 navy; background-color: silver; } #button { margin-left: 9.5em; } Example 2/25/ Copyright © Carl M. Burnett

The attributes for tab order and access keys AttributesDescriptions tabindex Sets the tab order of the control accesskey Keyboard and control key Accessibility guideline - Setting a proper tab order and providing access keys improves the accessibility for users who can’t use a mouse. F irst name: <input type="text" name="firstname" id="firstname" accesskey="F"> L ast name: <input type="text" name="lastname" id="lastname" accesskey="L"> E mail: <input type="text" name=" " id=" " accesskey="E The HTML for the controls <label for="firstname" accesskey="F"> F irst name: <label for="lastname" accesskey="L"> L ast name: E mail: Another way to define the access keys Example 2/25/ Copyright © Carl M. Burnett

The HTML5 attributes for data validation AttributesDescriptions autocomplete Set attribute to off – disables auto-completion required Boolean attribute – Form submitted empty browser display error message novalidate Boolean attribute to tell browser not to validate form Name: Address: <input type="text" name="address" novalidate> Zip: Phone: <input type="text" name="phone" required autocomplete="off"> HTML that uses the validation attributes Example :valid :invalid input[required] :required Selector for controls with required attribute The CSS3 pseudo-classes for validation 2/25/ Copyright © Carl M. Burnett

Attributes for using regular expressions AttributesDescriptions pattern Specifies regular expression to valid entry title Test that is displayed in tooltip Patterns for common entries Used ForPattern Password (6+ alphanumeric) [a-zA-Z0-9]{6,} Zip code (99999 or ) \d{5}([\-]\d{4})? Phone number ( ) \d{3}[\-]\d{3}[\-]\d{4} Date (MM/DD/YYYY) [01]?\d\/[0-3]\d\/\d{4} URL (starting with or https?://.+ Credit card ( ) ^\d{4}-\d{4}-\d{4}-\d{4}$ 2/25/ Copyright © Carl M. Burnett

HTML that uses regular expressions Name: <input type="text" name="name" required autofocus> Zip: <input type="text" name="zip" required pattern="\d{5}([\-]\d{4})?" title="Must be or "> Phone: <input type="text" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be "> Example 2/25/ Copyright © Carl M. Burnett

Attributes for the option elements within a datalist element AttributesDescriptions value The value of the option in the datalist. Left aligned label Description of item Our company is conducting a survey. Please answer the question below. What is your preferred search engine: <option value=" label="Google"> <option value=" label="Dogpile"> Example 2/25/ Copyright © Carl M. Burnett

The type attribute for , url, and tel controls AttributesDescriptions A control for receiveing address (Implies Validation) url A control for receiving a URL (Implies Validation) tel A control for receiving a telephone number (Does not Imply Validation) <form name=" _form" action="survey.php" method="post"> Your information: Your address: <input type=" " name=" " id=" " required> Your web site: <input type="url" name="link" id="link" list="links"> Your phone number: <input type="tel" name="phone" id="phone" required> <input type="submit" name="submit" value="Submit Survey"> Example 2/25/ Copyright © Carl M. Burnett

Attributes for the number and range controls AttributesDescriptions min Minimum value max Maximum value step The increase and decrease by user clicks or up and down arrow keys Your information: Monthly investment: <input type="number" name="investment" id="investment" min="100" max="1000" step="100" value="300"> Rate the book from 1 to 5: <input type="range" name="book" id="book" min="1" max="5" step="1"> <input type="submit" name="submit" value="Submit Survey"> Example 2/25/ Copyright © Carl M. Burnett

Attributes for the date and time controls AttributesDescriptions min Minimum value max Maximum value Date and time: Local date and time: <input type="datetime-local" name="datetimelocal"> Month: Week: Time: Date: Example In Opera 2/25/ Copyright © Carl M. Burnett

A search function that uses a search control <input type="search" name="q" size="30" maxlength="255"> <input type="hidden" name="domains" value=" <input type="hidden" name="sitesearch" value=" Example 2/25/ Copyright © Carl M. Burnett

The HTML for a color control Choose your first background color: Example In Opera 2/25/ Copyright © Carl M. Burnett

An attribute for the output element AttributeDescriptions for Can be used to associate output element with one or more controls Enter numbers in both fields and click the Calculate button. <input name="x" type="number" min="100" step="5" value="100"> + <input name="y" type="number" min="100" step="5" value="100"> <input type="button" value="Calculate" onClick="result.value = parseInt(x.value) + parseInt(y.value)"> Total: Example In Safari 2/25/ Copyright © Carl M. Burnett

Attributes for the progress and meter elements AttributesDescriptions high High point low Low point min Lowest limit max Maximum limit optimum Optimum value value Current value Progress Element Progress set by JavaScript on page load: <progress id="progressBar" max="100" value="0"> Meter Element Meter set by JavaScript on page load: <meter id="meterBar" max="100" value="0" optimum="50" high="60"> Example In Opera 2/25/ Copyright © Carl M. Burnett

A web page that uses HTML5 data validation (Opera) HTML CSS Example In Opera 2/25/ Copyright © Carl M. Burnett

Student Exercise 2  Complete Exercise 8-1 on page 372 using Dreamweaver.  Upload your HTML pages and CSS files to the live site to preview. 2/25/2014 Copyright © Carl M. Burnett 31

Class Review  How to Use Forms and Controls  Other Skills for Working with Forms  How to Use HTML5 for Data Validation  How to Use HTML5 Controls 2/25/ Copyright © Carl M. Burnett Next – Chapter 11 - How to add audio and video to your web site