HTML講座！ステップ１～１００

※現在ステップ2まで完成中

下の画像をクリックすると僕のブログへジャンプします。

■フォーム部品の種類を指定するtype属性

type属性は、フォーム部品の種類を指定する際に使用します。 要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。

■type属性の値

HTML5では、input要素のtype属性に指定できる値の種類が増えています。 それぞれの値を指定した場合、例えば、を指定すると、 この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、 送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。

以下は、HTML5で要素のtype属性に追加される値を並べたサンプルソースです。 これらの値を比較的よくサポートしているOperaでは、 などの日付型の値を指定するとカレンダー入力になったり、 でレンジ入力を指定すると、マウスで操作できるレンジバーが表示されるなど、 ユーザーの入力補助となるインターフェースが拡張されています。

ソースコード※コピーしてブログなどに是非貼り付けてみてください。

ソースコードは、DLボタンを押し、DLして、メモ帳に張ってあるのを改造したりしてお楽しみください。

 下のサンプルソースコードをzip形式でDL

メール（type="email"）:

 URL（type="url"）:

 検索（type="search"）:

 電話（type="telephone"）:

 数値（type="number"）:

 日付（type="date"）:

 日時（type="datetime"）:

 ローカル日時（type="datetime-local"）:

 月（type="month"）:

 週（type="week"）:

 時間（type="time"）:

 レンジ（type="range"）:

 色（type="color"）:

HTML講座！ステップ2

 下のサンプルソースコードをzip形式でDL