The document provides an overview of HTML5 forms, including new form attributes, input types, and elements. It discusses features like autocomplete, novalidate, and autofocus attributes that control form validation and autofilling. The document also notes that HTML5 makes marking up forms easier for developers and provides better consistency and performance for users by handling validation natively in the browser.
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible with earlier versions of CSS. CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
CSS3 Basic Ideas Tags and Animations, Learn the Basic of CSS 3 with the help of this slideshare slideshow, detailed slides about CSS 3 are coming soon, Flash and Animations in CSS3 will be uploaded soon to teach you get rid of Flash, Javascript Animations, Silverlight etc,.. so why wait get ready to be a Rock-star in CSS3 designing. Keep in mind that in near future web technologies are going to rule the technology world and HTML, CSS and Javascript is going to play a key role in it.
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible with earlier versions of CSS. CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
CSS3 Basic Ideas Tags and Animations, Learn the Basic of CSS 3 with the help of this slideshare slideshow, detailed slides about CSS 3 are coming soon, Flash and Animations in CSS3 will be uploaded soon to teach you get rid of Flash, Javascript Animations, Silverlight etc,.. so why wait get ready to be a Rock-star in CSS3 designing. Keep in mind that in near future web technologies are going to rule the technology world and HTML, CSS and Javascript is going to play a key role in it.
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
2. Agenda
History, Vision & Future of HTML5
Getting Started With HTML5
Structure of a Web Page
Forms
Audio and Video
HTML5 Canvas
Introduction to Data Storage
Introduction to Geo location
3. 1. History, Vision & Future of HTML5
1.1 What Is HTML5?
• Successor of HTML 4.01 and XHTML 1.1
• It comes with new tags, features and APIs
• Below is a non exhaustive list of features that tend to be labelled as "HTML5" in the
medias:
– New structural elements (<header>, <footer>, <nav> and more)
– Forms 2.0 and client-side validation
– Native browser support for audio and video (<video>, <audio>)
– Canvas API and SVG
– Web storage
– Offline applications
– Geolocation
– Drag & Drop
– Web Workers
– New communications API (Server Sent Events, Web Sockets, …)
4. 1. History, Vision & Future of HTML5
1.2 History of HTML5?
• December 1997: HTML 4.0 is published by the W3C
• February - March 1998: XML 1.0 is published
• December 1999 - January 2000: ECMAScript 3rd Edition, XHTML 1.0 (Basically
HTML tags
reformulated in XML) and, HTML 4.01 recommendations are published
• May 2001: XHTML 1.1 recommendation is published
• August 2002: XHTML 2.0 first working draft is released.
• December 2002: XHTML 2.0 second working draft published.
• January 2008: First W3C working draft of HTML5 is published!!
5. 1. History, Vision & Future of HTML5
1.3 Future of HTML5
• 84% of Developers Plan to Adopt Key HTML5 Features
• The key to understanding HTML5 is that it is not one, but a group of technologies.
Within HTML5, developers have a tremendous amount of choice regarding what they
use and what they don’t use
• The power of HTML5 being ready for prime-time can be seen in Microsoft’s choice to
utilize it in Windows 8
Still on the fence with adopting HTML5 in your next
project?
6. 2. Getting started with HTML5
Wondering what it takes to get it started?
• Any Text editor such as Notepad++, Editplus, Textmate, Dream weaver
• Modern browsers such as Firefox 3.5 +, IE9, chrome, safari
• Prior knowledge of HTML 4
7. 3. Structure of Web page
3.1. New and Updated HTML5 Elements
HTML5 introduces 28 new elements:
<section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <figure>, <figcaption>, <vi
deo>, <audio>, <source>, <embed>, <mark>,<progress>, <meter>, <time>, <ruby>, <rt>, <rp>,
<wbr>, <canvas>, <command>, <details>,<summary>, <datalist>, <keygen> and <output>
An HTML page first starts with the DOCTYPE declaration
HTML5 also update some of the previous existing elements to better reflect how they are used on
the Web or to make them more useful such as:
• The <a> element can now also contain flow content instead of just phrasing content
• The <hr> element is now representing a paragraph-level thematic break
• The <cite> element only represent the title of a work
• The <strong> element is now representing importance rather than strong emphasis
8. 3. Structure of Web page
3.2. First HTML5 webpage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
That’s all I need to create my first HTML5 page
</body>
</html>
Output: Click here
9. 3. Structure of Web page
3.3. New Semantic Elements
<nav>: Represents a major navigation block. It groups links to other pages or to parts of the
current page.
<nav> does not have to be used in every place you can find links.
For instance, footers often contains links to terms of service, copyright page and such,
the <footer> element would be sufficient in that case
10. 3. Structure of Web page
3.3. New Semantic Elements
<Header>: tag specifies a header for a document or section.
However, we mustn't think that "header" is only for masthead of a website. "header" can be use as a
heading of an blog entry or news article as every article has its title and published date and time
11. 3. Structure of Web page
3.3. New Semantic Elements
<article>: The web today contains a ocean of news articles and blog entries. That gives W3C a
good reason to define an element for article instead of <div class="article">.
We should use article for content that we think it can be distributable. Just like news or blog entry
can we can share in RSS feed
"article" element can be nested in another "article" element.
An article element doesn't just mean article content. You can have header andfooter element in an
article. In fact, it is very common to have header as each article should have a title.
12. 3. Structure of Web page
3.3. New Semantic Elements
<aside>: The "aside" element is a section that somehow related to main content, but it can be
separate from that content
13. 3. Structure of Web page
3.3. New Semantic Elements
<footer>: Similarly to "header" element, "footer" element is often referred to the footer of a web
page. Well, most of the time, footer can be used as what we thought.
Please don't think you can only have one footer per web document, you can have a footer in every
section, or every article.
14. 3. Structure of Web page
3.3. New Semantic Elements
<Progress>: The new "progress" element appears to be very similar to the "meter" element. It is
created to indicate progress of a specific task.
The progress can be either determinate OR interderminate. Which means, you can use "progress"
element to indicate a progress that you do not even know how much more work is to be done yet.
Progress of Task A : <progress value="60" max="100">60%</progress>
15. 3. Structure of Web page
3.3. New Semantic Elements
<meter>: "Meter" is a new element in HTML5 which represenet value of a known range as a
gauge. The keyword here is "known range". That means, you are only allowed to use it when you
are clearly aware of its minimum value and maximum value.
One example is score of rating. I would rate this movie <meter min="0" max="10" value="8">8 of
10</meter>.
16. 3. Structure of Web page
3.3. New Semantic Elements
<mark>: The mark <mark> element represents a run of text in one document marked or
highlighted for reference purposes, due to its relevance in another context.
Basically, it is used to bring the reader's attention to a part of the text that might not have been
17. 3. Structure of Web page
3.3. New Semantic Elements
<figure>: The <figure> tag specifies self-contained content, like illustrations, diagrams, photos,
code listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent
of the main flow, and if removed it should not affect the flow of the document
19. 3. Structure of Web page
3.3. Designing blog with html5
IE layout
There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work.
You can force it to quite easily with a JavaScript hack
document.createElement('element name').
HTML 5 enabling script which I use in the header to conjure all the missing elements into existence
all at once.
20. 3. Structure of Web page
3.3. why so much fuss for semantics in html5
Well, they add semantics to the page. The browser now knows which area of your site is the header or
the footer because there are header and footer elements, whereas div might be called “branding
The first is for search engine use; it’s easy to imagine Messrs Google or Yahoo! giving lower weighting
to content in footer elements, or extra weight to content in the header.
site navigable for people with disabilities. People with learning difficulties might instruct their
browser always to put the articles before the navigation
22. 4. Forms
4.1. Introduction
HTML5 web forms have introduced new form elements, input types, attributes, and
other features. Many of these features we’ve been using in our interfaces for years:
form validation, combo boxes, placeholder text, and the like. The difference is that
where before we had to resort to JavaScript to create these behaviors, they’re now
available directly in the browser; all you need to do is set an attribute in your markup
to make them available.
23. 4. Forms
4.1. Introduction
HTML5 web forms have introduced new form elements, input types, attributes, and
other features. Many of these features we’ve been using in our interfaces for years:
form validation, combo boxes, placeholder text, and the like. The difference is that
where before we had to resort to JavaScript to create these behaviors, they’re now
available directly in the browser; all you need to do is set an attribute in your markup
to make them available.
HTML5 not only makes marking up forms easier on the developer, it’s also better
for the user. With client-side validation being handled natively by the browser,
there will be greater consistency across different sites, and many pages will load
faster without all that redundant JavaScript.
Now Lets look at
HTML5 Form Attributes
HTML5 Input Types
HTML5 Form Elements
24. 4. Forms
4.1. form attributes
<form> / <input> autocomplete Attribute
The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user
has entered before.
Example: ../forms/autocomplete.html
25. 4. Forms
4.1. form attributes
<form> / <input> novalidate Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
Example: ../forms/noValidate.html
26. 4. Forms
4.2. input attributes
<input> autofocus Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the page
loads.
Only one form element can have autofocus in a given page.
Example: ../forms/autofocus.html
27. 4. Forms
4.2. input attributes
<input> formaction Attribute
• The formaction attribute specifies the URL of a file that will process the input control when the
form is submitted.
• The formaction attribute overrides the action attribute of the <form> element.
• Note: The formaction attribute is used with type="submit" and type="image"
Example: ../forms/formaction.html
28. 4. Forms
4.2. input attributes
<input> formmethod Attribute
• The formmethod attribute defines the HTTP method for sending form-data to the action URL.
• The formmethod attribute overrides the method attribute of the <form> element.
• Note: The formmethod attribute can be used with type="submit" and type="image".
Example: ../forms/formmethod.html
29. 4. Forms
4.2. input attributes
<input> formnovalidate Attribute
• The novalidate attribute is a boolean attribute.
• When present, it specifies that the <input> element should not be validated when submitted.
• The formnovalidate attribute overrides the novalidate attribute of the <form> element.
• Note: The formnovalidate attribute can be used with type="submit".
Example: ../forms/formnovalidate.html
30. 4. Forms
4.2. input attributes
<input> formtarget Attribute
• The novalidate attribute is a boolean attribute.
• When present, it specifies that the <input> element should not be validated when submitted.
• The formnovalidate attribute overrides the novalidate attribute of the <form> element.
• Note: The formnovalidate attribute can be used with type="submit".
Example: ../forms/formtarget.html
31. 4. Forms
4.2. input attributes
<input> list Attribute
• Datalists are currently only supported in Firefox and Opera, but they are very cool.
• They fulfill a common requirement: a text field with a set of predefined autocomplete
• options.
Example: ../forms/datalist.html
32. 4. Forms
4.2. input attributes
<input> required Attribute
The Boolean required attribute tells the browser to only submit the form if the field
in question is filled out correctly. Obviously, this means that the field can’t be left
empty, but it also means that, depending on other attributes or the field’s type, only
certain types of values will be accepted.
If a required field is empty or invalid, the form will fail to submit, and focus will
move to the first invalid form element.
The required attribute can be set on any input type except button, range, color,
and hidden, all of which generally have a default value.
• Example: ../forms/required.html
33. 4. Forms
4.2. input attributes
<input> placeholder Attribute
The placeholder attribute allows a short hint to be displayed inside the form element,
space permitting, telling the user what data should be entered in that field.
The placeholder text disappears when the field gains focus, and reappears on blur
if no data was entered.
Developers have provided this functionality with JavaScript
for years, but in HTML5 the placeholder attribute allows it to happen natively, with
no JavaScript required.
• Example: ../forms/placeholder.html
34. 4. Forms
4.2. input attributes
<input> readonly Attribute
The readonly attribute is similar to the disabled attribute: it makes it impossible
for the user to edit the form field. Unlike disabled, however, the field can receive
focus, and its value is submitted with the form.
35. 4. Forms
4.2. input attributes
<input> multiple Attribute
The multiple attribute, if present, indicates that multiple values can be entered in
a form control. While it has been available in previous versions of HTML, it only applied to the select
element. In HTML5, it can be added to email and file input types as well.
If present, the user can select more than one file, or include several comma-separated email
addresses.
At the time of writing, multiple file input is only supported in Chrome, Opera, and
Firefox.
Select images: <input type="file" name="img" multiple="multiple" />
36. 4. Forms
4.3. input types
Introduction
you’re familiar with: checkbox, text, password, and submit. Here’s the full list of types that were
available before HTML5:
■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text
HTML5 gives us input types that provide for more data-specific UI elements and
native data validation. HTML5 has a total of 13 new input types:
■ search
■ email
■ url
■ tel
■ datetime
■ date
■ month
■ week
■ time
■ datetime-local
■ number
■ range
■ color
37. 4. Forms
4.3. input types
<input type> search
The search type is used for search fields
Search type is only supported in Chrome, Opera, and
safari.
Search Google: <input type="search" name="googlesearch" />
38. 4. Forms
4.3. input types
<input type> email
The email type (type="email") is, unsurprisingly, used for specifying one or more email addresses.
It supports the Boolean multiple attribute, allowing for multiple, comma-separated email
addresses.
Search type is only supported in Chrome, Opera, firefox and safari.
E-mail: <input type="email" name="usermail" />
39. 4. Forms
4.3. input types
<input type> url
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
Search type is only supported in Chrome, Opera, firefox
Add your homepage: <input type="url" name="homepage" />
40. 4. Forms
4.3. input types
<input type> tel
For telephone numbers, use the tel input type (type="tel"). Unlike the url and email types,
the tel type doesn’t enforce a particular syntax or pattern. Letters and numbers—indeed, any
characters other than new lines or carriage returns—are valid.
Telephone: <input type="tel" name="usrtel" />
41. 4. Forms
4.3. input types
<input type> range
The range input type (type="range") displays a slider control in browsers that
support it (currently Opera and WebKit). As with the number type, it allows the
min, max, and step attributes.
Define a control for entering a number whose exact value is not important
<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
<input type="range" min="1" max="10" name="rating" type="range">
42. 4. Forms
4.3. input types
<input type> color
The color input type (type="color") provides the user with a color picker
Supported only in Opera
Select your favorite color: <input type="color" name="favcolor" />
43. 4. Forms
4.3. new html5 element
<input type> keygen
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server. The public key could be used
to generate a client certificate to authenticate the user in the future.
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
44. 4. Forms
4.3. new html5 element
<input type> output
The <output> element represents the result of a calculation (like one performed by a script).
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
46. 5. Audio & video
4.3. new html5 element
<audio>
Until now, there has not been a standard for playing audio files on a web page.
Today, most audio files are played through a plug-in (like flash). However, different browsers may
have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page:
the <audio> element.
Example: ../audioVideo/audio.html
47. 5. Audio & video
4.3. new html5 element
<audio> : Add Fallback to flash
To be safe, we need to add the fallback to a Flash audio player, in case the browser doesn't support
any of the formats we specified. For instance, Firefox 3.5 only supports the audio tag with Ogg
format, but we might only have the mp3 file available
48. 5. Audio & video
4.3. new html5 element
<video>
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers may have
different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page:
the <video> element.
49. 5. Audio & video
4.3. new html5 element
<video attributes>
51. 6. Canvas
6.1. What is Canvas
With HTML5’s Canvas API, we’re no longer limited to drawing rectangles on our sites.
We can draw anything we can imagine, all through JavaScript. This can improve
the performance of our websites by avoiding the need to download images off the network.With
canvas, we can draw shapes and lines, arcs and text, gradients and patterns. In addition, canvas
gives us the power to manipulate pixels in images and even video.
The Canvas 2D Context spec is supported in:
■ Safari 2.0+
■ Chrome 3.0+
■ Firefox 3.0+
■ Internet Explorer 9.0+
■ Opera 10.0+
■ iOS (Mobile Safari) 1.0+
■ Android 1.0+
54. 6. Canvas
6.2. Drawing a canvas
We obtain our drawing context by calling the getContext method and passing it
the string "2d", since we’ll be drawing in two dimensions:
65. 7. Geolocation
7.1. Introducton
The first new API we’ll cover is geolocation. Geolocation allows your visitors to share their current
location.
Depending on how they’re visiting your site, their location may be determined by any of the following:
■ IP address
■ wireless network connection
■ cell tower
■ GPS hardware on the device
Privacy Concerns
Not everyone will want to share their location with you, as there are privacy concerns
inherent to this information. Thus, your visitors must opt in to share their location.
Nothing will be passed along to your site or web application unless the user agrees.
The decision is made via a prompt at the top of the browser. Figure 10.1 shows what
this prompt looks like in Chrome.
66. 7. Geolocation
7.2. Using geolocation
With geolocation, you can determine the user’s current position. You can also be notified of changes to
their position, which could be used, for example, in a web application that provided real-time
driving directions.
Geolocation: methods
These different tasks are controlled through the three methods currently available
in the Geolocation API:
■ getCurrentPosition
■ watchPosition
■ clearPosition
67. 7. Geolocation
7.3. Using geolocation
The example below is a simple Geolocation example returning the latitude and longitude of the user's
position:
Check if Geolocation is supported
If supported, run the getCurrentPosition() method. If not, display a message to the user
If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in
the parameter ( showPosition )
The showPosition() function gets the displays the Latitude and Longitude
68. 7. Geolocation
7.3. Using geolocation
The example below is a simple Geolocation example returning the latitude and longitude of the user's
position with error handling:
71. 8. Web storage
8.1. Introduction
The Web Storage API defines a standard for how we can save simple data locally
on a user’s computer or device. Before the emergence of the Web Storage standard, web developers
often stored user information in cookies, or by using plugins. With Web Storage, we now have a
standardized definition for how to store up to 5MB of simple data created by our websites or web
applications. Better still, Web Storage already works in Internet Explorer 8.0!
Web Storage is a great complement to Offline Web Applications, because you need somewhere to store
all that user data while you’re working offline, andWeb Storage provides it.
Two kinds of storage
session Storage
Session storage lets us keep track of data specific to one window or tab. It allows us to isolate
information in each window. Even if the user is visiting the same site in two windows, each
window will have its own individual session storage object and thus have separate, distinct data.
Session storage is not persistent—it only lasts for the duration of a user’s session
on a specific site (in other words, for the time that a browser window or tab is open
and viewing that site).
Local Storage
Unlike session storage, local storage allows us to save persistent data to the user’s computer, via the
browser. When a user revisits a site at a later date, any data saved to local storage can be
retrieved.
72. 8. Web storage
8.2. local storage v/s cookies
Local storage can at first glance seem to play a similar role to HTTP cookies, but there are a few key
differences. First of all, cookies are intended to be read on the server side, whereas local storage is
only available on the client side.
If you need your server-side code to react differently based on some saved values, cookies are the way
to go. Yet, cookies are sent along with each HTTP request to your server and this can result in
significant overhead in terms of bandwidth.
Local storage, on the other hand, just sits on the user’s hard drive waiting to be read, so it costs
nothing to use
.
In addition, we have significantly more size to store things using local storage. With cookies, we could
only store 4KB of information in total.
With local storage, the maximum is 5MB.
73. 8. Web storage
8.3. what web storage data look like
Data saved in Web Storage is stored as key/value pairs.
A few examples of simple key/value pairs:
■ key: name, value: suresh
■ key: trainer, value: html5
■ key: email, value: sureshjain17@gmail.com
Getting and setting our data
74. 8. Web storage
8.4. getItem and setItem methods
We store a key/value pair in either local or session storage by calling setItem, and
we retrieve the value from a key by calling getItem.
If we want to store the data in or retrieve it from session storage, we simply call setItem or getItem on
the sessionStorage global object.
If we want to use local storage instead, we’d call setItem or getItem on the localStorage global object.
For example, if we’d like to save the value "6“ under the key "size", we’d call setItem like this:
localStorage.setItem("size", "6");
To retrieve the value we stored to the "size" key, we’d use the getItem method, specifying only the key:
var size = localStorage.getItem("size");
ShortCut
var size = localStorage["size"];
Convert stored data using var size = parseInt(localStorage.getItem("size"));
75. 8. Web storage
8.5. remember me functionality using local storage
We can use Web Storage to add a “Remember me on this computer” checkbox to our registration
page. This way, once the user has registered, any other forms they may need to fill out on the site in
the future would already have this information.
onready 2 methods are called
1.Loading stored details
2.On checkbox check trigger save data method
76. 8. Web storage
8.6 viewing localstorage values with web inspector
We can use the Safari or ChromeWeb Inspector to look at, or even change, the values
of our local storage. In Safari, we can view the stored data under the Storage tab, as
shown in Figure
Editor's Notes
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?
Wondering what it takes to get started with html5?