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" />
table
tr
th
td
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="http://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");

Follow me!