一起自学前端开发!

按钮标签<button>

来源:原创    更新时间:2017-08-14 10:52:43    编辑:前端网    浏览:2604

在浏览网页的时候,经常能看到各种按键。

在HTML中按键通过<button>标签定义。

格式:

<button type="">...</button>


说明:

在 <button> 元素内部,可以放置内容,比如文本或图像。

始终为 <button> 元素规定 type 属性。

不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

type属性的值:

属性值

说明

submit

该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。

button

该按钮是可点击的按钮(Internet Explorer 的默认值)。

reset

该按钮是重置按钮(清除表单数据)。


举例:对比三个类型按键的区别

代码如下:

<form action="http://www.baidu.com" method="#" target="_blank">  
<div>    账户:<input  name="username" placeholder="输入用户名" value="" />  </div>
 <div>    密码:<input type="password"  name="password" placeholder="密码" value=""  />  </div>  
 <div>
  <button type="button" >普通按键</button>  
  <button type="reset" >重置</button>    
  <button type="submit" >提交</button>  </div>
 </form>


效果:

Oimg20173281493367554778.png

学习了本章节的内容,有一些常犯的错误需要注意一下。


一、布局问题

错误布局方法:使用table来布局。(早期布局)

正确布局方法:使用div+css来布局(目前布局)


二、a标签样式问题

错误方法:a标签中嵌套button将链接改成按键的样式

<a href="#"><button></button></a>


正确方法:通过css改变a标签的样式


上一篇:表单的文本域---前端入门教程

下一篇:已经是最后一篇

评论区

表情

共1条评论
  • 前端菜鸟

    哈哈,不错,适合我这样的前端新人看

    2017-09-26 13:41:40 回复

相关内容

点击排行

随机新闻

评论排行榜