share facebook facebook twitter menu hatena pocket slack

2011.10.24 MON

HTML5入門(その2) type属性編

木村 圭佑

WRITTEN BY 木村 圭佑

こんにちは、
職人見習いの木村です。

前回、HTML5入門(その1)では、従来のHTMLとHTML5の違いを紹介しました。

今回は、HTML5で新たに加わったinputタグのtype属性を紹介していきます。

HTML5で新たに加わったtype属性の値は以下の通りです。

search 検索テキスト入力欄
tel 電話番号入力欄
url URL入力欄
email メールアドレス入力欄
datetime UTC(協定世界時)による日時の入力欄
date 日付の入力欄
month 月の入力欄
week 週の入力欄
time 時間の入力欄
datetime-local ローカル日時の入力欄
number 数値の入力欄
range レンジの入力欄
color 色の入力欄

この中から、いくつかをブラウザで確認してみました。(ブラウザはOpera11を使用)

■日時の入力欄

■月の入力欄

■週の入力欄

■時間の入力欄

■数値の入力欄

■レンジの入力欄

■色の入力欄

入力される内容がはっきりわかりやすくなり、カレンダーやレンジ、色など今まではJavaScriptを駆使しなければ実現できなかった表現が容易にできるようになりました。

※この記事は、なかの人(moresmileman)が書いています。

木村 圭佑

木村 圭佑

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。