WEBエンジニアGirls!!

今までプログラミングに触れたことがなかった女子たちが、就職・インターンを機にイケてるWEBエンジニアを目指す七転び八起きをゆるーり綴ります( ´ω`)

スマホで入力フォームをタップしたときにキーボードの表示を変えたい!

みなさま、おひさしぶりです!

WEBエンジニア女子のみきです  ||ω・`)チラ

しばらく隠居してましたが、またちびちび復活していきます!

f:id:we-girls:20151018025829p:plain

ハロウィンの季節ですね!

みき家にはハロウィン仕様のお花が飾ってあります₍₍ ◝('ω'◝) ⁾⁾ ₍₍ (◟'ω')◟ ⁾⁾

 

さて、本題!

登録フォームのあるページを作っていて、ふと感じました。

たまにある、入力欄をクリックしたらキーボードが最初から

 数字が出てくるやつ・・・どうやってやるんやろ??

 

ってことでググってみました。

あった!割とすんなり見つかった!!!

 

なんと…HTML5からの新機能でできちゃうようです!

入力フォームをつくるときの input type ="●●"を好きなものに指定するだけ。

簡単・・・!

↓こちらのブログ様を参考にさせていただきました!↓

【HTML5】inputタグのtype属性を使ってiPhoneからのテキスト入力を少し快適にする | KLUTCHE

ここではiPhoneで試されているので、

Androidではどんな表示になるのかレッツトライ!

機種によって異なるとは思いますが・・・参考にどうぞ\(^O^)/

 

input type = "text"

   f:id:we-girls:20151018030519p:plain

   おなじみの画面ですね!

input type="password"

   f:id:we-girls:20151018030756p:plain

   最初から英語選択!

   しかも入力した文字が伏字になる!素晴らしい!

input type="email"

   f:id:we-girls:20151018030905p:plain

   iPhoneでは@マークがすぐ押せるキーボードになるようですが

   Androidでは普通の英語キーボードですね

input type="url"

   f:id:we-girls:20151018030936p:plain

   こちらも同様・・・!

   iPhoneでは.comも出ちゃうとか・・・!羨ましい!:(´◦ω◦`):

input type="tel"

   f:id:we-girls:20151018030957p:plain

   これイチオシです!笑

   最初から数字が出てくれるのは本当に便利!

input type="number"

   f:id:we-girls:20151018031026p:plain

   数字は数字でも、「tel」とは違う画面ですね。

   そのときに応じて使い分けたいです!

input type="date"

   f:id:we-girls:20151018031100p:plain

   これすごい!!(感動)

   日付が選べるモーダルが出現しました。大活躍の予感です!

 

---

以上input typeをいろいろ実践してみました!

HTML5からはこんなのが使えるのかー!」と思っていたところ、

実は、もっと増えてるみたいです・・・笑

気になる方はこちらをどうぞ!

<input>-HTML5タグリファレンス

中には、いつ活躍できるかちょっと微妙なやつもありますが( ´ ▽ ` ;)

 

スマホユーザーが圧倒的に増えているなかで

キーボードを指定してあげるのは、すごくユーザビリティ向上につながると思います!

離脱率も下がりそう・・・o(`ω´ )o

これからは、ぜひ活用していきたいです!

みき。