HTML5でサイトをつくろう

使用例 : ソース確認 [デフォルト]

【HTML】

<input type="search" name="search" /><input type="submit" value="検索" />

使用例 : 表示確認 [デフォルト]

tel

使用例 : ソース確認 [デフォルト]

【HTML】

<label>Tel:<input type="tel" name="tel" /></label>

使用例 : 表示確認 [デフォルト]

url

使用例 : ソース確認 [デフォルト]

【HTML】

<label>URL: <input type="url" name="url" /></label>

使用例 : 表示確認 [デフォルト]

email

使用例 : ソース確認 [デフォルト]

【HTML】

<label>E-mail: <input type="email" name="email" /></label>

使用例 : 表示確認 [デフォルト]

range

使用例 : ソース確認 [デフォルト]

【HTML】

<label>Range: <input type="range" name="range" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [valueを0に設定]

【HTML】

<label>Range: <input type="range" name="range" value="0" /></label>

使用例 : 表示確認 [valueを0に設定]

color

使用例 : ソース確認 [デフォルト]

【HTML】

<label>Color: <input type="color" name="color" /></label>

使用例 : 表示確認 [デフォルト]

datetime

使用例 : ソース確認 [デフォルト]

【HTML】

<label>日時:<input type="datetime" name="datetime" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [min属性を設定]

【HTML】


<label>日時:<input type="datetime" name="datetime" min="2011-09-01T00:00Z" /></label>

使用例 : ソース確認 [min属性を設定]

date

使用例 : ソース確認 [デフォルト]

【HTML】

<label>日付: <input type="date" name="date" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [step属性を設定]

【HTML】


<label>日付: <input type="date" name="date" step="7" /></label>

使用例 : 表示確認 [step属性を設定]

month

使用例 : ソース確認 [デフォルト]

【HTML】

<label>年月: <input type="month" name="month" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [min属性とmax属性を設定]

【HTML】


<label>年月: <input type="month" name="month" min="2011-06" max="2011-12" /></label>

使用例 : 表示確認 [min属性とmax属性を設定]

week

使用例 : ソース確認 [デフォルト]

【HTML】

<label>週: <input type="week" name="week" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [max属性とstep属性を設定]

【HTML】


<label>週: <input type="week" name="week" step="2" max="2012-W10" /></label>

使用例 : 表示確認 [max属性とstep属性を設定]

time

使用例 : ソース確認 [デフォルト]

【HTML】

<label>時間: <input type="time" name="time" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [step属性を指定]

【HTML】


<label>時間: <input type="time" name="time" /></label>

使用例 : 表示確認 [step属性を指定]

datetime-local

使用例 : ソース確認 [デフォルト]

【HTML】

<label>日時: <input type="datetime-local" name="datetime-local" /></label>

使用例 : 表示確認 [デフォルト]

number

使用例 : ソース確認 [デフォルト]

【HTML】

<label>番号: <input type="number" name="number" /></label>

使用例 : 表示確認 [デフォルト]

使用例 : ソース確認 [step属性を指定]

【HTML】


<label>番号: <input type="number" name="number" /></label>

使用例 : 表示確認 [step属性を指定]