<progress> - 進捗状況 <progress> - 進捗状況| 項目 | 説明 |
|---|---|
| 形式 | <progress>〜</progress> |
| サポート | H5+ / Fx6+ / Op11+ / Ch6+ |
| タグの省略 | 開始タグ：必須、終了タグ：必須 |
| 包含可能要素 | ブロック要素 / インライン要素 |
progress は進捗状況を示します。最大値を max とした現在の値 value を棒グラフなどで表します。
<progress>〜</progress> の間には、<progress> に対応していないブラウザのためのメッセージや代替内容などを記述します。
| 属性 | 意味 |
|---|---|
| form=id | N4+。関連付けたい form要素のidを指定します。 |
| max=n | H5+。最大値を指定します。 |
| value=n | N5+。現在の値を指定します。 |
| 属性 | 意味 |
|---|---|
| class=class | H4+/e3+/N4+。クラスを指定します。 |
| id=id | H4+/e3+/N4+。ID を指定します。 |
| style=style | H4+/e3+/N4+。スタイルシートを指定します。 |
| title=title | H4+/e4+/N6+。タイトルを指定します。 |
| dir=dir | H4+/e5+/N6+。文字の表示方向を指定します。 |
| lang=lang | H4+/e4+/N6+。言語を指定します。 |
| accesskey=key | H5+。アクセスキーを指定します。 |
| tabindex=n | H5+。タブインデックスを指定します。 |
| contenteditable=bool | H5+/e55+。要素を編集可能にします。 |
| contextmenu=id | H5+。コンテキストメニューを指定します。 |
| draggable=bool | H5+。ドラッグを可能にします。 |
| dropzone=value | H5+。ドロップを可能にします。 |
| hidden | H5+。要素を非表示にします。 |
| spellcheck=bool | H5+。スペルをチェックします。 |
| IE拡張属性 | 他にもIEで拡張された属性が指定可能です。 |
| HTMLソース |
|---|
<script type="text/javascript">
<!--
window.onload = incValue;
function incValue() {
var o = document.getElementById('prog1');
if (o.value == 100) {
o.value = 0;
} else {
o.value += 10;
}
window.setTimeout("incValue()", 1000);
}
// -->
</script>
<progress id="prog1" max=100 value=0></progress>
|
| ブラウザ表示例(※) |
|---|