トップ ＞ スキル ： Web ＞ HTML5

Web

各要素のリファレンス21

フォーム関連要素（4/4）

textarea要素（テキスト入力エリア）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ
コンテンツモデル テキスト
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 autofocus（ページがロードされた時に自動的にフォーカスが当たるようにする）
cols（1行に表示する文字の数を指定）
disabled（コントロールを無効にする）
form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセットする）
maxlength（最大入力文字数を指定）
name（コントロールの名前を指定）
placeholder（ヒントを指定）
readonly（読み取り専用にする）
required（必須にする）
rows（表示する行数を指定）
wrap（ワードラップのモードを指定）
デフォルトスタイル -

textarea要素は、テキストを編集するためのコントロールを表します。テキストには改行を入れることもできます。この要素で囲まれたコンテンツがあれば、それがこのコントロールの値となります。

■利用例
  <textarea name="comment">このコメント。
  読めますか？</textarea>
■ブラウザでのレンダリング結果（Chromeの場合）
textarea要素

利用例では、途中で改行している箇所もブラウザであれば改行されてレンダリングされます。

★ colsコンテンツ属性とrowsコンテンツ属性

colsコンテンツ属性には、該当のコントロールで入力値が見える1行分の文字数を指定します。同様にrowsコンテンツ属性は、該当のコントロールで入力値が見える行数を指定します。概ね、colsコンテンツ属性はコントロールの幅を定義しています。
CSSのwidthプロパティとheightプロパティに指定がない限り、textarea要素のコントロールの横幅と縦幅はcolsコンテンツ属性とrowsコンテンツ属性に指定された値に影響されます。
HTML5仕様では、colsコンテンツ属性のデフォルト値は20、rowsコンテンツ属性のデフォルト値は2となっています。

■利用例
  <textarea name="comment" cols="50" rows="5"></textarea>
■ブラウザでのレンダリング結果（Chromeの場合）
textarea要素
★ maxlengthコンテンツ属性

maxlengthコンテンツ属性には、テキストエリアに入力できる文字数を指定します。指定する値は、0以上の整数になります。指定された値以上の文字入力が行われたら、値を超えた文字は入力されません。また、入力された値の文字数は、全角と半角を区別することなく、純粋に文字の数で評価されます。また、改行も1文字として数えられます。

■利用例
  <textarea name="comment" maxlength="150"></textarea>

利用例では、テキストエリアに入力できる文字数を150文字と指定しています。この値を超える文字数は入力できません。つまり、150文字以内でコメントを書き込んでくださいという制限を設けることになります。

★ placeholderコンテンツ属性

placeholderコンテンツ属性は、ユーザに対してそのテキストエリアには何を入力したらよいかを気付かせるようなヒントを表します。

■利用例
  <p><label for="ad">感想：</label></p>
  <textarea name="ad" placeholder="感想をお書きください" id="ad"></textarea>
■ブラウザでのレンダリング結果（Chromeの場合）
textarea要素

利用例では、テキストエリアに感想を書いてほしいというヒントを表示させています。テキストエリアにフォーカスを当てるとヒントは消えます。なお、ヒントには改行を入れることはできません。また、placeholderコンテンツ属性をラベルの代わりに使わないように注意しましょう。

★ readonlyコンテンツ属性

readonlyコンテンツ属性は、読み取り専用にするための論理属性です。textarea要素に、このコンテンツ属性がセットされると、ユーザはその値を編集することができなくなります。

■利用例
  <textarea name="look" readonly="readonly">この文字は編集できません。</textarea>
★ requiredコンテンツ属性

requiredコンテンツ属性は、そのtextarea要素が表すテキストエリアに値が必須かどうかを指定する論理属性です。このコンテンツ属性が指定された場合、テキストエリアに何も入力せずにサブミットすると、エラーが表示されます。

■利用例
  <textarea name="look" required="required"></textarea>
  <input type="submit" value="Go!" />
■ブラウザでのレンダリング結果（Operaの場合）
textarea要素
★ wrapコンテンツ属性

wrapコンテンツ属性は、テキストエリアに入力された値の改行の扱い方をコントロールする列挙属性です。このコンテンツ属性には、softとhardの2つのキーワードが規定されていて、テキストエリア内で行が折り返されたところに改行を加えるかどうかを制御します。
softは、明示的に改行を入れない限り、改行が追加されることはありません。hardは、テキストエリア内で行が折り返して表示されたところに、明示的に改行を入れなくても、自動的に改行が挿入されます。デフォルト値はsoftです。

■利用例
  <textarea name="look" wrap="soft" cols="20" rows="5">
  毎日暑い日が続いていますね。
  体調はどうですか？</textarea>
■ブラウザでのレンダリング結果（Operaの場合）
textarea要素

利用例では、softのキーワードがwrapコンテンツ属性にセットされています。ブラウザのレンダリング結果は、softであれhardであれ、同じように表示されます。この2つのキーワードの違いは、サーバに送信される改行位置になります。利用例で説明すると、softが指定されるとマークアップでの改行を解釈して2行の文章としてサーバに送信されます。hardが指定されるとブラウザでの表示内容が改行として解釈されて、3行の文章としてサーバに送信されます。

keygen要素（鍵ペア生成）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ
コンテンツモデル 空
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 autofocus（ページがロードされた時に自動的にフォーカスが当たるようにする）
challenge（公開鍵と一緒に送信するチャレンジ情報を指定）
disabled（コントロールを無効にする）
form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセットする）
keytype（生成する鍵のタイプを指定）
name（コントロールの名前を指定）
デフォルトスタイル -

