SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

HTML 5のフォーム要素

HTML 5の主要な新しいフォーム要素と既存要素の変更点とは

  • X ポスト
  • このエントリーをはてなブックマークに追加

input要素:HTML 5のスイスアーミーナイフ

 <input>要素はHTML 4の主戦力です。単一の値を保持する抽象エンティティである<input>は、@type属性を使って、保持するデータのタイプに基づき表現形式を決定します。HTML 5では、タイプの種類(仕様ではinputのステートと呼ばれます)が大幅に増え、よく使われるデータタイプにさまざまな視覚的インターフェースが提供されます。

 多くの場合、<input>要素はデフォルトのテキストフィールドと見た目は同じですが、入力検査ができるところが異なります。実装方法によっては(電子メール入力フィールドなど)、この機能は無効な文字の入力を防ぐこともできます。ただし、ほとんどの場合は、このフィールドは任意の値を受けつけ、それが(タイプによって)事前定義されたパターンと一致しないと、自動的に入力検査エラーを発生させます。このエラーイベントは、対応するイベントハンドラで検出できます。

テキスト、検索、電話番号、電子メール、URLのステート

 HTML 5のテキストフィールドに加えられた新しい属性の1つにpatternがあります。これは、対象フィールドと一致させるための正規表現を指定します。フィールドの値が指定の正規表現と一致しない場合、入力検査エラーが発生します。

 テキストフィールドはかなり複雑になることがあるので、HTML 5では、patternが事前定義されている特殊な形式のテキストフィールドが提供されます。emailurltel(電話番号)です。いずれも、明示的なpattern属性値を使ってそれぞれの内部実装をオーバーライドできます。

数値と範囲のステート

 数値のステートは、値として数値のみを有効とするテキストフィールドです。@min(最小値)属性と@max(最大値)属性によって、数値の範囲も追加指定できます(当然ながら、@min@maxより小さい値にする必要があります)。@step属性を特定の値(通常は1)に設定して、値が@min + n * @stepになるよう指定することもできます。このとき、nは0~(@max - @min)/@stepです。例えば、@min="1"@max="5"@step="2"の場合、有効な値は1、3、5のみになります。

 このフィールドの実装によっては、読み取り専用テキストフィールドと矢印を使って@min@maxの値を表すスピナーにすることもできます。一方、範囲のステートの一般的な表現形式は、最小値と最大値の間をサムボタンでスライドするスライダーになります。範囲ステートのinputフィールドは、一般に、厳密な値より相対的な値を重視する場合に適しています(オーディオボリュームを消音と最大音量の間に設定するときなど)。

日付、時刻、日付時刻

 このような入力タイプの多くは、日付、時刻、日付時刻の入力検査形式と、カレンダーや時計の視覚表現を組み合わせます。HTML 5仕様では、これらのフィールドに使用する視覚表現(結果が有効なら日付や時刻や日付時刻の値をフィールドに結び付けるもの)の正式な仕様は提供されていません。

 有効な日付、時刻、日付時刻のフィールドには、標準のW3C表現が使用されます。例えば、太平洋標準時の2010年1月2日午後10:15:00は「2010-01-02T10:15:00-08:00Z」、2010年第5週は「2010-W05」、2010年1月は「2010-01」となります。

 数値の場合と同様に、これらのフィールドでも@min属性と@max属性がサポートされ、有効な値の範囲を制限できます。これはフィールドの視覚表現でもサポートされる可能性があります。その場合、例えば、@minを「2010-01」、@maxを「2010-12」とすることで、カレンダーに2010年の日付だけを表示できます。

 これらのフィールドは変換プロパティvalueAsDateもサポートします。これは、W3C XML日付表現をJavaScriptのDate()オブジェクトに変換し、またそのようなJavaScriptオブジェクトを反対に文字列表現に変換するものです。

イメージステート

 イメージステートは、とても便利になりそうな新しいフィールドタイプです。このタイプの<input>コントロールは、@src属性でイメージリソースを参照します。ロードしたイメージをユーザーがマウスでクリックすると、クリックした位置がイメージの原点からの相対座標で検出され、このコントロールの値になります。

 イメージステートにはさまざまな用途が考えられます。色の明度や彩度を表す勾配曲線などの非数値情報を視覚的範囲で示すコントロールも容易に作成できるようになります。WebゲームのUI開発やイメージコンテンツの注釈も簡素化できます。大雑把なエリアマップも作成できます。

 座標表現がどんなものになるのか、現在の仕様ではやや不明瞭ですが、おそらくはカンマで区切ったXYペアになるでしょう。既に、各種HTML DOM表現で、イメージに対するマウスの相対座標を検出できますが、必ずしも簡単ではありません。イメージステートを使えば、そうしたコードを簡素化でき、すべてのHTML 5ブラウザで統一することも可能になります。

カラーステート

 色のinputタイプは、特定の色を選択する手段を提供します。通常、これは、#rrggbb、rgb(赤、緑、青)、または単純な色名指定('green'、'yellow'など)の色表現を指定できるテキストフィールドと、カラーセレクタなどで色選択できるウィジェットを組み合わせて実装されます。このようなウィジェットの具体的な実装はブラウザに依存します。

次のページ
オートコンプリート、リスト、データリスト、プレースホルダ、オートフォーカス

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Kurt Cagle(Kurt Cagle)

ライター、情報アーキテクト、XML News NetworkとMetaphorical Webのウェブマスター。カナダ、ブリティッシュコロンビア州のビクトリア在住。XMLToday.orgの編集長、O'Reilly Mediaの寄稿編集者。現在、XBRLに関する著書を執筆中。彼のTwitterはtw...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4494 2009/11/09 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング