about html5 form tags

1. Making Form with HTML5
2013/9/1
youhei iwasaki福岡市西区プログラム勉強会

2. 名前 : 岩崎洋平
言語 : php MySQL
facebook : 岩崎洋平
twitter : @youhei_iwasaki
( facebook.com/youhei.iwasaki8 )

3. 今日、お話させて頂くFormとは？

5. <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>

6. 皆様知っていましたか？

7. HTML5では、多数のフォームに関する
素晴らしい属性が追加されています！

8. <input>タグのtype属性に追加
◼ email
◼ url
◼ search
◼ tel
◼ number
◼ date
◼ datetime-local
◼ month
◼ week
◼ time
◼ range
◼ color
(DEMO) http://fukuokaphp.t-capsule.jp/demos1.html

9. その他の追加属性
◼ autofocus
◼ placeholder
◼ autocomplete
◼ required
◼ pattern
◼ multiple
(DEMO) http://fukuokaphp.t-capsule.jp/demos2.html

10. 今日は追加された属性を
DEMOと一緒に見て行こうと思います。

11. DEMO

12. ◼まとめ
・バリデーションが大変便利。
・GUIでの入力等、利便性が高い。
・懸念点として、対応状況があげられる。