HTML 属性一覧

一覧

要素 属性
汎用 style <div style="~">
class <div class="~">
id <div id="~">
name <div name="~">
title <div title="~">
text
html
font size <font size="5">
color <font color="#0000ff">
input value <input type="text" value="aaaa">
type <input type="text" >
readonly <input type="text" readonly="readonly" >
maxlength <input type="text" maxlength="5" >
disabled <input type="text" disabled="disabled" >
form method <form method="POST">
target <form target="_blank" >
action <form action="maxlength.html" >
a href <a href="URL" >
target <a target="_blank">
img src <img src="~" />
alt <img alt="aaa" />
width <img width="20px" />
height <img height="20px" />
border <img border="0" />
tabletrthtd width <table width="300">
height <table height="300">
colspan <td colspan="3">
rowspan <td rowspan="3">
frame scrolling <frame scrolling="auto">

基本構造

meta

指定のURLへリダイレクト(http-equv)

<meta http-equv="refresh" content="0; URL="https://office-yone.com">

モバイル用表示属性(viewport)

CSS レスポンシブ/ビューポート」参照

text、html属性

text属性

操作対象

<div id="myDiv">操作対象</div>
<script>
  $(function(){
    var divNm = $("#myDiv").text();
    // ⇒ divNm : "操作対象"
    
    $("#myDiv").text("新しい文字");
  });
</script>

html属性
操作対象
<span id="mySpan">操作対象</span>
<script>
  $(function(){
    var htmlNm = $("#mySpan").html();
    // ⇒ htmlNm : "操作対象"
    
    $("#mySpan").html("新しい文字");
  });
</script>


<label id="myLabel_label">○○○</label&gt

○○○

<div id="myDiv_label">○○○</div>

○○○
<span id="mySpan_label">○○○</span>

○○○

<article id="myArticle_label">○○○</article>

opacity属性(透明度)

CSS opacity属性」参照

リンク

a

米良太事務所
指定のURLを開く
<a href="https://office-yone.com/">米良太事務所</a>
新しいウィンドウで開く
<a href="https://office-yone.com/" target="_blank">米良太事務所</a>
ブックマークへ移動
<a href="~#bookmark">TOPへ</a>
同一ページのトップへ移動
<a href="#">TOPへ</a>

メディア

canvas

CSS <canvas>」参照

img

<img border="0" src="../images/img001.gif" width="128px" height="128px" alt="~" >

テーブル

table

 A   B   C   D 
 B 
 C 
 D 

<table>
 <tr>
  <th>A</th>
  <th>B</th>
  <th>C</th>
  <th>D</th>
 </tr>
 <tr>
  <th>B</th>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <th>C</th>
  <td></td>
  <td rowspan="2" colspan="2"></td>
 </tr>
 <tr>
  <th>D</th>
  <td></td>
 </tr>
</table>

リスト

ul、ol、li

UL = UnorderdList
OL = OrderdList
LI = ListItem

  • style="list-style-type: disc"
  • style="list-style-type: square"
  • style="list-style-type: lower-alpha"
  • style="list-style-type: upper-alpha"
  • style="list-style-type: none"
  • style="list-style-type: decimal"
  • style="list-style-type: decimal-leading-zero"

<ul style="list-style-type: none">
 <li>style="list-style-type: none"</li>
</ul>
<ul style="list-style-type: disc">
 <li>style="list-style-type: disc"</li>
</ul>
<ul style="list-style-type: square">
 <li>style="list-style-type: square"</li>
</ul>
<ul style="list-style-type: decimal">
 <li>style="list-style-type: decimal"</li>
</ul>
<ul style="list-style-type: decimal-leading-zero">
 <li>style="list-style-type: decimal-leading-zero"</li>
</ul>
<ul style="list-style-type: lower-alpha">
 <li>style="list-style-type: lower-alpha"</li>
</ul>
<ul style="list-style-type: upper-alpha">
 <li>style="list-style-type: upper-alpha"</li>
</ul>

フォーム(入力系)

label

対象タグ
<label for="mytext" accesskey="n">名前:</label>
<input type="text" id="mytext" value="aaa" />
[Alt]キー + accesskey でforで指定したidを選択状態に

text


<input type="text" id="mytext" value="aaa" />


<input type="text" id="mytext" value="aaa" size="50" />
50文字分の横幅(フォントに依存) → Width指定推奨

value属性

<input type="text" id="objText1" value="aaa" />
<script type="text/javascript">
  var myText = document.getElementById("objText1");
  myText.value = ‘AAA’;
  
  var contents = myText.value;
  ⇒ contents : AAA
</script>



<input type="text" id="objText1" value="aaa" />

