Lecture Web technologies and programming – Lecture 11: HTML 5 form elments. After studying this chapter you will be able to understand: Creating forms in HTML, adding form elements, HTML5 enhancements in form, the required attribute, the placeholder attribute,. | 1 CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr. Tehseen Riaz Abbasi 1 2 3 3 grgf Creating forms in HTML Common Form Attributes When to Use GET AND POST? Form elements Textbox Password Field Hidden Field Checkbox Radio Button Text Area Select List Submit Button Reset Button Adding form elements 4 HTML5 enhancements in form XHTML 5 HTML5 enhances the forms in two ways Adding new attributes to exiting elements New elements 6 Required attribute: tells the browser to only submit the form if the field in question is filled out ensures that all necessary information is provided by the user 7 8 Input type Required attribute 9 Error message Placeholder attribute: Allows a short hint to be displayed inside the form element tell the user what data should be entered in that field 10 11 placeholder 12 Hint about data pattern attribute: enables you to provide a regular expression that the user’s input must match in order to be considered valid 13 14 Allowed characters Valid length Pattern attribute 15 Invalid input Error message Writing Regular Expression: [ ]: makes a class of characters -: means a range of characters [a-z],[0-9] [^ ]: negates the class of character [^0-9] {n}: matches a character, class or sub-pattern for n times { n, m}: matches a character, class or sub-pattern for minimum n times and maximum m times 16 Example patterns: 17 Only alphabets Allowed length Only alphabets Allowed length Space is allowed Last name Allowed length Example patterns: 18 Only digits Allowed length Only digits Allowed length - symbol - symbol . | 1 CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr. Tehseen Riaz Abbasi 1 2 3 3 grgf Creating forms in HTML Common Form Attributes When to Use GET AND POST? Form elements Textbox Password Field Hidden Field Checkbox Radio Button Text Area Select List Submit Button Reset Button Adding form elements 4 HTML5 enhancements in form XHTML 5 HTML5 enhances the forms in two ways Adding new attributes to exiting elements New elements 6 Required attribute: tells the browser to only submit the form if the field in question is filled out ensures that all necessary information is provided by the user 7 8 Input type Required attribute 9 Error message Placeholder attribute: Allows a short hint to be displayed inside the form element tell the user what data should be entered in that field 10 11 placeholder 12 Hint about data pattern attribute: enables you to provide a regular expression .
