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 /> </pre> <style> input {cursor:pointer;} 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>

00

<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" > </pre> <style> input {cursor:pointer;} 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>

00

<pre><bb>input </bb> <<c>form action="demo_form.asp"> Quantity (between 1 and 5): <<c>input max="5" min="1" name="quantity" type="number" /> <<c>/form> <form action="demo_form.asp"> Quantity (between 1 and 5): <input max="5" min="1" name="quantity" type="number" /> </form> <hr> <<c>form action="demo_form.asp"> <<c>input type="email" /><<c>/form> <form action="demo_form.asp"> <input type="email" /></form> <hr> <<c>input type="file" multiple > <input type="file" multiple > </pre> <style> input {cursor:pointer;} 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>

00

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> <style> .container { cursor: pointer; font-size: 22px; } </style> <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> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} 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>

00

<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> <style> .container { cursor: pointer; font-size: 22px; } </style> <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> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} 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>

00

You select <span id="dp">?</span> <br> <label class="container"> <input type="radio" name="S1" value="1" >1</label> <label class="container"> <input type="radio" name="S1" value="2">2</label> <label class="container"> <input type="radio" name="S1" value="3">3</label> <label class="container"> <input type="radio" name="S1" value="4">4</label> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { //true false round.checked=false;return round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) </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> <style> .container { cursor: pointer; font-size: 22px; padding-left: 20px; } </style> <style> input {cursor:pointer;} 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>

00

You select <span id="dp1"> 1 </span> <span id="dp2"> 2 </span> <span id="dp3"> 3 </span> <span id="dp4"> 4 </span> <br> <label class="container"> <input type="radio" value="1" >1</label> <label class="container"> <input type="radio" value="2">2</label> <label class="container"> <input type="radio" value="3">3</label> <label class="container"> <input type="radio" value="4">4</label> <script> dp1.style.opacity=0.3; dp2.style.opacity=0.3; dp3.style.opacity=0.3; dp4.style.opacity=0.3; dp1.style.textDecoration = "line-through"; dp2.style.textDecoration = "line-through"; dp3.style.textDecoration = "line-through"; dp4.style.textDecoration = "line-through"; 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"; } }) }) </script> <pre> <<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> <style> input {cursor:pointer;} 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>

00

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> <style> .container { cursor: pointer; font-size: 22px; } </style> <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> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} 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

00

<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> <style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="checkbox" checked="checked">One<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Two<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Three<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Four<<c>/label> <<c>style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } <<c>/style> </pre> <style> input {cursor:pointer;} 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

00

<style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px;font-size: 22px;} </style> <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> <style> input {cursor:pointer;} 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

00

<style> .container { display: block; /* 垂直 */ position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark { background-color: #ccc;} .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>

00

<style> .container { position: relative; /* 橫向 */ margin-right: 30px; /* 橫向 */ padding-left: 35px; /* 選擇框 字距 */ cursor: pointer; /* 滑鼠游標手型 */ font-size: 22px; } /* 字 大小 */ .container input { position: absolute; /* 隱藏原有選擇框 */ opacity: 0; cursor: pointer; } .checkmark { position: absolute; /* 自加選擇框 */ top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark{background-color: #ccc;} /*滑鼠改色*/ .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>

00

Edit

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