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
Accessible Salesforce
Accessible Salesforce
Shannon Hale
Monitoramento de Bancos de Dados MS SQL Server com Zabbix - SQL Technology Da...
Monitoramento de Bancos de Dados MS SQL Server com Zabbix - SQL Technology Da...
Patricia Ladislau Silva
Cómo aumentar la disponibilidad y el rendimiento utilizando sql server 2012 w...
Cómo aumentar la disponibilidad y el rendimiento utilizando sql server 2012 w...
Eduardo Castro
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Yongho Ha
Dimensional model | | Fact Tables | | Types
Dimensional model | | Fact Tables | | Types
umair saeed
Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정
Aree Oh
Git installation and configuration
Git installation and configuration
Kishor Kumar
User, roles and privileges
User, roles and privileges
Yogiji Creations
More Related Content
What's hot
Power BI & SAP - Integration Options and possible Pifalls
Power BI & SAP - Integration Options and possible Pifalls
JJDE
Practical Partitioning in Production with Postgres
Practical Partitioning in Production with Postgres
Jimmy Angelakos
Types of Database Models
Types of Database Models
Murassa Gillani
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
Terry Cho
Monitoramento de Banco de dados SQL Server com Zabbix
Monitoramento de Banco de dados SQL Server com Zabbix
Gustavo Henrique
SSAS, MDX , Cube understanding, Browsing and Tools information
SSAS, MDX , Cube understanding, Browsing and Tools information
Vishal Pawar
Performance consulting
Performance consulting
IMQA
Introduction to Git Commands and Concepts
Introduction to Git Commands and Concepts
Carl Brown
데이터야놀자발표_데이터로토이서비스만들기_조동민 (2).pdf
데이터야놀자발표_데이터로토이서비스만들기_조동민 (2).pdf
DONGMIN CHO
Database development life cycle
Database development life cycle
Afrasiyab Haider
MySQL_MariaDB로의_전환_기술요소-202212.pptx
MySQL_MariaDB로의_전환_기술요소-202212.pptx
NeoClova
Liquibase case study
Liquibase case study
Vivek Dhayalan
MySQL 상태 메시지 분석 및 활용
MySQL 상태 메시지 분석 및 활용
I Goo Lee
Introducción a git
Introducción a git
Keopx
AWS Aurora 운영사례 (by 배은미)
AWS Aurora 운영사례 (by 배은미)
I Goo Lee.
Zabbix による ms sql監視 ~データベースモニタリング~ odbc
Zabbix による ms sql監視 ~データベースモニタリング~ odbc
真乙 九龍
Monitorando Bancos Oracle - 2º ZABBIX MEETUP DO INTERIOR-SP
Monitorando Bancos Oracle - 2º ZABBIX MEETUP DO INTERIOR-SP
Zabbix BR
Magento2.3 API Functional Testing
Magento2.3 API Functional Testing
Vishwas Bhatnagar
OBIEE - Introduction & building reports
OBIEE - Introduction & building reports
Deepika Raipuria
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
Ji-Woong Choi
What's hot
(20)
Power BI & SAP - Integration Options and possible Pifalls
Power BI & SAP - Integration Options and possible Pifalls
Practical Partitioning in Production with Postgres
Practical Partitioning in Production with Postgres
Types of Database Models
Types of Database Models
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
Monitoramento de Banco de dados SQL Server com Zabbix
Monitoramento de Banco de dados SQL Server com Zabbix
SSAS, MDX , Cube understanding, Browsing and Tools information
SSAS, MDX , Cube understanding, Browsing and Tools information
Performance consulting
Performance consulting
Introduction to Git Commands and Concepts
Introduction to Git Commands and Concepts
데이터야놀자발표_데이터로토이서비스만들기_조동민 (2).pdf
데이터야놀자발표_데이터로토이서비스만들기_조동민 (2).pdf
Database development life cycle
Database development life cycle
MySQL_MariaDB로의_전환_기술요소-202212.pptx
MySQL_MariaDB로의_전환_기술요소-202212.pptx
Liquibase case study
Liquibase case study
MySQL 상태 메시지 분석 및 활용
MySQL 상태 메시지 분석 및 활용
Introducción a git
Introducción a git
AWS Aurora 운영사례 (by 배은미)
AWS Aurora 운영사례 (by 배은미)
Zabbix による ms sql監視 ~データベースモニタリング~ odbc
Zabbix による ms sql監視 ~データベースモニタリング~ odbc
Monitorando Bancos Oracle - 2º ZABBIX MEETUP DO INTERIOR-SP
Monitorando Bancos Oracle - 2º ZABBIX MEETUP DO INTERIOR-SP
Magento2.3 API Functional Testing
Magento2.3 API Functional Testing
OBIEE - Introduction & building reports
OBIEE - Introduction & building reports
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
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
Zen Coding Cheat Sheet
Zen Coding Cheat Sheet
Faysal Shahi
Zencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda Memoria
Ronald Franz Nina Layme
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
Zen Coding Cheat Sheet
Zen Coding Cheat Sheet
Zencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda Memoria
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
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
Aggregage
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
shyamraj55
Designing A Time bound resource download URL
Designing A Time bound resource download URL
Runcy Oommen
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
David Newbury
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
Tarek Kalaji
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
Udaiappa Ramachandran
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
infogdgmi
20150722 - AGV
20150722 - AGV
Jamie (Taka) Wang
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IES VE
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
Mahmoud Rabie
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
Md Hossain Ali
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Matsuo Lab
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
Pedro Manuel
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
bruanjhuli
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
DianaGray10
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
Eric D. Schabell
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
DianaGray10
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UbiTrack UK
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
Adam Moalla
Recently uploaded
(20)
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Designing A Time bound resource download URL
Designing A Time bound resource download URL
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
20150722 - AGV
20150722 - AGV
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
HTML5 workshop, forms
1.
HTML5 Forms -
KISS time
2.
Forms
3.
Thou shalt make
things simple
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">
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>
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>
27.
No support for
international characters, i.e. röja@kissonline.com won't work
28.
<input type="text" pattern="d{2}-d{5}">
30.
Empty fields are
seen as valid
31.
<input type="text" title="So
you tried to skip me?" required>
33.
<input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE,
just do it right!">
35.
elm.setCustomValidity("No, that's wrong!");
37.
Remove custom validation
message by setting it to an empty string...
38.
elm.setCustomValidity("");
39.
Using setCustomValidity totally kills
the checkValidity method
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; }
46.
input:valid {
border: 1px solid #0f0; } input:invalid { border: 1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
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; }
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; }
58.
http://www.quirksmode.org/
html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/
62.
Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/
Twitter: @robertnyman robertnyman.com/css3/
Download Now