tailieunhanh - Lecture Introduction to web engineering - Lec 16: HTML 5 form elements

Lecture Introduction to web engineering - Lec 17: Introduction to CSS. 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,. | Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1 1 grgf Creating forms in HTML Adding form elements Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 2 HTML5 enhancements in form Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 3 HTML5 enhances the forms in two ways Adding new attributes to exiting elements New elements Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 4 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 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 5 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 6 Input type Required attribute Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 7 Error message Placeholder attribute: Allows a short . | Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1 1 grgf Creating forms in HTML Adding form elements Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 2 HTML5 enhancements in form Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 3 HTML5 enhances the forms in two ways Adding new attributes to exiting elements New elements Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 4 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 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 5 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 6 Input type Required attribute Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 7 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 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 8 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 9 placeholder Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 10 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 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 11 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 12 Allowed characters Valid length Pattern attribute Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 13 Invalid input Error message Writing Regular Expression: [ ]: makes a