Enviar pesquisa
Carregar
HTML5 workshop, forms
•
6 gostaram
•
4,135 visualizações
Robert Nyman
Seguir
Workshop given at Jfokus 2012
Leia menos
Leia mais
Tecnologia
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 62
Baixar agora
Baixar para ler offline
Recomendados
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
Recomendados
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
Mais conteúdo relacionado
Semelhante a 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
Semelhante a 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]
Mais de 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
Mais de 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
Último
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
charlottematthew16
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Fwdays
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
Lars Bell
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Último
(20)
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
How to write a Business Continuity Plan
How to write a Business Continuity Plan
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/
Baixar agora