Submit Search
Upload
HTML5 workshop, forms
•
6 likes
•
4,135 views
Robert Nyman
Follow
Workshop given at Jfokus 2012
Read less
Read more
Technology
Design
Report
Share
Report
Share
1 of 62
Download now
Download to read offline
Recommended
La preciosa firma de Picasso
La preciosa firma de Picasso
Pilar Martinez
Scalaで実装してみる簡易ブロックチェーン
Scalaで実装してみる簡易ブロックチェーン
Hiroshi Ito
Cross Site Scripting: Prevention and Detection(XSS)
Cross Site Scripting: Prevention and Detection(XSS)
Aman Singh
Sql injection
Sql injection
Sasha-Leigh Garret
SQL INJECTION
SQL INJECTION
Mentorcs
Sql injection
Sql injection
Nikunj Dhameliya
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
晃 遠山
Html css
Html css
sloumaallagui1
Recommended
La preciosa firma de Picasso
La preciosa firma de Picasso
Pilar Martinez
Scalaで実装してみる簡易ブロックチェーン
Scalaで実装してみる簡易ブロックチェーン
Hiroshi Ito
Cross Site Scripting: Prevention and Detection(XSS)
Cross Site Scripting: Prevention and Detection(XSS)
Aman Singh
Sql injection
Sql injection
Sasha-Leigh Garret
SQL INJECTION
SQL INJECTION
Mentorcs
Sql injection
Sql injection
Nikunj Dhameliya
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
晃 遠山
Html css
Html css
sloumaallagui1
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
Robert Nyman
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Matteo Magni
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
RORLAB
Loops PHP 04
Loops PHP 04
Spy Seat
Moving to the client - HTML5 is here
Moving to the client - HTML5 is here
Christian Heilmann
Practical PHP by example Jan Leth-Kjaer
Practical PHP by example Jan Leth-Kjaer
COMMON Europe
Html5 forms input types
Html5 forms input types
sinhacp
phptut2
phptut2
tutorialsruby
phptut2
phptut2
tutorialsruby
phptut2
phptut2
tutorialsruby
phptut2
phptut2
tutorialsruby
Zencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda Memoria
Ronald Franz Nina Layme
Zen Coding Cheat Sheet
Zen Coding Cheat Sheet
Faysal Shahi
Real-time search in Drupal with Elasticsearch @Moldcamp
Real-time search in Drupal with Elasticsearch @Moldcamp
Alexei Gorobets
HTML5 New and Improved
HTML5 New and Improved
Timothy Fisher
Date difference[1]
Date difference[1]
shafiullas
Have you tried listening?
Have you tried listening?
Robert Nyman
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Robert Nyman
More Related Content
Similar to HTML5 workshop, forms
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
Robert Nyman
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Matteo Magni
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
RORLAB
Loops PHP 04
Loops PHP 04
Spy Seat
Moving to the client - HTML5 is here
Moving to the client - HTML5 is here
Christian Heilmann
Practical PHP by example Jan Leth-Kjaer
Practical PHP by example Jan Leth-Kjaer
COMMON Europe
Html5 forms input types
Html5 forms input types
sinhacp
phptut2
phptut2
tutorialsruby
phptut2
phptut2
tutorialsruby
phptut2
phptut2
tutorialsruby
phptut2
phptut2
tutorialsruby
Zencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda Memoria
Ronald Franz Nina Layme
Zen Coding Cheat Sheet
Zen Coding Cheat Sheet
Faysal Shahi
Real-time search in Drupal with Elasticsearch @Moldcamp
Real-time search in Drupal with Elasticsearch @Moldcamp
Alexei Gorobets
HTML5 New and Improved
HTML5 New and Improved
Timothy Fisher
Date difference[1]
Date difference[1]
shafiullas
Similar to HTML5 workshop, forms
(20)
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
Loops PHP 04
Loops PHP 04
Moving to the client - HTML5 is here
Moving to the client - HTML5 is here
Practical PHP by example Jan Leth-Kjaer
Practical PHP by example Jan Leth-Kjaer
Html5 forms input types
Html5 forms input types
phptut2
phptut2
phptut2
phptut2
phptut2
phptut2
phptut2
phptut2
Zencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda Memoria
Zen Coding Cheat Sheet
Zen Coding Cheat Sheet
Real-time search in Drupal with Elasticsearch @Moldcamp
Real-time search in Drupal with Elasticsearch @Moldcamp
HTML5 New and Improved
HTML5 New and Improved
Date difference[1]
Date difference[1]
More from Robert Nyman
Have you tried listening?
Have you tried listening?
Robert Nyman
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Robert Nyman
Introduction to Google Daydream
Introduction to Google Daydream
Robert Nyman
Predictability for the Web
Predictability for the Web
Robert Nyman
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
Robert Nyman
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Robert Nyman
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Robert Nyman
Google tech & products
Google tech & products
Robert Nyman
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Robert Nyman
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Robert Nyman
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Robert Nyman
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Robert Nyman
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Robert Nyman
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Robert Nyman
Google, the future and possibilities
Google, the future and possibilities
Robert Nyman
Developer Relations in the Nordics
Developer Relations in the Nordics
Robert Nyman
What is Developer Relations?
What is Developer Relations?
Robert Nyman
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Robert Nyman
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Robert Nyman
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Robert Nyman
More from Robert Nyman
(20)
Have you tried listening?
Have you tried listening?
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Introduction to Google Daydream
Introduction to Google Daydream
Predictability for the Web
Predictability for the Web
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Google tech & products
Google tech & products
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Google, the future and possibilities
Google, the future and possibilities
Developer Relations in the Nordics
Developer Relations in the Nordics
What is Developer Relations?
What is Developer Relations?
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Recently uploaded
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Recently uploaded
(20)
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
HTML5 workshop, forms
1.
HTML5 Forms -
KISS time
2.
Forms
3.
Thou shalt make
things simple
4.
5.
6.
7.
Types
8.
New form types <input
type="color"> <input type="range"> <input type="date"> <input type="search" results="5" <input type="datetime"> autosave="saved-searches"> <input type="datetime-local"> <input type="tel"> <input type="email"> <input type="time"> <input type="month"> <input type="url"> <input type="number"> <input type="week">
9.
10.
11.
Attributes
12.
New form attributes <input
type="text" autocomplete="off"> <input type="text" autofocus> <input type="submit" formaction="http://example.org/save" value="Save"> <input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"> <input type="submit" formmethod="POST" value="Send as POST"> <input type="submit" formnovalidate value="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window">
13.
<input type="text" list="data-list"> <input
type="range" max="95"> <input type="range" min="2"> <input type="file" multiple> <input type="text" readonly> <input type="text" required> <input type="text" pattern="[A-Z]*"> <input type="text" placeholder="E.g. Robocop"> <input type="text" spellcheck="true"> <input type="number" step="5">
14.
<input type="text" mozactionhint="Next">
15.
Elements
16.
New form elements <input
type="text" list="data-list"> <datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack Shephard"> <option value="James 'Sawyer' Ford"> <option value="John Locke"> <option value="Sayid Jarrah"> </datalist>
17.
<keygen></keygen> <meter min="0" max="10"
value="7"></meter> <input type="range" id="range"> <output for="range" id="output"></output> <progress max="100" value="70">70%</progress>
18.
<input type="range" id="da-range"> <output
id="da-range-output"></output> <script> (function () { var range = document.getElementById("da-range"), output = document.getElementById("da-range-output"); range.addEventListener("input", function () { output.value = this.value; }, false); })(); </script>
19.
Validation
20.
<input type="text" required>
21.
22.
Only spaces are
regarded as input :-(
23.
<input type="text" required style="visibility:
hidden">
24.
No dialog, won't
submit form Dialog at element No dialog, won't submit form Dialog at top left of screen (not browser)
25.
<input type="email" required>
26.
27.
No support for
international characters, i.e. röja@kissonline.com won't work
28.
<input type="text" pattern="d{2}-d{5}">
29.
30.
Empty fields are
seen as valid
31.
<input type="text" title="So
you tried to skip me?" required>
32.
33.
<input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE,
just do it right!">
34.
35.
elm.setCustomValidity("No, that's wrong!");
36.
37.
Remove custom validation
message by setting it to an empty string...
38.
elm.setCustomValidity("");
39.
Using setCustomValidity totally kills
the checkValidity method
40.
41.
42.
(function () {
var oninvalidTest = document.getElementById("oninvalid-test"); oninvalidTest.addEventListener("input", function () { this.setCustomValidity(""); }, false); oninvalidTest.addEventListener("invalid", function () { this.setCustomValidity("No, that's wrong!"); }, false); })();
43.
Styling
44.
input:required {
border: 1px solid #00f; }
45.
46.
input:valid {
border: 1px solid #0f0; } input:invalid { border: 1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
47.
48.
49.
input:focus:invalid {
border: 1px solid #f00; }
50.
input:-moz-ui-valid {
border: 1px solid #0f0; } input:-moz-ui-invalid { border: 1px solid #f00; }
51.
input:-moz-placeholder {
color: #f00; background: yellow; } input::-webkit-input-placeholder { color: #f00; background: yellow; }
52.
53.
Works in Safari,
but only with the text color, not the background
54.
input::-webkit-validation-bubble-message {
color: #f00; background: #000; border: 10px solid #f00; -webkit-box-shadow: 0 0 0 0; } input::-webkit-validation-bubble-arrow { background: #ff3456; border-color: orange; -webkit-box-shadow: 0 0 0 0; }
55.
56.
57.
58.
http://www.quirksmode.org/
html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/
59.
60.
61.
62.
Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/
Twitter: @robertnyman robertnyman.com/css3/
Download now