HTML 5 Form elements

HTML 5 Form elementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.1Summary of the previous lectureCreating forms in HTMLAdding form elementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2OutlineHTML5 enhancements in formBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31. HTML-5 form enhancementHTML5 enhances the forms in two waysAdding new attributes to exiting elementsNew elementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.41.1 The required attributeRequired 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 userBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.51.1 The required attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.6Input typeRequired attribute1.1 The required attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.7Error message1.2 The placeholder attributePlaceholder attribute:Allows a short hint to be displayed inside the form elementtell the user what data should be entered in that fieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.81.2 The placeholder attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.9placeholder1.2 The placeholder attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.10Hint about data1.3 The pattern attributepattern attribute:enables you to provide a regular expression that the user’s input must match in order to be considered validBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.111.3 The pattern attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.12Allowed charactersValid lengthPattern attribute1.3 The pattern attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.13Invalid inputError message1.3 The pattern attributeWriting 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 timesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.141.3 The pattern attributeExample patterns:Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.15Only alphabetsAllowed lengthOnly alphabetsAllowed lengthSpace is allowedLast nameAllowed length1.3 The pattern attributeExample patterns:Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.16Only digitsAllowed lengthOnly digitsAllowed length- symbol- symbol1.4 The disabled attributedisabled attribute:have the content grayed out in the browserprohibit the user from focusing on a form control that has the disabledBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.171.4 The disabled attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.18Input field is disabled1.4 The disabled attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.19Input field is disabledDisabled field1.5 The readonly attributereadonly attribute:it makes it impossible for the user to edit the form fieldthe field can receive focusBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.201.6 The autocomplete attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.21The autocomplete attribute:this will be a drop-down list that appears when the user begins typing1.6 The autocomplete attributeBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.22autocomplete1.7 The datalist elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.23The datalist element:a text field with a set of predefined autocomplete optionsFirst we define an input field with list attributeThen we define the datalist Red Red 1.7 The datalist elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.24List attributeDatalist startsoptionsDatalist ends1.7 The datalist elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.252. HTML 5 new elementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.26Email elementDate elementNumber elementColor element2.1 Email elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.27The email element:It ensures that user enters a valid email address2.1 Email elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.28Input type2.2 Date elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.29The date element:It shows a calendar to user to select a date2.2 Date elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.302.3 Color elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31The color element:It facilitate the user to choose a color2.3 Color element.Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.322.3 Color element.Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.332.4 Number elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.34The number element:It ensures that user enters only a numeric value2.4 Number elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.352.4 Number elementBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.36SummaryBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.37New attributes to existing form elementsNew form elements in HTML5Chapter 4, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 38Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References