bernard-casey
Uploaded by
13 SLIDES
259 VUES
130LIKES

Exploring HTML5 Features: Forms, Media, and Graphics in Web Development

DESCRIPTION

Discover the powerful features of HTML5 that enhance web development. This document covers essential elements such as the for 2D drawing, and for media playback, and local storage support. It introduces new content-specific elements like , , , , and . Additionally, learn about advanced form controls like date, time, email, and more, including input types for user interaction. Experience practical form examples showcasing text, password fields, radio buttons, checkboxes, dropdowns, and text areas.

1 / 13

Télécharger la présentation

Exploring HTML5 Features: Forms, Media, and Graphics in Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Minimum HTML5 Document <!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>

  2. The <canvas> element for 2D drawing • The <video> and <audio> elements for media playback • Support for local storage • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> • New form controls, like calendar, date, time, email, url, search

  3. Form <form>.input elements.</form>

  4. Form <form>First name: <input type="text“ name="fname"><br>Last name: <input type="text" name="lname"></form>

  5. Form • Password Field <form>Password: <input type="password" name="pwd"> </form>

  6. Form • Radio Buttons <form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>

  7. Checkboxes <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>

  8. Form • Submit Button <form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>

  9. <select> <select>   <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option value="mercedes">Mercedes</option>  <option value="audi">Audi</option></select>

  10. <placeholder> <form action="demo_form.asp">  <input type="text" name="fname" placeholder="First name"><br>  <input type="text" name="lname" placeholder="Last name"><br>  <input type="submit" value="Submit"></form> 

  11. <textarea> <textarea rows="4" cols="50">At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>

  12. <fieldset> <legend> <!DOCTYPE html> <html> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form> </body> </html>

More Related