HTML5のマークアップ 新要素

resize:both;はoverflow:scroll;とセット

フォーム関連の新要素

progress要素やmeter要素等ユーザーインターフェイスに関連する機能が追加された。要素のデフォルトデザインはOSのデザインテーマに左右される(XPやクラシック等)。

input要素のtype属性にはnumberやrange、time、week、colorといった値が追加された。

output

進捗progress 50%

ゲージLow activity,

テーブル関連の新要素

テーブルのタイトルや説明を表すcaption要素が追加された。

名簿
名前 性別 Lv
なのは 女 99
さくら 女 13
まどか 女 256
YYYY年MM月
view source

JavaScript

$(function(){
  setInterval(function(){
    var ele = $('progress');
    var val = ele.attr('value') + 2;
    if(val > ele.attr('max')){
      val = 0;
    }
    ele.attr('value', val);
  }, 500);

  $('form').submit(function(){
    var val = '';
    $(this).find('input').each(function(){
      console.dir($(this));
      console.log($(this).val());
      val += $(this).val() + '\n';
    });
    
    $(this).find('output').text(val);
    return false;
  });
});

CSS


#demo div{
  border:1px solid #999999;
  width:120px;
  height:120px;
  resize:both;
  overflow:scroll 
}

meter{
  display:block;
  background-color:#88ff88;
  border:1px solid #006600;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-html5/html5-markup/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。