html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月23日 星期五

button input

button input onchange onfocus width height

HTML button ,在網頁世界相當的廣泛應用算是按鈕了,是用家及網頁互動途徑,而很早就出現的 HTML button 功能,也隨著網路應用的發展,結合 JavaScript 的事件觸發更多有趣的功能,透過網頁設計師的巧思,讓一個簡單的按鈕變得更不簡單,除此之外,後來流行的 CSS 語法更讓傳統陽春的按鈕更加美化,以下準備了一些 HTML Button 的簡單範例參考。

HTML button 按鈕基本語法 : <button type="button">我是按鈕</button>

HTML button 圖片型按鈕範例 : <button type="button"><img src="圖片網址" /></button>
HTML button 的大小設計,設定 button 按鈕寬度、高度與文字大小 : <input style="font-size: 20px; height: 40px; width: 120px;" type="button" value="我是按鈕" />
 

 HTML button 屬性
  •  disabled - 不能夠動作的按鈕,僅能看不能按。
  •  name - 按鈕的名稱 。
  •  type - 按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單)。
  •  value - 就是按鈕的値 。
  • autofocus - 規定當頁面加載時按鈕應當自動地獲得焦點。
HTML button 事件
JavaScript onclick 事件 : 用來觸發某種 JavaScript 動作,例如 onclick="function ()" 或  onclick="javascript"


<input onclick="alert('你按動了我')" type="button" value="按我" />

<input onclick="this.value = '按我 '+ x15811101; x15811101++" onfocus="x15811101 = 1" style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px; height:50px;" type="button" value="按我" />

<button onclick="this.innerHTML = '按我 '+x15811101 ;x15811101 --" onfocus="x15811101 = 0" style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px; height:50px;" type="button" value="按我" >按我</button >

<button id="d15811" style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; height: 50px; width: 150px;" type="button" value="按我"><marquee scrollamount="40" scrolldelay="300" style="width:40px" >按我</marquee> </button>

<button id="d15811" style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; height: 50px; width: 150px;" type="button" value="按我"><marquee scrollamount="5" width="40">&lt;&lt;&lt;</marquee>按我
<marquee scrollamount="5" direction="right" width="40">&gt;&gt;&gt;</marquee>
</button>

<button id="d15811" style="background-color: silver;  border-radius:30% 30% 30% 30%; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; height: 50px; width: 150px;" type="button" value="按我"><marquee scrollamount="5" width="40">&lt;&lt;&lt;</marquee>按我
<marquee direction="right" scrollamount="5" width="40">&gt;&gt;&gt;</marquee> </button>

<input type="image" onmousedown="this.style.border='10px inset #d5d5d5'" onmouseup="this.style.border='10px outset #d5d5d5'" src="https://2.bp.blogspot.com/-NOv_hpzehlU/WpTvDadQpjI/AAAAAAAAPEQ/LQ_ZjZGivM89kIgJQpGz6WtjS4Igji_-wCPcBGAYYCw/s1600/IMG-20170401-WA0006.jpg" style="background-color: silver; border: 10px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 200px;"  />

沒有留言:

張貼留言