Soumettre la recherche
Mettre en ligne
HTML5 workshop, forms
•
6 j'aime
•
4,135 vues
Robert Nyman
Suivre
Workshop given at Jfokus 2012
Lire moins
Lire la suite
Technologie
Design
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 62
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
Contenu connexe
Similaire à 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
Similaire à 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]
Plus 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
Plus 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
Dernier
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
LoriGlavin3
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
BkGupta21
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Dernier
(20)
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
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/
Télécharger maintenant