您的位置:首页> 前端教程> HTML教程
文章导航

HTML input image按钮

2018-10-25 10:48| 作者: admin| 查看: 2160| 评论: 0|来自: 蚂蚁部落

将<input>标签的type属性值设置为"image"即可创建一个图片按钮。

图片按钮和submit提交按钮一样,点击可以提交表单,当然也可以作为普通按钮使用。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="image" src="mytest/html/button.jpg"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

点击图片按钮可以按钮可以提交表单,效果与submit相同。

通过src属性设置图片的路径,既可以是绝对路径也可以是相对路径。

此按钮还具有其他属性,下面分别做一下介绍:

(1).autofocus(HTML5):规定在页面加载时,域自动地获得焦点。

(2).disabled:设置按钮为不可用。

(4).form(HTML5):规定输入域所属的一个或多个表单。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="image" autofocus src="mytest/html/button.jpg"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

当加载完毕,图片按钮自动获取焦点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="image" disabled src="mytest/html/button.jpg"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

将图片按钮设置为不可用状态,那么它原有的功能也就消失。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="reset" value="重置"/>
    </form>
<input type="image" form="ant" src="mytest/html/button.jpg"/>
</body>
</html>

form属性引用所属表单的id,于是,虽然图片按钮在<form>之外,但依然是该表单的一部分。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部