making form with html5
TRANSCRIPT
Making Form with HTML5
2013/9/1 youhei iwasaki福岡市西区プログラム勉強会
名前 : 岩崎洋平
言語 : php MySQL
facebook : 岩崎洋平
twitter : @youhei_iwasaki
( facebook.com/youhei.iwasaki8 )
今日、お話させて頂くFormとは?
<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属性に追加
◼ 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での入力等、利便性が高い。
・懸念点として、対応状況があげられる。