html5--3.16 button元素

學習要點

掌握button元素的使用

button元素

- 用來建立一個按鈕從功能上來說，與input元素建立的按鈕相同

- button元素是雙標簽，其內部可以配置圖片與文字，進行更復雜的樣式設計
- 不僅可以在表單中使用，還可以在其他塊元素和內聯元素中使用

button元素的屬性
- type屬性：可以設置三個值 submit/reset/button與input元素設置的按鈕含義相同
- name/vlue/disable屬性：與input的用法相同
- autofocus屬性：設置按鈕自動獲得焦點。
- form屬性：設定按鈕隸屬于哪一個或多個表單
- formmethod屬性：設定表單的提交方式，將覆蓋原本的提交方式
- formnovalidate屬性：設定表單將會覆蓋原本的novalidate屬性
- fomaction屬性：指定表單數據發送對象，將覆蓋原來的action屬性設定
- formenctype屬性;指定表單的數據發送類型，將覆蓋原本的enctype屬性設定
- formtarget屬性：將覆蓋原本的target屬性設定

重要事項：如果在表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 button元素開始標簽與結束標簽之間的文本，而其他瀏覽器將提交 value 屬性的內容。最好就是在表單中使用 input 元素來創建按鈕。其他地方使用button創建按鈕

實例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 </head>
 7     <p style="color:#FF0000">
 8     </p>
 9     <form action="L3_01.html" method="get" >
10         用戶名：<input type="text" name="name" size="30"><br><br>
11         意見：<textarea name="textarea" id="" cols="30" rows="5" placeholder="請輸入您的意見，謝謝！！" style="background: #F0FFFF"></textarea><br>
12 <!--        <br><input type="submit" value="確定"> <input type="reset"><br>-->
13         <br><button type="submit" style="background: #FFF0FF;border-radius: 10px;padding: 10px"><img src="pen.jpg" alt="" width="12px">提交</button> 
14         <button type="reset" style="background: #FFFFF0;border-radius: 10px;padding: 10px">重置</button><br>
15         
16     </form>
17 <body>
18 </body>
19 </html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/392069.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/392069.shtml
英文地址，請注明出處：http://en.pswp.cn/news/392069.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！