Content HTML Forms HTML Form Elements HTML Input

Content • • HTML Forms HTML Form Elements HTML Input Types HTML 5 Input Types HTML Input Attributes HTML 5 Introduction 2

Content • • • HTML 5 Semantic Elements HTML 5 Migration HTML 5 Canvas HTML 5 SVG HTML 5 Video HTML 5 Audio 3

HTML Forms The <form> Element HTML forms are used to collect user input. <form>. form elements. </form> The <input> Element The <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) 4

HTML Forms (cont. ) Text Input <form> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form> 5

HTML Forms (cont. ) Radio Button Input <form> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female </form> 6

HTML Forms (cont. ) The Submit Button <form action="action_page. php"> First name: <input type="text" name="firstname" value="Mickey"> Last name: <input type="text" name="lastname" value="Mouse"> <input type="submit" value="Submit"> </form> 7

HTML Forms (cont. ) The Action Attribute The action attribute defines the action to be performed when the form is submitted. <form action="action_page. php"> The Method Attribute The 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"> 8

HTML Form Elements The <input> Element The most important form element is the <input> element. The <input> element can vary in many ways, depending on the type attribute. 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> 9

HTML Form Elements The <textarea> Element <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> The <button> Element <button type="button" onclick="alert('Hello World!')">Click Me!</button> 10

HTML Form Elements HTML 5 <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 Elements HTML 5 <keygen> Element <form action="action_page. php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"> </form> 12

HTML Form Elements HTML 5 <output> Element <form action="action_page. asp" oninput="x. value=parse. Int(a. value)+parse. Int(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> <input type="submit"> </form> 13

HTML Input Types Input Type: text <form> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form> Input Type: password <form> User name: <input type="text" name="username"> User password: <input type="password" name="psw"> </form> 14

HTML Input Types (cont. ) Input Type: submit <form action="action_page. php"> First name: <input type="text" name="firstname" value=""> <input type="submit" value="Submit"> </form> Input Type: radio <form> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female </form> 15

HTML Input Types (cont. ) Input Type: checkbox <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <input type="checkbox" name="vehicle" value="Car">I have a car </form> Input Type: button <input type="button" onclick="alert('Hello World!')" value="Click Me!"> 16

HTML 5 Input Types HTML 5 added several new input types: – color – 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

HTML 5 Input Types (cont. ) Input Type: date <form> Birthday: <input type="date" name="bday"> </form> Input Type: color <form> Select your favorite color: <input type="color" name="favcolor"> </form> 18

HTML 5 Input Types (cont. ) Input Type: range <form> <input type="range" name="points" min="0" max="10"> </form> Input Type: email <form action="action_page. php"> E-mail: <input type="email" name="email"> <input type="submit"> </form> 19

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

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

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

HTML 5 Introduction What is New in HTML 5? The DOCTYPE declaration for HTML 5 is very simple: <!DOCTYPE html> The character encoding (charset) declaration is also very simple: <meta charset="UTF-8"> HTML 5 Example: <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document. . . </body> </html> 23

HTML 5 Introduction (cont. ) New HTML 5 Elements The 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

HTML 5 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: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content. New Semantic Elements in HTML 5 25

HTML 5 Semantic Elements (cont. ) HTML 5 <section> Element <section> <h 1>WWF</h 1> <p>The World Wide Fund for Nature (WWF) is. . </p> </section> HTML 5 <article> Element <article> <h 1>What Does WWF Do? </h 1> <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> 26

HTML 5 Semantic Elements (cont. ) HTML 5 <header> Element <article> <header> <h 1>What Does WWF Do? </h 1> <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> HTML 5 <footer> Element <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto: someone@example. com"> someone@example. com</a>. </p> </footer> 27

HTML 5 Semantic Elements (cont. ) HTML 5 <nav> Element <nav> </nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">Java. Script</a> | <a href="/jquery/">j. Query</a> HTML 5 <aside> Element <p>My family and I visited The Epcot center this summer. </p> <aside> <h 4>Epcot Center</h 4> <p>The Epcot Center is a theme park in Disney World, Florida. </p> </aside> 28

HTML 5 Migration from HTML 4 to HTML 5 Typical HTML 4 Typical HTML 5 <div id="header"> <header> <div id="menu"> <nav> <div id="content"> <section> <div id="post"> <article> <div id="footer"> <footer> 29

HTML 5 Canvas The 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. Basic Canvas Example <canvas id="my. Canvas" width="200" height="100" style="border: 1 px solid #000000; "> </canvas> Drawing with Java. Script var c = document. get. Element. By. Id("my. Canvas"); var ctx = c. get. Context("2 d"); ctx. fill. Style = "#FF 0000"; ctx. fill. Rect(0, 0, 150, 75); 30

HTML 5 Canvas (cont. ) Draw a Line var c = document. get. Element. By. Id("my. Canvas"); var ctx = c. get. Context("2 d"); ctx. move. To(0, 0); ctx. line. To(200, 100); ctx. stroke(); Draw a Circle var c = document. get. Element. By. Id("my. Canvas"); var ctx = c. get. Context("2 d"); ctx. begin. Path(); ctx. arc(95, 50, 40, 0, 2*Math. PI); ctx. stroke(); 31

HTML 5 SVG What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W 3 C recommendation SVG Circle <!DOCTYPE html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"fill="yellow" /> </svg> </body> </html> 32

HTML 5 SVG (cont. ) SVG Rectangle <svg width="400" height="100"> <rect width="400" height="100" style="fill: rgb(0, 0, 255); strokewidth: 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> 33

HTML 5 Video The HTML <video> Element <video width="320" height="240" controls> <source src="movie. mp 4" type="video/mp 4"> <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. mp 4" type="video/mp 4"> <source src="movie. ogg" type="video/ogg"> Your browser does not support the video tag. </video> 34

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

THE END 36