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

2. 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/2014 2 Copyright © Carl M. Burnett

3. 2/25/2014 3 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

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

5. Attributes Input Element Buttons and Button Element 2/25/2014 5 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

6. 2/25/2014 6 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

7. 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/2014 7 Copyright © Carl M. Burnett

8. 2/25/2014 8 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

9. Attributes of Radio Buttons and Check Boxes 2/25/2014 9 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

10. Attributes of Optgroup and Option Element 2/25/2014 10 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

11. Attributes of Select Element for List Boxes 2/25/2014 11 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

12. Attributes of Textarea Element 2/25/2014 12 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

13. The HTML for a form with label elements 2/25/2014 13 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

14. HTML that uses fieldset and legend elements 2/25/2014 14 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

15. 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="sendemail.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/2014 15 Copyright © Carl M. Burnett

16. 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/2014 16 Copyright © Carl M. Burnett

17. 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/2014 17 Copyright © Carl M. Burnett

18. 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="email" id="email" 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/2014 18 Copyright © Carl M. Burnett

19. 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/2014 19 Copyright © Carl M. Burnett

20. 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 99999-9999) \d{5}([\-]\d{4})? Phone number (999-999-9999) \d{3}[\-]\d{3}[\-]\d{4} Date (MM/DD/YYYY) [01]?\d\/[0-3]\d\/\d{4} URL (starting with http:// or https://) https?://.+ Credit card (9999-9999-9999-9999) ^\d{4}-\d{4}-\d{4}-\d{4}$ 2/25/2014 20 Copyright © Carl M. Burnett

21. 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 99999 or 99999-9999"> Phone: <input type="text" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be 999-999-9999"> Example 2/25/2014 21 Copyright © Carl M. Burnett

22. 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="http://www.google.com/" label="Google"> <option value="http://www.dogpile.com/" label="Dogpile"> Example 2/25/2014 22 Copyright © Carl M. Burnett

23. The type attribute for email, url, and tel controls AttributesDescriptions email A control for receiveing email 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="email_form" action="survey.php" method="post"> Your information: Your email address: <input type="email" name="email" id="email" 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/2014 23 Copyright © Carl M. Burnett

24. 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/2014 24 Copyright © Carl M. Burnett

25. 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/2014 25 Copyright © Carl M. Burnett

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

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

28. 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/2014 28 Copyright © Carl M. Burnett

29. 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/2014 29 Copyright © Carl M. Burnett

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

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

32. 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/2014 32 Copyright © Carl M. Burnett Next – Chapter 11 - How to add audio and video to your web site