making form with html5

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

Upload: youhei-iwasaki

Post on 15-Jul-2015

348 views

Category:

Technology


6 download

TRANSCRIPT

Page 1: Making form with html5

Making Form with HTML5

2013/9/1 youhei iwasaki福岡市西区プログラム勉強会

Page 2: Making form with html5

名前 : 岩崎洋平

言語 : php MySQL

facebook : 岩崎洋平

twitter : @youhei_iwasaki

( facebook.com/youhei.iwasaki8 )

Page 3: Making form with html5

今日、お話させて頂くFormとは?

Page 4: Making form with html5
Page 5: 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>

Page 6: Making form with html5

皆様知っていましたか?

Page 7: Making form with html5

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

Page 8: Making form with html5

<input>タグのtype属性に追加

◼ email

◼ url

◼ search

◼ tel

◼ number

◼ date

◼ datetime-local

◼ month

◼ week

◼ time

◼ range

◼ color(DEMO) http://fukuokaphp.t-capsule.jp/demos1.html

Page 9: Making form with html5

その他の追加属性

◼ autofocus

◼ placeholder

◼ autocomplete

◼ required

◼ pattern

◼ multiple

(DEMO) http://fukuokaphp.t-capsule.jp/demos2.html

Page 10: Making form with html5

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

Page 11: Making form with html5

DEMO

Page 12: Making form with html5

◼まとめ

・バリデーションが大変便利。

・GUIでの入力等、利便性が高い。

・懸念点として、対応状況があげられる。