share facebook facebook twitter menu hatena pocket slack

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

木村 圭佑

WRITTEN BY 木村 圭佑

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

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

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

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

search検索テキスト入力欄
tel電話番号入力欄
urlURL入力欄
emailメールアドレス入力欄
datetimeUTC(協定世界時)による日時の入力欄
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よりご連絡ください。