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>