✍ 📁 🙈 🙉 🙊 : 4月 2023

2023年4月6日星期四

HTML Table

<table>標簽定義 HTML 表格。

<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br>

<table rules="rows" style="width:95%" >
<caption><<c>table rules="rows" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="cols" style="width:95%" >
<caption><<c>table rules="cols" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td></tr><tr><td>

<table rules="all" style="width:95%" >
<caption><<c>table rules="all" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="none" style="width:95%" >
<caption><<c>table rules="none" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</rd></tr></tbody></table>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#html #網頁格式 #script #style #html table #table caption #table th #table tr #table td #標簽定義 HTML 表格 #table border #table colspan #table rowspan #table rules

2023年4月2日星期日

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

<pre><bb>input type="text"</bb>

<<c>input type="text" size="20" value="123456" />
<input type="text" size="20" value="123456" />
<hr>
<<c>input type="text" size="20" value="123456" <r>onclick="this.select()"</r> />
<input type="text" size="20" value="123456" onclick="this.select()"   />
<hr>
<<c>input type="text" size="20" value="123456" <r>onchange="this.select()"</r><b> onclick="this.select()"</b>  />
<input type="text" size="20" value="123456" onchange="this.select()" onclick="this.select()"  />
<hr>
<<c>input type="text" size="20" value="123456" <r>maxlength="10"</r>/>
<input type="text" size="20" value="123456" maxlength="10"/>
<hr>
<<c>input type="text" size="20" value="123456" <r>readonly</r> />
<input type="text" size="20" value="123456" readonly />
<hr>
<<c>input type="text"  size="20"  value="123456" <r>disabled</r> />
<input type="text"  size="20"  value="123456" disabled />
<hr>
<<c>input type="text" value="123" <r>onchange="alert(this.value)"</r> />
<input type="text" value="123" onchange="alert(this.value)" />
</pre>

<pre><bb>input  </bb>

<<c>input <r>type="password"</r> size="20" value="123456"  />
<input type="password" size="20" value="123456"  /> 
<hr>
<<c>input <r>type="number"</r> size="20"  value="123456"  />
<input type="number" size="20"  value="123456"  />
<hr>
<<c>input type="password" size="20" value="123456" <r>onmouseover="this.select()"</r> <b>onmouseout="this.blur();"</b> />
<input type="password" size="20" value="123456" onmouseover="this.select()"   onmouseout="this.blur();" />
<hr>
<<c>input type="date">
<input type="date">
<hr>
<<C>input type="month" >
<input type="month" >
<hr>
<<c>input type="datetime-local">
<input type="datetime-local">
<hr>
<<c>input type="time" >
<input type="time" >
<hr>
<<c>input type="color" >
<input type="color" >
</pre>

Edit

#html #網頁格式 #script #style #div #html input #html input text

2023年4月1日星期六

input radio

input radio/Checkboxes 選擇框

<label class="container">
  <input type="radio" name="S1" checked >One</label><br>
<label class="container">
  <input type="radio" name="S1">Two</label><br>
<label class="container">
  <input type="radio" name="S1">Three</label><br>
<label class="container">
  <input type="radio" name="S1">Four</label><br>

<pre>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> checked>One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<label class="container">
  <input type="radio" checked >One</label><br>
<label class="container">
  <input type="radio" >Two</label><br>
<label class="container">
  <input type="radio" >Three</label><br>
<label class="container">
  <input type="radio" >Four</label><br>

<pre>
<<c>label class="container">
  <<c>input type="radio" checked>One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" >Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio"  >Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio"  >Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

You select <span id="dp">?</span>
<br>

}) })
</script>
<pre>

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => { 
    round.addEventListener("click", function() {
    if(round.value== dp.innerHTML){  
    round.checked=false ;
    dp.innerHTML = "?";return }
dp.innerHTML =  round.value ;

}) })
<</c>/script>

</pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

