CHAPTER 2HTML & 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 <form> ElementHTML forms are used to collect user input.<form>.form elements.</form>

4

The <input> ElementThe <input> element is the most important form element.

Type Description

text Defines normal text input

radio Defines radio button input (for selecting one of many choices)

submit Defines a submit button (for submitting the form)

HTML Forms (cont.)

Text Input<form>First name:<br><input type="text" name="firstname"><br>Last name:<br><input type="text" name="lastname"></form>

5

HTML Forms (cont.)

Radio Button Input<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form>

6

HTML Forms (cont.)

The Submit Button<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>

7

HTML Forms (cont.)

The Action AttributeThe action attribute defines the action to be performed when the form is submitted.

<form action="action_page.php">

8

The Method AttributeThe method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

<form action="action_page.php" method="GET">or<form action="action_page.php" method=“POST">

HTML Form Elements

The <input> ElementThe most important form element is the <input> element.The <input> element can vary in many ways, depending on the type attribute.

9

The <select> Element (Drop-Down List)The <select> element defines a drop-down list:

<select name="cars"> <option value="volvo“ selected>Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>

HTML Form Elements

The <textarea> Element<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.</textarea>

10

The <button> Element<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML Form Elements

HTML5 <datalist> Element<form action="action_page.php"><input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist> </form>

11

HTML Form ElementsHTML5 <keygen> Element<form action="action_page.php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"></form>

12

HTML Form ElementsHTML5 <output> Element<form action="action_page.asp"oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" name="a" value="50">100 +<input type="number" id="b" name="b" value="50">=<output name="x" for="a b"></output><br><br>

<input type="submit">

</form>

13

HTML Input TypesInput Type: text<form>First name:<br><input type="text" name="firstname"><br>Last name:<br><input type="text" name="lastname"></form>

14

Input Type: password<form>User name:<br><input type="text" name="username"><br>User password:<br><input type="password" name="psw"></form>

HTML Input Types (cont.)Input Type: submit<form action="action_page.php">First name:<br><input type="text" name="firstname" value=""><br><input type="submit" value="Submit"></form>

15

Input Type: radio<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form>

HTML Input Types (cont.)Input Type: checkbox<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

16

Input Type: button<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 Input TypesHTML5 added several new input types:

– color– date– datetime– datetime-local– email– 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<form> Birthday: <input type="date" name="bday"></form>

18

Input Type: color<form> Select your favorite color: <input type="color" name="favcolor"></form>

HTML5 Input Types (cont.)Input Type: range<form> <input type="range" name="points" min="0" max="10"></form>

19

Input Type: email<form action="action_page.php"> E-mail: <input type="email" name="email"> <input type="submit"></form>

HTML Input AttributesThe value Attribute<form action="">First name:<br><input type="text" name="firstname" value="John"><br>Last name:<br><input type="text" name="lastname"></form>

20

The readonly Attribute<form action="">First name:<br><input type="text" name="firstname" value="John" readonly><br>Last name:<br><input type="text" name="lastname"></form>

HTML Input Attributes (cont.)The disabled Attribute<form action="">First name:<br><input type="text" name="firstname" value="John" disabled><br>Last name:<br><input type="text" name="lastname"></form>

21

The size Attribute<form action="">First name:<br><input type="text" name="firstname" value="John" size="40"><br>Last name:<br><input type="text" name="lastname"></form>

HTML5 AttributesHTML5 added the following attributes for <input>:

– autocomplete– autofocus– form– formaction– formenctype– formmethod– formnovalidate– formtarget– height and width– list

22

– min and max– multiple– pattern (regexp)– placeholder– required– stepand the following attributes for <form>:– autocomplete– novalidate

HTML5 IntroductionWhat is New in HTML5?The DOCTYPE declaration for HTML5 is very simple:

<!DOCTYPE html>The character encoding (charset) declaration is also very simple:

<meta charset="UTF-8">HTML5 Example:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title of the document</title></head><body>

Content of the document......</body></html>

23

HTML5 Introduction (cont.)New HTML5 ElementsThe most interesting new elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New form control attributes like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.New multimedia elements: <audio> and <video>.

24

HTML5 Semantic ElementsWhat are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.

25

New Semantic Elements in HTML5

HTML5 Semantic Elements (cont.)HTML5 <section> Element

<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p>

</section>

26

HTML5 <article> Element<article>

<h1>What Does WWF Do?</h1> <p>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.</p>

</article>

HTML5 Semantic Elements (cont.)HTML5 <header> Element

<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>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.</p>

</article>

27

HTML5 <footer> Element<footer>

<p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p>

</footer>

HTML5 Semantic Elements (cont.)HTML5 <nav> Element

<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a>

</nav>

28

HTML5 <aside> Element<p>My family and I visited The Epcot center this summer.</p>

<aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

HTML5 MigrationMigration from HTML4 to HTML5

29

Typical HTML4 Typical HTML5

<div id="header"> <header>

<div id="menu"> <nav>

<div id="content"> <section>

<div id="post"> <article>

<div id="footer"> <footer>

HTML5 CanvasThe HTML <canvas> element is used to draw graphics on a

web page.The graphic to the left is created with <canvas>. It shows

four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

30

Basic Canvas Example<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Drawing with JavaScriptvar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.fillStyle = "#FF0000";ctx.fillRect(0,0,150,75);

HTML5 Canvas (cont.)

31

Draw a Linevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();

Draw a Circlevar 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 GraphicsSVG is used to define graphics for the WebSVG is a W3C recommendation

SVG Circle<!DOCTYPE html><html><body>

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"fill="yellow" /></svg>

</body></html>

HTML5 SVG (cont.)

33

SVG Rectangle<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>

SVG Rounded Rectangle<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /></svg>

HTML5 Video

34

The HTML <video> Element<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video>

HTML <video> Autoplay<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video>

HTML5 Audio

35

The HTML <audio> Element<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>

36

THE END