Web Technologies and Programming Lecture 11

1Web Technologies and ProgrammingLecture 11 2HTML 5 Form elments3Summary of the previous lectureCreating forms in HTMLCommon Form AttributesWhen to Use GET AND POST?Form elementsTextbox Password FieldHidden FieldCheckboxRadio ButtonText AreaSelect ListSubmit ButtonReset ButtonAdding form elements4OutlineHTML5 enhancements in formXHTML51. HTML-5 form enhancementHTML5 enhances the forms in two waysAdding new attributes to exiting elementsNew elements61.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 user71.1 The required attribute8Input typeRequired attribute1.1 The required attribute9Error 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 field101.2 The placeholder attribute11placeholder1.2 The placeholder attribute12Hint 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 valid131.3 The pattern attribute14Allowed charactersValid lengthPattern attribute1.3 The pattern attribute15Invalid 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 times161.3 The pattern attributeExample patterns:17Only alphabetsAllowed lengthOnly alphabetsAllowed lengthSpace is allowedLast nameAllowed length1.3 The pattern attributeExample patterns:18Only 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 disabled191.4 The disabled attribute20Input field is disabled1.4 The disabled attribute21Input field is disabledDisabled field1.5 The read only attributeread only attribute:it makes it impossible for the user to edit the form fieldthe field can receive focus221.6 The autocomplete attribute23The autocomplete attribute:this will be a drop-down list that appears when the user begins typing1.6 The autocomplete attribute24autocomplete1.7 The datalist element25The 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 element26List attributeDatalist startsoptionsDatalist ends1.7 The datalist element272. HTML 5 new elements28Email elementDate elementNumber elementColor element2.1 Email element29The email element:It ensures that user enters a valid email address2.1 Email element30Input type2.2 Date element31The date element:It shows a calendar to user to select a date2.2 Date element322.3 Color element33The color element:It facilitate the user to choose a color2.3 Color element.342.3 Color element.352.4 Number element36The number element:It ensures that user enters only a numeric value2.4 Number element372.4 Number element383. XHTML39XHTMLEXtensible HyperText Markup LanguageXHTML is almost identical to HTMLStricter version than HTMLXHTML is HTML defined as an XML applicationXHTML is supported by all major browsers3. XHTML40  Bad HTML  This is a paragraphAbove will work in browsers.Above can work if used as HTML but it will not work as XHTML. 3. XHTML41In XHTMLXHTML DOCTYPE is mandatoryThe xmlns attribute in is mandatory, , , and are mandatory3. XHTML42In XHTML, elements must beXHTML elements must be properly nestedXHTML elements must always be closedXHTML elements must be in lowercaseXHTML documents must have one root element3. XHTML43In XHTML, attributes must beAttribute names must be in lower caseAttribute values must be quotedAttribute minimization is forbidden3. XHTML44ExampleThis is wrong:This is a paragraphThis is another paragraphThis is correct:This is a paragraphThis is another paragraph3. XHTML45ExampleThis is wrong:A break: A horizontal rule: This is correct:A break: A horizontal rule: 4. How to Convert from HTML to XHTML46Add an XHTML to the first line of every pageAdd an xmlns attribute to the html element of every pageChange all element names to lowercaseClose all empty elementsChange all attribute names to lowercaseQuote all attribute values4. XHTML: Important Differences from HTML47Document StructureXHTML DOCTYPE is mandatoryThe xmlns attribute in is mandatory, , , and are mandatory5. XML48By combining the strengths of HTML and XML, XHTML was developed.XHTML is HTML redesigned as XML.XML is a markup language where documents must be marked up correctly (be "well-formed").Summary49New attributes to existing form elementsNew form elements in HTML5XHTML is the strict form of HTMLTHANK YOU50