keygen要素は、フォームをサブミットする際に、鍵を生成するコントロールです。
フォームがサブミットされると、秘密鍵と公開鍵を生成し、秘密鍵はブラウザ側がで保存され、公開鍵はサーバに送信されます。
keytypeコンテンツ属性は、鍵のタイプを指定する列挙属性です。HTML5で規定されているタイプはRSAのみです（現在2011年8月時点）。challengeコンテンツ属性は、チャレンジ情報を文字列として指定することができます。

■利用例
  <keygen name="key" type="rsa" />
■ブラウザでのレンダリング結果（Operaの場合）
keygen要素
■ブラウザでのレンダリング結果（Chromeの場合）
keygen要素

利用例のようにkeygen要素をレンダリングすると、プルダウンメニューが表示されます。ブラウザによって選択できる項目のラベルはことなりますが、いずれも鍵の強度（ビット長）を表しています。
一般のWebサイトではkeygen要素を使う場面はないですが、銀行やインターネット・バンキング・サービスの電子証明書発行で利用されています。

output要素（フォームの計算結果）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセットする）
for（この要素が表すキャプションを結びつけるフォーム・コントロールのidコンテンツ属性の値を指定）
name（コントロールの名前を指定）
デフォルトスタイル -

output要素は、何かしらの計算結果を表します。例えば、input要素のrangeタイプのコントロールの値の表示に使うことができます。

■利用例
  <form>
  <input type="range" name="mb" id="mb" />
  <output onformchange="value = form.elements.mb.value" for="mb">50</output>
  </form>
■ブラウザでのレンダリング結果（Operaの場合）
output要素

利用例では、forコンテンツ属性には、対応するコントロールのidコンテンツ属性の値をセットします。このようにすることで、output要素がどのコントロールと連動したものかが明確になり、JavaScriptから関連したコントロールを特定するときにも役立ちます。

progress要素（進捗）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
ただし、この要素の中にprogress要素は入れられない
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 value（タスク進捗を表す値を指定）
max（タスク完了時の値を指定）
form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセットする）
デフォルトスタイル -

progress要素は、タスクの進捗を表します。利用される場面としては、プログレス・バーが挙げられます。進捗完了時の値と現在の進捗を表す値の2つを使って、進捗率を表すことができるものに使われます。簡単に言うと、割合を示したい場合にこの要素を使います。

■利用例
  <p>進捗：<progress value="0.5" max="1">半分</progress></p>
■ブラウザでのレンダリング結果（Chromeの場合）
progress要素

利用例は、Chromeでレンダリングした結果です。Operaでも同様のプログレス・バーが表示されますが、progress要素をサポートしていないブラウザでは、この要素に囲まれたコンテンツ内容が表示されます。この利用例あれば、半分という文字が表示されるだけになります。
現在値をvalueコンテンツ属性、最大値をmaxコンテンツ属性で指定します。valueコンテンツ属性は0以上の数値を、maxコンテンツ属性には0より大きい数値を入れ、小数点を使うことも可能です。もし、maxコンテンツ属性を省略すると最大値は1と見なされます。

meter要素（ゲージ）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
ただし、この要素の中にmeter要素は入れられない
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 value（メータに表す値を指定）
min（メータが表す範囲の下限値を指定）
low（低領域の上限値を指定）
high（高領域の下限値を指定）
max（メーターが表す範囲の上限値を指定）
optimum（最適値を指定）
form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセットする）
デフォルトスタイル -

meter要素は、限定された範囲における値を表したい場合に使います。この要素で表したい値に、最小値と最大値が必要である点に注意してください。つまり、最小値と最大値を指定できないようなシーンでは、この要素は使いません。
仕様では、meter要素に使い対象に、ゲージという用語を使っています。

■利用例
  <p><meter value="2" max="5">5段階の3評価です</meter></p>
■ブラウザでのレンダリング結果（Chromeの場合）
meter要素

利用例は、Chromeでレンダリングされた結果ですが、Operaでも同等の表示がされます。meter要素がサポートされているブラウザであれば、この要素に囲まれたテキストは表示されませんが、サポートされていないブラウザではこのテキストが表示されるフォールバックとなります。

meter要素には6つのコンテンツ属性が規定されています。それぞれの意味は次の表の通りになります。

コンテンツ属性 意味 デフォルト値 説明
value 実測値 ゲージが指し示す値
min 最小値 0 ゲージ範囲の下限
low 低領域上限 低領域を表す範囲の上限
high 高領域下限 高領域を表す範囲の下限
max 最大値 1 ゲージ範囲の上限
optimum 最適点 最適となる値

meter要素は、これらのコンテンツ属性の組み合わせで、ゲージに様々な意味を持たせることができるようになります。
valueコンテンツ属性は必須です。
例えば、点数の結果をゲージで表すとします。点数が75点で、低領域（不可評価）を30点、高領域（良評価）を80点とします。（30点から80点の間は可評価となる）また、最低は0点、最高は100点、最適点は100点とする場合は、次のようにマークアップします。

■利用例
  <p><meter value="75" min="0" low="30" high="80" max="100" optimum="100">
  	75
  </meter></p>
■ブラウザでのレンダリング結果（Chromeの場合）
meter要素

Chromeでレンダリングすると、中間領域となる点数であれば黄色のゲージが表示されます。もし、点数が25点（value="25"）とすれば以下のように表示されます。

meter要素

また、点数が90点（value="90"）とすれば以下のように表示されます。

meter要素

このように、色によって点数がどの領域に位置しているかが視覚的に判断できるようになっています。ただし、これもブラウザによって、色が一色のみだけ、まったくサポートされていないためにゲージではなく、meter要素で囲まれたテキストのみ表示されたりします。

【各要素のリファレンス21】