<script type="text/javascript">
  $(function(){
    //value属性設定
    $(‘#objText1’).val(‘AAA’);
    
    //value属性値の取得
    var contents= $(‘objText1’).val();
    ⇒ contents : AAA
  });
</script>

button


<input type="button" id="mybutton" value="aaa" />

<button id="mybutton" value="aaa" ></button>

submit


<input type="submit" id="mysubmit" value="aaa" />

form

パラメータを渡す為のオブジェクト
form内のsubmit押下によって実行される。
<form name="myForm" action="#" method="POST">
  <input type="text" name="box1" /><br/>
  <input type="text" name="box2" /><br/>
  <input type="text" name="box3" /><br/>
  <input type="submit" value="検索" /><br/><br/>
</form>
送信先プログラムのURIを指定する
action="http://~.html"
action="#"
送信の際の転送方法(HTTPメソッド)を指定する
method="POST"
method="GET"
スクリプト言語などから参照できるよう名前を指定する
name="frmTest"
フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する
target="flmTest"

checkbox

項目名1
項目名2
項目名3

<input type="checkbox" id="mycheck1" value="aaa" checked="checked" />項目名1
<input type="checkbox" id="mycheck2" value="bbb" />項目名2
<input type="checkbox" id="mycheck3" value="ccc" />項目名3

baseball
basketball
soccer
<input type="checkbox" name="sports" id="chkbaseball" value="baseball" checked="checked" />
baseball<br/>
<input type="checkbox" name="sports" id="chkbasketball" value="basketball" checked="checked" />
basketball<br/>
<input type="checkbox" name="sports" id="chksoccer" value="soccer" />
soccer<br/>

val
text
<script type="text/javascript">
  //Loopさせる
  $(‘:checkbox[name="sports"]:checked‘).each(function(index, checkbox) {
    var sportsValue = $(checkbox).val();
    //⇒ sportsValue : baseball
    //⇒ sportsValue : basketball
    
    var sportsText = $(checkbox).text();
    //⇒ sportsText : baseball
    //⇒ sportsText : basketball
  });
</script>

prop
var isChecked = $("#chkbaseball").prop(‘checked‘);
//⇒ isChecked : true
var isChecked = $("#chksoccer").prop(‘checked‘);
//⇒ isChecked : false

radiobutton

項目名1
項目名2
項目名3
<input type="radio" name="myradio" value="aaa" checked="checked" />
<input type="radio" name="myradio" value="bbb" />
<input type="radio" name="myradio" value="ccc" />

checked


<script type="text/javascript">
  $(function(){
    var isChecked = $("#rdoMan1").prop(‘checked’);
    //⇒ isChecked : true

    var isChecked = $("#rdoWoman1").prop(‘checked’);
    //⇒ isChecked : false
  });
</script>

value



<input type="radio" id="rdoMan2" name="gender2" value="man" checked="checked" />
<label for="rdoMan2">MAN</label><br/>
<input type="radio" id="rdoWoman2" name="gender2" value="woman" />
<label for="rdoWoman2">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    var value = $("#rdoMan2").val();
    //⇒ value : man
    
    var strGender = $("#rdoWoman2").val();
    //⇒ value : woman
    
    //選択されているradioの文字を取得
    var value = $(":radio[name=’gender2′]:checked").val();
    //⇒ value : man
  });
</script>

text


<input type="radio" id="rdoMan3" name="gender3" value="rdoMan3" checked="checked" />
<label for="rdoMan3">MAN</label><br/>
<input type="radio" id="rdoWoman3" name="gender3" value="rdoWoman3" />
<label for="rdoWoman3">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    var value = $("#rdoMan3").val();
    //⇒ value : rdoMan3
    
    //forはradioのidを指定。radioにおいてはvalueとidを一致させておく前提
    var text = $(‘label[for=’ + value + ‘]’).text();
    //⇒ text : MEN
  });
</script>

prop



<input type="radio" id="rdoMan4" name="gender4" checked="checked" />
<label for="rdoMan4">MAN</label><br/>
<input type="radio" id="rdoWoman4" name="gender4" />
<label for="rdoWoman4">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    $("#rdoWoman4").prop(‘checked’ , true);
  });
</script>

select

コンボボックス

<select>
  <option value="aaa">項目名1>/option>
  <option value="bbb">項目名2>/option>
  <option value="ccc">項目名3>/option>
</select>

リストボックス

<select size="3">
  <option value="aaa">項目名1>/option>
  <option value="bbb">項目名2>/option>
  <option value="ccc">項目名3>/option>
</select>

textarea


<textarea rows="4" cols="40">aaa</textarea>

その他

style属性


<input type="text" id="objText2" value="aaa" />

<script type="text/javascript">
  var myText = document.getElementById("objText2");
  myText.style.color = "red";
  
  var color = myText.style.color;
  ⇒ color : red
</script>

「-」を含む属性を扱う場合
<style>
  (セレクタ) { background-color: black; }
</style>

document.getElementById(~).style.backgroundColor = "black";
// 「-」を無くし、「-」の次の文字を大文字にする



<input type="text" id="objText2" value="aaa" />

<script type="text/javascript">
  $(function(){
    //style属性設定
    $(‘#objText2’).css(‘color’, ‘red’);
    
    //style属性値の取得
    var col = $(‘objText2’).css(‘color’);
    ⇒ col : rgb(255,0,0)
  });
</script>

CSS Style属性一覧」参照

attr (prop)

属性の設定
var myImg = document.getElementById(“myImg”);
myImg.src = "b.jpg"

属性値の取得
var img_url = myImg.src;

属性の設定
$("img").attr("src","b.jpg");
$("img").attr("src":"b.jpg" , "alt":"b" , "width":"80")

属性値の取得
var img_url =$("img").attr("src");

propでも同様
$("img").prop("src","b.jpg");
var img_url =$("img").prop("src");

HTML

前の記事

HTML5フォーマット
CSS

次の記事

CSS 属性一覧