CHAPTER 2 HTML & HTML5 II อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1

Content HTML Forms HTML Form Elements HTML Input Types HTML5 Input Types HTML Input Attributes HTML5 Attributes HTML5 Introduction 2

Content HTML5 Semantic Elements HTML5 Migration HTML5 Canvas HTML5 SVG HTML5 Video HTML5 Audio 3

HTML Forms The Element HTML forms are used to collect user input.. form elements. 4 The Element The element is the most important form element. TypeDescription textDefines normal text input radioDefines radio button input (for selecting one of many choices) submitDefines a submit button (for submitting the form)

HTML Forms (cont.) Text Input First name: Last name: 5

HTML Forms (cont.) Radio Button Input Male Female 6

HTML Forms (cont.) The Submit Button First name: Last name: 7

HTML Forms (cont.) The Action Attribute The action attribute defines the action to be performed when the form is submitted. 8 The Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms: or

HTML Form Elements The Element The most important form element is the element. The element can vary in many ways, depending on the type attribute. 9 The Element (Drop-Down List) The element defines a drop-down list: Volvo Saab Fiat Audi

HTML Form Elements The Element The cat was playing in the garden. 10 The Element Click Me!

HTML Form Elements HTML5 Element 11

HTML Form Elements HTML5 Element Username: Encryption: 12

HTML Form Elements HTML5 Element = 13

HTML Input Types Input Type: text First name: Last name: 14 Input Type: password User name: User password:

HTML Input Types (cont.) Input Type: submit First name: 15 Input Type: radio Male Female

HTML Input Types (cont.) Input Type: checkbox I have a bike I have a car 16 Input Type: button

HTML5 Input Types HTML5 added several new input types: – color – date – datetime – datetime-local – – month – number – range – search – tel – time – url – week *Input types, not supported by old web browsers, will behave as input type text. 17

HTML5 Input Types (cont.) Input Type: date Birthday: 18 Input Type: color Select your favorite color:

HTML5 Input Types (cont.) Input Type: range 19 Input Type:

HTML Input Attributes The value Attribute First name: Last name: 20 The readonly Attribute First name: Last name:

HTML Input Attributes (cont.) The disabled Attribute First name: Last name: 21 The size Attribute First name: Last name:

HTML5 Attributes HTML5 added the following attributes for : – autocomplete – autofocus – form – formaction – formenctype – formmethod – formnovalidate – formtarget – height and width – list 22 – min and max – multiple – pattern (regexp) – placeholder – required – step and the following attributes for : – autocomplete – novalidate

HTML5 Introduction What is New in HTML5? The DOCTYPE declaration for HTML5 is very simple: The character encoding (charset) declaration is also very simple: HTML5 Example: Title of the document Content of the document

HTML5 Introduction (cont.) New HTML5 Elements The most interesting new elements are: New semantic elements like,,, and. New form control attributes like number, date, time, calendar, and range. New graphic elements: and. New multimedia elements: and. 24

HTML5 Semantic Elements What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements:,, and - Clearly defines its content. 25 New Semantic Elements in HTML5

HTML5 Semantic Elements (cont.) HTML5 Element WWF The World Wide Fund for Nature (WWF) is HTML5 Element What Does WWF Do? WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.

HTML5 Semantic Elements (cont.) HTML5 Element What Does WWF Do? WWF's mission: WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature. 27 HTML5 Element Posted by: Hege Refsnes Contact information:

HTML5 Semantic Elements (cont.) HTML5 Element HTML | CSS | JavaScript | jQuery 28 HTML5 Element My family and I visited The Epcot center this summer. Epcot Center The Epcot Center is a theme park in Disney World, Florida.

HTML5 Migration Migration from HTML4 to HTML5 29 Typical HTML4Typical HTML5

HTML5 Canvas The HTML element is used to draw graphics on a web page. The graphic to the left is created with. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text. 30 Basic Canvas Example Drawing with JavaScript var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);

HTML5 Canvas (cont.) 31 Draw a Line var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); Draw a Circle var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

HTML5 SVG 32 What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation SVG Circle

HTML5 SVG (cont.) 33 SVG Rectangle SVG Rounded Rectangle

HTML5 Video 34 The HTML Element Your browser does not support the video tag. HTML Autoplay Your browser does not support the video tag.

HTML5 Audio 35 The HTML Element Your browser does not support the audio element.

36 THE END