ITコラム

Connection Data Streaming Download Archiving Concept

ITコラム

2017.03.03

HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)

HTML5からの新要素にprogress要素があります。progress要素は、作業の進捗状況を示す要素でプログレスバーを表示します。
今回は、このprogress要素についてまとめたいと思います。

フォームについては、こちらのページもご参照下さい。

HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)(本ページ)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

目次

1.progress要素
2.プログレスバーの作成

1.progress要素

progress要素は、作業の進捗状況を示す要素です。
進捗状況をプログレスバーで表示します。
output要素とやmeter要素と同様に、データの送信は行わず、ただ表示することが目的の要素です。

meter要素と違って、ある時点の状況を表示するのではなく、ファイルのダウンロード状況など、動きのある進捗状況を表示する場合に使用します。

progress要素で作られるプログレスバーは、次のように表示されます。
(ロード時にプログレスバーが作動しますので、「プログレスバー確認」ボタンをクリックすると、リロードされて動きが確認できます。)

Loading : Loading… : 0

使用する要素 : <progress> ~ </progress>

progress要素の属性 value属性 完了した量
デフォルト値は0.0 ~ 1.0
max属性 トータルの量を指定
form属性 親のform要素のid名を呼び出して関連付ける
グローバル属性 id属性、class属性、title属性、style属性など

value属性とmax属性は、どちらも0以上の数値を使います。進捗状況を表示するという性質上、マイナスの数値は使いません。
value属性のデフォルト値は0.0 ~ 1.0ですので、小数の指定も可能です。

max属性を指定する場合は、value属性の値はmax属性値までとなり、max属性を指定しない場合は、value属性の値は1.0までとなります。
max属性は、0より大きい値を指定します。

▲目次へ戻る

2.プログレスバーの作成

●value属性とmax属性を指定すると、次のような表示になります。




上の3つはvalue属性を指定(固定)しているので、動きはありません。
1番下に表示されているプログレスバーは、 value属性値が取得できない状態の表示です。

上の表示に対するhtmlコードは、以下の通りです。

<label><progress value="0" max="100">0%</progress> (0%)</label>
<label><progress value="50" max="100">50%</progress> (50%)</label>
<label><progress value="100" max="100">100%</progress> (100%)</label>
<label><progress max="100">0%</progress>(不明)</label>

max属性は、全て100に指定しています。
value属性の値は、実際にはJavaScript等によって動的に取得しますが、ここでは、上から順番に0、50、100で指定しています(ですので、プログレスバーの動きがありません)。
1番下は、value属性の値が取得できない場合のプログレスバーの表示です。

<progress> ~ </progress>の間に、progress要素に対応していないブラウザ対策として、現在値と最大値をテキストで表示することが推奨されています。
progress要素に対応しているブラウザでは、このテキストは表示されません。
 
 
●JavaScriptを使うと、動きのあるプログレスバーになります。
(ボタンをクリックすると動きます。)

Loading : Loading… : 0

上の表示に対するhtmlコードは、以下の通りです。

Loading : <progress id="prog" max="100" value="0">Loading...</progress>
 : <output id="outp">0</output>%
<input type="button" value="プログレスバー確認" onClick="location.reload(); return false;">

<script>
  var pbar = document.getElementById('prog');
  var ptxt = document.getElementById('outp');
  var pup = setInterval("upPrgrss()",100);
  function upPrgrss(){
    if(pbar.value<=pbar.max){
    pbar.value++;
    ptxt.value = pbar.value;
    }else{
    clearInterval(pup);
    }
}
</script>

<script> ~ </script>内の「pbar.value++;」が、progress要素のvalue値を0から100まで1ずつ増やしていく命令です。
進捗状況の%をテキストでも表示するために、output要素も使っています。

▲目次へ戻る

SHARE

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.