読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

フォーム関連機能(1)

HTML5

フォーム関連の新機能

input要素の新しいtype属性


email メールアドレス
search 検索テキスト
url URL
tel 電話番号
number 数値
date 日付
datetime UTC
datetime-local ローカル日時
month
week
time 時間
range 範囲
color

フォーム関連の新しい属性


autofocus属性 オートフォーカス
autocomplete属性 オートコンプリート
placeholder属性 プレースフォルダー

required属性

必須項目

pattern属性

正規表現による入力制限
min属性・max属性 最小値と最大値
step属性 ステップ値
multiple属性 複数の値を一度に入力・選択
accept属性 type="file"の時、受け取るファイル

形式を取得

フォーム関連の新しい要素


datalist要素

テキストボックスにプルダウンで入力候補を表示する。
候補値は option要素で指定する。

<input type="text" name="freetext" list="data-list">

<datalist id="data-list">

<option value="HTML5">HTML5

<option value="HTML4">HTML4

<option value="XHTML1">XHTML1

</datalist>

演習課題

  • 以下のように、HTML5でフォームを完成させなさい