Forked from: jsdo.it_team's 第二回全国統一 HTML5実技コンテスト エントリー用コード View Diff (679)

ダイアログフォーム

watilde

License: MIT License

Fork
19
Fav
53
View
45716
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 325 lines
  • HTML 53 lines
  • SCSS / Compass 130 lines

会場はこちら http://jsdo.it/event/html5csc/vol2

紹介されました http://gigazine.net/news/20130219-dialog-form/

記事かきましたー http://watilde.hatenablog.com/entry/2012/12/20/110212

お題:思わず登録したくなる「登録フォーム」


意図

  • メッセージアプリでの登録をイメージして作りました
  • 人とチャットしてるときはタイピングが苦じゃないってことで、クラウディアさんに来て頂きました
  • クラウディアさん情報: http://msdn.microsoft.com/ja-jp/claudia00_03.aspx

工夫した点

  • 動線を考え、クラウディアさんの発言するタイミング、テキストフィールドやボタンを表示するタイミングを調整しました
  • パスワード入力を [全て伏字 & 2回入力] にしない代わりに [一部を伏字で表示 & 確認] とういう動作にしました
  • 見られても大丈夫なコードを目指して丁寧に書きました

iPhoneのSafariからホームスクリーンに追加を行うと全画面になります

      _,,,
     _/::o・ァ    chun chun
   ∈ミ;;;ノ,ノ 
     ヽヽ

おしまい。

  • ダイアログフォーム
  • jQuery Mobile v1.2
  • jQuery v1.8.0
  • ダイアログフォーム
  • jQuery Mobile CSS v1.2

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

watilde

Author

Backbone/Rails/CSS Programming/TypeScript/Scala Dartstack: http://dartstack.com/

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

isimiyaisimiya:

かわいい入力フォームチャット型入力フォーム

KonKon:

要するにウィザードだけど、クラウディアさんとお話してると思うだけで入力がつらくない!ふしぎ!

keim_at_Sikeim_at_Si:

クラウディアさんとは...わかってる!

calmbookscalmbooks:

こんな登録フォームみたことない!

nakashimmernakashimmer:

これ、いいですね。やはりヒューマンコミュニケーションが大事かと・・・

Forked

sort by