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
Oracle HRMS & Payroll
Oracle HRMS & Payroll
Nitin Maheshwari
O-livro-de-ouro-do-zen-a-sabedoria-milenar-e-sua-pratica
O-livro-de-ouro-do-zen-a-sabedoria-milenar-e-sua-pratica
Sonia Joao Lemos Carvalho
Payroll process in oracle hrms
Payroll process in oracle hrms
Faisal Anwar
13 xristianismos ellinismos
13 xristianismos ellinismos
Δημήτριος Σιμούδης
Ιουδαϊσμός
Ιουδαϊσμός
lyraki
13 html5 form
13 html5 form
Amiroh S.Kom
HTML-5 New Input Types
HTML-5 New Input Types
Minhas Kamal
Html table tags
Html table tags
eShikshak
Recommended
Oracle HRMS & Payroll
Oracle HRMS & Payroll
Nitin Maheshwari
O-livro-de-ouro-do-zen-a-sabedoria-milenar-e-sua-pratica
O-livro-de-ouro-do-zen-a-sabedoria-milenar-e-sua-pratica
Sonia Joao Lemos Carvalho
Payroll process in oracle hrms
Payroll process in oracle hrms
Faisal Anwar
13 xristianismos ellinismos
13 xristianismos ellinismos
Δημήτριος Σιμούδης
Ιουδαϊσμός
Ιουδαϊσμός
lyraki
13 html5 form
13 html5 form
Amiroh S.Kom
HTML-5 New Input Types
HTML-5 New Input Types
Minhas Kamal
Html table tags
Html table tags
eShikshak
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
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
Sri Ambati
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Zilliz
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
RankYa
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Recently uploaded
(20)
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
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