1. Session I How to Work with Forms Chapter 11 - How to Work with Formswww.profburnett.com

2. Class Outline HTML Forms HTML Forms HTML Form Exercises (4) HTML Form Exercises (4) HTML Form Elements HTML Form Elements HTML Form Element Exercises (3) HTML Form Element Exercises (3) HTML Input Types HTML Input Types HTML Input Type Exercises (5) HTML Input Type Exercises (5) HTML Input Attributes HTML Input Attributes HTML Input Attribute Exercises (4) HTML Input Attribute Exercises (4) 2/25/2014Copyright © Carl M. Burnett2

3. HTML Forms Element Text Input Radio Button Input Submit Button Action Attribute Method Attribute Name Attribute Element 2/25/2014Copyright © Carl M. Burnett3

4. Form Element Attributes AttributeDescription nameName for code actionURL of processing file methodGet or Post targetWhere to open page 2/25/2014Copyright © Carl M. Burnett4

5. AttributeDescription typeType of control ie “button”, “text”, “checkbox” nameName of Code disabledBoolean that disables control readonlyBoolean that means user can change control value 2/25/2014Copyright © Carl M. Burnett5 Input Element Attributes

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

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

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

9. HTML that uses fieldset and legend elements 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 2/25/2014Copyright © Carl M. Burnett9

10. HTML for Form <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 2/25/2014Copyright © Carl M. Burnett10

11. Session 1 – Form Exercises Exercise 1 Exercise 2 Exercise 3 Exercise 4 2/25/2014Copyright © Carl M. Burnett11

12. HTML Form Elements Element HTML5 Form Elements Element 2/25/2014Copyright © Carl M. Burnett12

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

14. Textarea Element Attributes 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 2/25/2014Copyright © Carl M. Burnett14

15. Buttons and Button Element Attributes 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/2014Copyright © Carl M. Burnett15

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

17. HTML5 Form Element - HTML5 Form Element - 2/25/2014Copyright © Carl M. Burnett17

18. HTML5 Form Element - HTML5 Form Element - Username: Encryption: 2/25/2014Copyright © Carl M. Burnett18

19. HTML5 Form Element - HTML5 Form Element - 0 100 + = 2/25/2014Copyright © Carl M. Burnett19

20. Session 1 – Form Element Exercises Exercise 1 Exercise 2 Exercise 3 2/25/2014Copyright © Carl M. Burnett20

21. HTML Input Types Input Type: text Input Type: password Input Type: submit Input Type: radio Input Type: checkbox Input Type: button HTML5 Input Types color date datetime datetime-local email month number range search tel time url week 2/25/2014Copyright © Carl M. Burnett21

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

23. Attributes for the date and time controls AttributesDescriptions minMinimum 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/2014Copyright © Carl M. Burnett23

24. Attributes for the number and range controls AttributesDescriptions minMinimum 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/2014Copyright © Carl M. Burnett24

25. The type attribute for email, url, and tel controls AttributesDescriptions emailA 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/2014Copyright © Carl M. Burnett25

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

27. Session 1 – Input Type Exercises Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 2/25/2014Copyright © Carl M. Burnett27

28. HTML Input Attributes value readonly disabled size maxlength 2/25/2014Copyright © Carl M. Burnett28

29. HTML5 Attributes autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget autocomplete novalidate 2/25/2014Copyright © Carl M. Burnett29 height and width list min and max multiple pattern (regexp) placeholder required step

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

31. Additional Form Controls fileupload tabindex accesskey regular expressions progress meter 2/25/2014Copyright © Carl M. Burnett31

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

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

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

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

36. Attributes for the progress and meter elements AttributesDescriptions highHigh 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/2014Copyright © Carl M. Burnett36

37. Session 1 – Input Attribute Exercises Exercise 1 Exercise 2 Exercise 3 Exercise 4 2/25/2014Copyright © Carl M. Burnett37

38. Class Review HTML Forms HTML Forms HTML Form Exercises (4) HTML Form Exercises (4) HTML Form Elements HTML Form Elements HTML Form Element Exercises (3) HTML Form Element Exercises (3) HTML Input Types HTML Input Types HTML Input Type Exercises (5) HTML Input Type Exercises (5) HTML Input Attributes HTML Input Attributes HTML Input Attribute Exercises (4) HTML Input Attribute Exercises (4) 2/25/2014Copyright © Carl M. Burnett38 Next – Chapter 15 - How to Use JavaScript and jQuery to Enhance your Web Page