You select <span id="dp1"> 1 </span>
<span id="dp2"> 2 </span>
<span id="dp3"> 3 </span>
<span id="dp4"> 4 </span>
<br>

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("click", function() { 
       var TT =document.getElementById("dp"+round.value) ;
       if(TT.style.opacity == 0.3){ TT.style.opacity=1; 
                     TT.style.textDecoration = "initial"; }
        else{ TT.style.opacity=0.3;
               round.checked=false ;
               TT.style.textDecoration = "line-through";   }
  }) })
<</c>/script>

</pre>

<style>

.container { cursor: pointer;           
             font-size: 22px;
             padding-left: 20px; } 
#dp1 ,#dp2 ,#dp3 ,#dp4 { padding-left: 20px;
                         text-decoration : LINE-THROUGH;
                         opacity:0.3}    
</style>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

input radio/Checkboxes 選擇框

Edit

#html #網頁格式 #script #style #div #html input radio #html 選擇框

input Checkboxes

input radio/Checkboxes 選擇框

<label class="container">
  <input type="checkbox" checked="checked">One</label><br>
<label class="container">
  <input type="checkbox">Two</label><br>
<label class="container">
  <input type="checkbox">Three</label><br>
<label class="container">
  <input type="checkbox">Four</label><br>

<pre><<c>label class="container">
  <<c>input type="checkbox" checked="checked">One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="checkbox">Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="checkbox">Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="checkbox">Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style

<label class="container" >
  <input type="checkbox" checked="checked">One</label>
<label class="container">
  <input type="checkbox" >Two</label> 
<label class="container">
  <input type="checkbox" >Three</label> 
<label class="container">
  <input type="checkbox" >Four</label>

<<c>style>
.container { cursor: pointer;           
             padding-left: 30px;
             font-size: 22px; }     
<<c>/style>

</pre>

<label>
  <input type="checkbox"  >
  <span>One</span></label>
<label>
  <input type="checkbox" >
  <span>Two</span></label>
<label>
  <input type="checkbox"  >
  <span>Three</span></label>
<label>
  <input type="checkbox"  >
  <span>Four</span></label>
<pre>
<<c>style>
input[type="checkbox"]:checked  ~ span{ color: red;}
label {cursor:pointer;padding-left: 20px;
       font-size: 22px;}
<<c>/style>

<<c>label>
  <<c>input type="checkbox"  >
  <<c>span>One<<c>/span><<c>/label>
<<c>label>
  <<c>input type="checkbox" >
  <<c>span>Two<<c>/span><<c>/label>
<<c>label>
  <<c>input type="checkbox"  >
  <<c>span>Three<<c>/span><<c>/label>
<<c>label>
  <<c>input type="checkbox"  >
  <<c>span>Four<<c>/span><<c>/label></pre>

.container input:checked ~ .checkmark { background-color: #2196F3;}

.checkmark:after { content: "";
                   position: absolute;
                   display: none; }

.container input:checked ~ .checkmark:after { display: block; }

.container .checkmark:after { left: 9px;
                              top: 5px;
                              width: 5px;
                              height: 10px;
                              border: solid white;
                              border-width: 0 3px 3px 0;
                              -webkit-transform: rotate(45deg);
                              -ms-transform: rotate(45deg);
                              transform: rotate(45deg);}
</style>

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

.container input:checked ~ .checkmark{ background-color: #2196F3;}/*選擇後色*/

.checkmark:after { content: "";
                   position: absolute;
                   display: none; }

.container input:checked ~ .checkmark:after { display: block; }

Edit

#html #網頁格式 #script #style #div #html input Checkboxes #html 選擇框

訂閱：文章 (Atom)

2023年4月6日 星期四

HTML Table

<table>標簽定義 HTML 表格。

2023年4月2日 星期日

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

2023年4月1日 星期六

input radio

input radio/Checkboxes 選擇框

input Checkboxes

input radio/Checkboxes 選擇框

2023年4月6日星期四

2023年4月2日星期日

2023年4月1日星期六