SlideShare a Scribd company logo
Making Form with HTML5
2013/9/1
youhei iwasaki福岡市西区プログラム勉強会
名前 : 岩崎洋平
言語 : php MySQL
facebook : 岩崎洋平
twitter : @youhei_iwasaki
( facebook.com/youhei.iwasaki8 )
今日、お話させて頂くFormとは?
Making form with html5
<form>
</form>
<input type="text">
Name:<br />
Favarite1:<br />
<input type="checkbox" name="chk" value="1">
<input type="checkbox" name="chk" value="2">
Favarite2:<br />
<input type="radio" name="chk" value="1">
<input type="radio" name="chk" value="2">
Address:<br />
<select name="select">
</select>
<option value="1">
<option value="2">
free space:<br />
<textarea name="body"></textarea>
皆様知っていましたか?
HTML5では、多数のフォームに関する
素晴らしい属性が追加されています!
<input>タグのtype属性に追加
◼ email
◼ url
◼ search
◼ tel
◼ number
◼ date
◼ datetime-local
◼ month
◼ week
◼ time
◼ range
◼ color
(DEMO) http://fukuokaphp.t-capsule.jp/demos1.html
その他の追加属性
◼ autofocus
◼ placeholder
◼ autocomplete
◼ required
◼ pattern
◼ multiple
(DEMO) http://fukuokaphp.t-capsule.jp/demos2.html
今日は追加された属性を
DEMOと一緒に見て行こうと思います。
DEMO
◼まとめ
・バリデーションが大変便利。
・GUIでの入力等、利便性が高い。
・懸念点として、対応状況があげられる。

More Related Content

Similar to Making form with html5 (10)

Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろ
Masakazu Muraoka
 
Xml builderの紹介
Xml builderの紹介Xml builderの紹介
Xml builderの紹介
Hiraku Nakano
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
 
FukuokaPHP 3
FukuokaPHP 3FukuokaPHP 3
FukuokaPHP 3
ichikaway
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
後期02
後期02後期02
後期02
Takenori Nakagawa
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
 
Web 04
Web 04Web 04
Web 04
XMLProJ2014
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろ
Masakazu Muraoka
 
Xml builderの紹介
Xml builderの紹介Xml builderの紹介
Xml builderの紹介
Hiraku Nakano
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
 
FukuokaPHP 3
FukuokaPHP 3FukuokaPHP 3
FukuokaPHP 3
ichikaway
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
 

More from Youhei Iwasaki (9)

twilio x aws コミュニティトラック JAWS FESTA 2015
twilio x aws コミュニティトラック JAWS FESTA 2015twilio x aws コミュニティトラック JAWS FESTA 2015
twilio x aws コミュニティトラック JAWS FESTA 2015
Youhei Iwasaki
 
【第1回 Twilio勉強会 with Bluemix in 福岡】
【第1回 Twilio勉強会 with Bluemix in 福岡】【第1回 Twilio勉強会 with Bluemix in 福岡】
【第1回 Twilio勉強会 with Bluemix in 福岡】
Youhei Iwasaki
 
第0回 Twilio勉強会 with JAWS UG in 福岡
第0回 Twilio勉強会 with JAWS UG in 福岡第0回 Twilio勉強会 with JAWS UG in 福岡
第0回 Twilio勉強会 with JAWS UG in 福岡
Youhei Iwasaki
 
baserCMSの今
baserCMSの今baserCMSの今
baserCMSの今
Youhei Iwasaki
 
junaioで楽しもうAR
junaioで楽しもうARjunaioで楽しもうAR
junaioで楽しもうAR
Youhei Iwasaki
 
Geolocation API を使った位置情報取得
Geolocation API を使った位置情報取得Geolocation API を使った位置情報取得
Geolocation API を使った位置情報取得
Youhei Iwasaki
 
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
 
Hybridauthで簡単に認証システム実装
Hybridauthで簡単に認証システム実装Hybridauthで簡単に認証システム実装
Hybridauthで簡単に認証システム実装
Youhei Iwasaki
 
スマートフォンでのファイルアップロードを考える
スマートフォンでのファイルアップロードを考えるスマートフォンでのファイルアップロードを考える
スマートフォンでのファイルアップロードを考える
Youhei Iwasaki
 
twilio x aws コミュニティトラック JAWS FESTA 2015
twilio x aws コミュニティトラック JAWS FESTA 2015twilio x aws コミュニティトラック JAWS FESTA 2015
twilio x aws コミュニティトラック JAWS FESTA 2015
Youhei Iwasaki
 
【第1回 Twilio勉強会 with Bluemix in 福岡】
【第1回 Twilio勉強会 with Bluemix in 福岡】【第1回 Twilio勉強会 with Bluemix in 福岡】
【第1回 Twilio勉強会 with Bluemix in 福岡】
Youhei Iwasaki
 
第0回 Twilio勉強会 with JAWS UG in 福岡
第0回 Twilio勉強会 with JAWS UG in 福岡第0回 Twilio勉強会 with JAWS UG in 福岡
第0回 Twilio勉強会 with JAWS UG in 福岡
Youhei Iwasaki
 
junaioで楽しもうAR
junaioで楽しもうARjunaioで楽しもうAR
junaioで楽しもうAR
Youhei Iwasaki
 
Geolocation API を使った位置情報取得
Geolocation API を使った位置情報取得Geolocation API を使った位置情報取得
Geolocation API を使った位置情報取得
Youhei Iwasaki
 
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
 
Hybridauthで簡単に認証システム実装
Hybridauthで簡単に認証システム実装Hybridauthで簡単に認証システム実装
Hybridauthで簡単に認証システム実装
Youhei Iwasaki
 
スマートフォンでのファイルアップロードを考える
スマートフォンでのファイルアップロードを考えるスマートフォンでのファイルアップロードを考える
スマートフォンでのファイルアップロードを考える
Youhei Iwasaki
 
Ad

Making form with html5