Making form with html5

538 views
457 views

Published on

about html5 form tags

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
538
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Making form with html5

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

×