HTML5の要素と属性 - HTML5新規共通属性

HTML5は既存HTMLの殆どの要素は残していて、かつ新規属性を追加している。

HTML5新規属性

contentEditable属性
- trueの場合、要素内の内容編集可能
- 継承性を持っている
designMode属性
- グローバルcontentEditableである
- onの場合、ページ全体が編集可能
hidden属性
- true,falseで表示、非表示を制御する
spellcheck属性
- すペールチェックを行う
- <input.../>, <textarea.../>などの属性
- 属性値はtrue,false

contentEditable属性サンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> contentEditable</title>
</head>
<body>
<!-- contentEditable="true"の要素は編集可能 -->
<div contentEditable="true" style="width:500px;border:1px solid black">
親DIV要素
<!-- 親要素が編集可能なので、編集可能 -->
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
    <td>1-1 編集可能</td>
    <td>1-2 編集可能</td>
</tr>
<tr>
    <td>2-1 編集可能</td>
    <td>2-2 編集可能</td>
</tr>
</table>
</div>
<hr/>
ダブルく後に編集可能
<table id="target" 
    ondblclick="this.contentEditable=true;"
    style="width:420px;border-collapse:collapse" border="1">
<tr>
    <td>Java</td>
    <td>Ruby</td>
</tr>
<tr>
    <td>C/C++</td>
    <td>Python</td>
</tr>
</table>
</body>
</html>

f:id:liguofeng29:20160117150136g:plain

designMode属性サンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> designMode要素 </title>
</head>
<body ondblclick="document.designMode='on';">
<div>ダブルクリックでページ全体が編集可能</div>
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
    <td>1-1</td>
    <td>1-2</td>
</tr>
<tr>
    <td>2-1</td>
    <td>2-2</td>
</tr>
</table>
</body>
</html>

f:id:liguofeng29:20160117150430g:plain

hiddenサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> hiddenﾊﾔ </title>
</head>
<body>
<div id="target" hidden="true" style="height:80px">
テキストテキストテキスト
</div>
<button onclick="var target=document.getElementById('target');
   target.hidden=!target.hidden;">テキスト表示</button>
</body>
</html>

f:id:liguofeng29:20160117150703g:plain

spellcheckサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> spellcheck属性 </title>
</head>
<body>
<!-- すペールチェックを行う -->
<textarea spelllcheck="true" rows="3" cols="40">
</textarea>
</body>
</html>

f:id:liguofeng29:20160117151134g:plain

liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - HTML5新規共通属性