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属性
<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>
<div id="myDiv_label">â—‹â—‹â—‹</div>
â—‹â—‹â—‹
<span id="mySpan_label">â—‹â—‹â—‹</span>
<article id="myArticle_label">â—‹â—‹â—‹</article>
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>
<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
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
é …ç›®å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" />
<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>
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");